react dva reducers用法个人总结

快来打我* 2024-03-27 11:29 70阅读 0赞

## 一、前言 ##

之前总结，本人的项目中，用`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`里；

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

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