dva内容简易了解

组件component

这个就不多说了，创建component的大家都会，配合umi来说的话就是在components文件文件夹中创建。

模型状态model

dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。

一个model大概如此：

export default {
  namespace: 'products',
  state: {
    ...
  },
  effects: {
    *fun1({ payload }, { call, put, select }) {
       const data = yield call(接口_name, { 入参_obj });
       yield put({type: 'save', payload: data })
       const state = yield select(_ => _.products)
       ...
    },
    *fun2({ payload }, { call, put, select }) {},
  },
  subscriptions: {
    setup({dispatch, history}) {
      history.listen(({pathname}) => {
        if (pathname === '/layouts' || pathname.indexOf('/layouts/') === 0) {
          //可在此时执行某异步effets，可以用于加载该路由页面组件一进入就需要的数据
          dispatch({type: 'effects_name', payload: { obj }});
        }
      });
    },
  },
  reducers: {
    save(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },
  },
};

1. namespace，定义model的名字，一般与相关联的组件名一一对应。

2. state，作为这个model的状态。

3. effects，采用es6的Generator函数定义异步的方法，一般是用于请求接口，对应数据库的增删改查。

   • effects中有几个传入的方法call、put、select，一般都是先使用call进行接口的访问获取数据，使用put来执行reducers中的操作（通常是save）用获取来的数据更新state，select可以在effect中获取该model中当前的state，此处的products是model的namespace。

   const data = yield call(接口_name, { 入参_obj });
   yield put({type: 'save', payload: data })
   const state = yield select(_ => _.products)
   

4. subscriptions，可以用于路由的监听：

     subscriptions: {
       setup({dispatch, history}) {
         history.listen(({pathname}) => {
           if (pathname === '/layouts' || pathname.indexOf('/layouts/') === 0) {
             //可在此时执行某异步effets，可以用于加载该路由页面组件一进入就需要的数据
             dispatch({type: 'effects_name', payload: { obj }});
           }
         });
       },
     },
   

5. reducer，用于定义普通方法，比如用于修改state状态的函数，大多项目只需要一个save，也就是覆盖原state。

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

连接connect

在组件中使用connect将component与model建立连接，通常一个component对应一个model，常见代码如下：

//普通组件
export default connect(({ model_namespace }) => ({
  model_namespace
}))(component_name);

//需要路由跳转的组件
export default withRouter(connect(({ model_namespace }) => ({
  model_namespace
}))(component_name));

使用

model_namespace作为model的名称，也是这个model的state对象名称，它保存在该组件的props中，在组件中使用起来也很容易，在组件render函数return之前用解构赋值取出中model_namespace对象中的属性值，然后就可以使用了。

render(){
	const { model_namespce : { data1, data2 } } = this.props
	return ...
}

修改状态，也就是调用effects和reducers中的方法：

1. 使用this.props上的dispatch，入参是一个对象，两个属性，一个type，一个payload。
2. type是由/分割的字符串，前面是model的namespace，后面是方法名，可以是effects中的异步方法也可以是reducers中的同步方法。
3. payload传入参数、新状态。

this.props.dispatch({ type: 'model_namespace/fun_name', payload: { count: 1 } });