一、前言
之前总结,本人的项目中,用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
)