react前端框架dva(三)-阿里云开发者社区

开发者社区> 青衫无名> 正文

react前端框架dva(三)

简介:
+关注继续查看

API

输出文件

dva

默认输出文件。

dva/router

默认输出 react-router 接口, react-router-redux 的接口通过属性 routerRedux 输出。

比如:

import { Router, Route, routerRedux } from 'dva/router';

dva/fetch

异步请求库,输出 isomorphic-fetch 的接口。不和 dva 强绑定,可以选择任意的请求库。

dva/saga

输出 redux-saga 的接口,主要用于用例的编写。(用例中需要用到 effects)

dva/dynamic

解决组件动态加载问题的 util 方法。

比如:

import dynamic from 'dva/dynamic';

const UserPageComponent = dynamic({
  app,
  models: () => [
    import('./models/users'),
  ],
  component: () => import('./routes/UserPage'),
});

opts 包含:

  • app: dva 实例,加载 models 时需要
  • models: 返回 Promise 数组的函数,Promise 返回 dva model
  • component:返回 Promise 的函数,Promise 返回 React Component

dva API

app = dva(opts)

创建应用,返回 dva 实例。(注:dva 支持多实例)

opts 包含:

  • history:指定给路由用的 history,默认是 hashHistory
  • initialState:指定初始数据,优先级高于 model 中的 state,默认是 {}

如果要配置 history 为 browserHistory,可以这样:

import createHistory from 'history/createBrowserHistory';
const app = dva({
  history: createHistory(),
});

另外,出于易用性的考虑,opts 里也可以配所有的 hooks ,下面包含全部的可配属性:

const app = dva({
  history,
  initialState,
  onError,
  onAction,
  onStateChange,
  onReducer,
  onEffect,
  onHmr,
  extraReducers,
  extraEnhancers,
});

app.use(hooks)

配置 hooks 或者注册插件。(插件最终返回的是 hooks )

比如注册 dva-loading 插件的例子:

import createLoading from 'dva-loading';
...
app.use(createLoading(opts));

hooks 包含:

onError((err, dispatch) => {})

effect 执行错误或 subscription 通过 done 主动抛错时触发,可用于管理全局出错状态。

注意:subscription 并没有加 try...catch,所以有错误时需通过第二个参数 done 主动抛错。例子:

app.model({
  subscriptions: {
    setup({ dispatch }, done) {
      done(e);
    },
  },
});

如果我们用 antd,那么最简单的全局错误处理通常会这么做:

import { message } from 'antd';
const app = dva({
  onError(e) {
    message.error(e.message, /* duration */3);
  },
});

onAction(fn | fn[])

在 action 被 dispatch 时触发,用于注册 redux 中间件。支持函数或函数数组格式。

例如我们要通过 redux-logger 打印日志:

import createLogger from 'redux-logger';
const app = dva({
  onAction: createLogger(opts),
});

onStateChange(fn)

state 改变时触发,可用于同步 state 到 localStorage,服务器端等。

onReducer(fn)

封装 reducer 执行。比如借助 redux-undo 实现 redo/undo :

import undoable from 'redux-undo';
const app = dva({
  onReducer: reducer => {
    return (state, action) => {
      const undoOpts = {};
      const newState = undoable(reducer, undoOpts)(state, action);
      // 由于 dva 同步了 routing 数据,所以需要把这部分还原
      return { ...newState, routing: newState.present.routing };
    },
  },
});

详见 examples/count-undo 。

onEffect(fn)

封装 effect 执行。比如 dva-loading 基于此实现了自动处理 loading 状态。

onHmr(fn)

热替换相关,目前用于 babel-plugin-dva-hmr 。

extraReducers

指定额外的 reducer,比如 redux-form 需要指定额外的 form reducer:

import { reducer as formReducer } from 'redux-form'
const app = dva({
  extraReducers: {
    form: formReducer,
  },
});

extraEnhancers

指定额外的 StoreEnhancer ,比如结合 redux-persist 的使用:

import { persistStore, autoRehydrate } from 'redux-persist';
const app = dva({
  extraEnhancers: [autoRehydrate()],
});
persistStore(app._store);

app.model(model)

注册 model,详见 #Model 部分。

app.unmodel(namespace)

取消 model 注册,清理 reducers, effects 和 subscriptions。subscription 如果没有返回 unlisten 函数,使用 app.unmodel 会给予警告️。

app.router(({ history, app }) => RouterConfig)

注册路由表。

通常是这样的:

import { Router, Route } from 'dva/router';
app.router(({ history }) => {
  return (
    <Router history={history}>
      <Route path="/" component={App} />
    <Router>
  );
});

推荐把路由信息抽成一个单独的文件,这样结合 babel-plugin-dva-hmr 可实现路由和组件的热加载,比如:

app.router(require('./router'));

而有些场景可能不使用路由,比如多页应用,所以也可以传入返回 JSX 元素的函数。比如:

app.router(() => <App />);

app.start(selector?)

启动应用。selector 可选,如果没有 selector 参数,会返回一个返回 JSX 元素的函数。

app.start('#root');

那么什么时候不加 selector?常见场景有测试、node 端、react-native 和 i18n 国际化支持。

比如通过 react-intl 支持国际化的例子:

import { IntlProvider } from 'react-intl';
...
const App = app.start();
ReactDOM.render(<IntlProvider><App /></IntlProvider>, htmlElement);

Model

model 是 dva 中最重要的概念。以下是典型的例子:

app.model({
  namespace: 'todo',
  state: [],
  reducers: {
    add(state, { payload: todo }) {
      // 保存数据到 state
      return [...state, todo];
    },
  },
  effects: {
    *save({ payload: todo }, { put, call }) {
      // 调用 saveTodoToServer,成功后触发 `add` action 保存到 state
      yield call(saveTodoToServer, todo);
      yield put({ type: 'add', payload: todo });
    },
  },
  subscriptions: {
    setup({ history, dispatch }) {
      // 监听 history 变化,当进入 `/` 时触发 `load` action
      return history.listen(({ pathname }) => {
        if (pathname === '/') {
          dispatch({ type: 'load' });
        }
      });
    },
  },
});

model 包含 5 个属性:

namespace

model 的命名空间,同时也是他在全局 state 上的属性,只能用字符串,不支持通过 . 的方式创建多层命名空间。

state

初始值,优先级低于传给 dva() 的 opts.initialState

比如:


const app = dva({
initialState: { count: 1 },
});
app.model({
namespace: 'count',
state: 0,
});

此时,在 app.start() 后 state.count 为 1 。

reducers

以 key/value 格式定义 reducer。用于处理同步操作,唯一可以修改 state 的地方。由 action 触发。

格式为 (state, action) => newState 或 [(state, action) => newState, enhancer]

详见: https://github.com/dvajs/dva/blob/master/packages/dva-core/test/reducers-test.js

effects

以 key/value 格式定义 effect。用于处理异步操作和业务逻辑,不直接修改 state。由 action 触发,可以触发 action,可以和服务器交互,可以获取全局 state 的数据等等。

格式为 *(action, effects) => void 或 [*(action, effects) => void, { type }]

type 类型有:

  • takeEvery
  • takeLatest
  • throttle
  • watcher

详见:https://github.com/dvajs/dva/blob/master/packages/dva-core/test/effects-test.js

subscriptions

以 key/value 格式定义 subscription。subscription 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。在 app.start() 时被执行,数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

格式为 ({ dispatch, history }, done) => unlistenFunction

注意:如果要使用 app.unmodel(),subscription 必须返回 unlisten 方法,用于取消数据订阅。

原文发布时间:2018年03月22日

本文来源CSDN博客如需转载请紧急联系作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
(三)Java版Spring Cloud B2B2C o2o鸿鹄云商平台--技术框架
公司要搭建未来服务开发的统一标准,也考虑到框架的可拓展及可伸缩性,能够顺应时代的潮流,鸿鹄云商平台(honghu)业务的可拓展性比较随性,考虑到未来运营方案多样化及快速响应产品&用户需求、新业务的快速迭代变更,作为平台的总架构师,我推荐公司使用当前业界最流行的Spring Cloud分布式微服务云...
1199 0
React JSX vs Vue 模板:前端界的一次对决
本文讲的是React JSX vs Vue 模板:前端界的一次对决,React.js 与 Vue.js 是地球上最受欢迎的两个 JavaScript 库。他们都非常强大并且相对容易上手和使用。
2014 0
React 前后端同构防止重复渲染
为了解决某些问题(比如SEO、提升渲染速度等)react 提供了2个方法在服务端生成一个HTML文本格式的字符串。在得到了这个HTML格式的字符串之后,通常会将其组装成一个页面直接返回给用户的浏览器。本文将介绍服务端同构渲染的原理。
2030 0
(三):C++分布式实时应用框架——系统管理模块
C++分布式实时应用框架——系统管理模块     上篇:(二): 基于ZeroMQ的实时通讯平台   版权声明:本文版权及所用技术归属smartguys团队所有,对于抄袭,非经同意转载等行为保留法律追究的权利!     一个分布式实时系统集群动辄上百台机器,集群的规模已经限定这将是一个”封闭“的系统。
1213 0
【我们一起写框架】MVVM的WPF框架(三)—数据控件
这世上,没人能一次性写出完美无缺的框架;因为,任何一个框架都需要项目的淬炼,然后才能升华,趋近完美。 所以,框架是个反复修改的东西,最终形成的东西。 如果你学了一点技术,觉得自己可以写出框架了,觉得自己有架构师的能力,然而自己总是怀才不遇——那一定是你的错觉。
952 0
Framework7 – 赞!功能齐全的 iOS7 App 前端框架
  Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序。 Framework7 允许您灵活搭建列表视图(表视图) 。你可以让他们作为导航菜单,你可以在列表里面使用图标,输入框以及任何元素,甚至使它们嵌套。
737 0
15款帮助我们创建响应式布局的优秀前端框架
  响应式的 Web 设计方法的目的是制作一个更加灵活的网站,能够为用户提供最佳的视觉体验——方便阅读和导航,只需最少的调整就可实现缩放和滚动,支持更广泛的设备,从移动电话到手持设备到台式电脑。下面是一个优秀的网格工具清单,能够帮助更好的创建响应式布局。
1283 0
+关注
3598
文章
840
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载