【Ant Design Pro】Model Reducer 数据赋值

写在前面
经过几天阅读及参与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
            }
        },
    },
})

猜你喜欢

转载自blog.csdn.net/qq_45481971/article/details/129594158
今日推荐