dva

链接: 官方网站

简介

• dva不仅仅是一个第三方库，更是一个框架，它主要整合了redux的相关内容，让我们处理数据更加容易，实际上，dva依赖了很多库：react，react-router，redux，redux-saga, connecte-react-router.

dva的使用

• 1.dva默认导出一个函数，通过调用该函数，可以得到一个dva对象

import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva();

// 2. Plugins
app.use({});

// 3. Model启动之前定义模型
app.model(require('./models/example').default);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

• 2.dva对象.router：传入一个函数，该函数返回一个React节点，将来，应用启动后，会自动渲染该节点。我们也可以直接传入一个函数组件。

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

• 3.dva对象.start：该方法用于启动dva应用程序，可以认为启动的就是react程序，该函数传入一个选择器，用于选中页面的某个dom元素，react会将该元素渲染到页面中去。

// 5. Start
app.start('#root');

• 4.dva对象.model：该方法用于定义一个模型，该模型可以理解为redux的action，reducer，redux-saga副作用处理的整合，整合成一个对象，将该对象传入model方法中即可。
  • 1.该模型应该具有的属性：
    • 1 .namespace：命名空间（会作为仓库中的属性保存）.
    • 2 .state：该模型的默认值.
    • 3 .subscriptions：配置为一个对象，该对象可以写任意数量的属性名称的属性，每个属性是一个函数，这些函数会在模型加入到仓库中后立即运行
    • 4 .effects：处理副作用，底层使用redux-sage实现的，该属性配置为一个对象，该对象中的每一个方法均处理一个副作用，方法名即使匹配的action类型。
    1. 第一个参数：action.
    2. 第二个参数：封装好的redux-saga/effects的处理方法.
    • 5 .reducers：该属性配置为一个对象，对象中的每一个方法就是一个reducer，dva约定，方法的名字就是匹配的action类型.

export default {

 namespace: 'example',

 state: {},

 subscriptions: {
   setup({ dispatch, history }) {  
   },
 },

 effects: {
   *fetch({ payload }, { call, put }) {  
     yield put({ type: 'save' });
   },
 },

 reducers: {
   save(state, action) {
     return { ...state, ...action.payload };
   },
 },

};

在dva中同步路由到仓库

• 调用dva是函数时，配置history对象
• 使用ConnectedRounter提供路由上下文

new dva(opts) opts 包含:

• history: 指定给路由用的历史，默认为 hashHistory
• initialState: 指定初始数据，优先级高于模型中的状态，默认为 {}
• onError: effect执行错误或subscription通过done主动抛错时触发，可用于管理中断错误状态。
• onAction: 在动作被调度时触发，用于注册redux中间件
• onStateChange: state更改时触发，可用于同步state到localStorage，服务器端等。
• onReducer:封装reducer执行。
• onEffect: 封装效果执行。比如DVA加载基于此实现了自动处理负载状态
• onHmr: 热替换相关，目前用于babel-plugin-dva-hmr
• extraReducers: 指定额外的reducer，某种redux-form需要指定额外的formreducer：
• extraEnhancers:指定额外的StoreEnhancer，某些结合redux-persist的使用：