写在前面
经过几天阅读及参与ant design pro后台编写, 发现每个page下面的model其实就是该页面的数据仓库, 相当于vue的store, 只不过dva把每个页面的数据派发到了每个页面, 而数据的改动全都通过model的effect和reducer来统一管理
Model Reducer 数据赋值
index.js ↓
const Editor = ({
dispatch, editor}) => {
const onChangeText = e => {
// 相当于react的action , 调用editor/changeEditorHtml方法, 并给editorHtml赋值
dispatch({
type: 'editor/changeEditorHtml',
payload: {
editorHtml: e.val,
},
})
}
}
Editor.propTypes = {
editor: PropTypes.object,
dispatch: PropTypes.func,
}
model.js ↓
import modelExtend from 'dva-model-extend'
import {
pageModel } from 'utils/model'
export default modelExtend(pageModel, {
namespace: 'editor',
state: {
editorHtml:''
},
reducers: {
// 数据更新
changeEditorHtml(state, {
payload }) {
return {
...state,
...payload
}
},
},
})