react dva reducers用法个人总结

一、前言

之前总结，本人的项目中，用dispatch({})方法调用了另一个js里的effects里的方法，其中有段 yield put({ type: 'updateTreeData', treeData: response, queryPara, });，这个updateTreeData指的又是这个文件里reducers里的方法。

这块逻辑感觉有点乱，在此总结下。

二、个人总结

1.相关定义

(1)dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

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

2.具体代码

(1)在本人的项目中，有个项目名\src\pages\MyOnlineTrainSet\home.jsx文件，先用@connect引入了一下(@connect的意思上个文章总结过了)：

@connect(({  OnlineTrainSet  }) => ({
  OnlineTrainSet,
}))

然后，就可以用dispatch了：

    const { dispatch } = this.props;

    // this.props.dispatch
    dispatch({
      type: 'OnlineTrainSet/fetchTreeNodes',
      queryPara: {},
      callback: resp => {
        //这里写方法执行后的逻辑......
        //console.log(resp)
      },
    });
  };

(2)在另一个文件项目名\src\pages\MyOnlineTrainSet\models\OnlineTrainSet.js中，是这样写的：

export default {
  namespace: 'OnlineTrainSet',

  state: {
      treeData: [],
      queryPara: {},
  ...
    },

  effects: {
      *fetchTreeNodes({ queryPara, callback }, { call, put }) {
      const response = yield call(services.post, '/api/xxx/treenodes', queryPara);
      if (response) {
        yield put({
          type: 'updateTreeData',
          treeData: response,
          queryPara,
        });
        if (callback) callback(response);
      }
    },
  ...
    },
    
  reducers: {
      updateTreeData(state, action) {     
       return {
        ...state,
        treeData: action.treeData || state.treeData,
      };
    },
  ...
    },
    
};

首先，使用了namespace: 'OnlineTrainSet'，并且位于models文件夹下，所以之前的@connect就可以把这个文件的一些内容放入this.props里了；

这里的state里，有一些变量，可以用方法来修改变量，然后用@connect注解会把这些变量放入this.props里，可以取出来用。（例如这里可以用this.props.OnlineTrainSet.treeData获取到treeData的值）

这里的effects里，有一些方法，例如*fetchTreeNodes方法，这个方法就可以被上面的dispatch({ type: 'OnlineTrainSet/fetchTreeNodes',调用到。（type: ‘namespace/方法名’）

*fetchTreeNodes方法里，向后端url/api/xxx/treenodes发送了请求，获取到返回值后，使用put({})方法把response放入了state里的treeData里，并且把请求参数也放入了state里的queryPara里；

扫描二维码关注公众号，回复： 14711139 查看本文章

这里有个 type: 'updateTreeData'，是对返回数据进行了处理，处理方法是reducers里的updateTreeData方法。

updateTreeData的方法中，treeData: action.treeData || state.treeData的意思是，如果后台返回的值不为空，就用后台返回的结果（treeData: action.treeData）；如果后台返回的值为空，就还用当前state里的treeData的值，保持不变（treeData: state.treeData）