Ant Design Model 实时更新数据采坑日记

更新一条记录，不在重新刷新所有记录

• 1 尝试

 reducers: {
    save(state, action) {
      return {
        ...state,
        data: action.payload,
      };
    },
    edit(state, action) {
      console.log(state);
      console.log(action);
      let contact = action.payload.object;
      const listNew = [];
      for(let i=0;i<state.data.list.length;i++){
        if(state.data.list[i] && state.data.list[i].id === contact.id){
          let obj = state.data.list[i];
          obj.contact= contact.contact;
          obj.contactPhone =contact.contactPhone;
          obj.contactEmail =contact.contactEmail;
          listNew.push(obj);
        }else{
          listNew.push(state.data.list[i] );
        }
      }
      // return {
      //   state :{
      //     data :{
      //       list : listNew
      //     },
      //     pagination: state.data.pagination
      //   },
      //   data: action.payload
      // };
      // return {
      //   ...state,
      //   data: action.payload,
      // };
    },
  },

实时的显示效果出了，但是报错! 报错信息如下。
index.c7e627f5.js:1 uncaught at t Error: Given action “regulatedOrg/edit”, reducer “regulatedOrg” returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.
at http:/**/static/index.c7e627f5.js:1:783603

• 2 antd 是react + dva( redux 和 redux-saga) 所有需要有 es6的基础。一直搜问题和问问题，大家都说 reducer 就是改变 state 的状态（数据）的。但是一直在纠结怎么才能改变呢？我在卡到return 的

return {
        ...state ,//ES6不完全解构赋值
        //这里的data是替换数据结构（JSON）的的data
        data: {
          list : listNew,
          pagination: state.data.pagination
        }
      };

es6知识点详解：
ES6入门指南

看成功代码：

edit(state, action) {
      let contact = action.payload.object;
      const listNew = [];
      for(let i=0;i<state.data.list.length;i++){
        if(state.data.list[i] && state.data.list[i].id === contact.id){
          let obj = state.data.list[i];
          obj.contact= contact.contact;
          obj.contactPhone =contact.contactPhone;
          obj.contactEmail =contact.contactEmail;
          listNew.push(obj);
        }else{
          listNew.push(state.data.list[i] );
        }
      }
      return {
        ...state ,
        data: {
          list : listNew,
          pagination: state.data.pagination
        }
      };
    },

整个model 的代码，没耐心看到这里，估计还是没啥作用（smiling back）

import { queryRegulatedOrg, updateContact} from '../services/api';

export default {
  namespace: 'regulatedOrg',
  //这里是自定model的数据（JSON）格式的,不要忽略这里，在connect 后其他使用是，取数据就是按照这个取得。
  state: {
    data: {
      list: [],
      pagination: {},
    },
  },

  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(queryRegulatedOrg, payload);
      yield put({
        type: 'save',
        payload: response,
      });
    },
    *editContact({ payload, callback }, { call, put }) {
      const response = yield call(updateContact, payload);
      yield put({
        type: 'edit',
        payload: response,
      });
      if (callback) callback(response);
    }
  },

  reducers: {
    save(state, action) {
      return {
        ...state,
        data: action.payload,
      };
    },
    edit(state, action) {
      let contact = action.payload.object;
      const listNew = [];
      for(let i=0;i<state.data.list.length;i++){
        if(state.data.list[i] && state.data.list[i].id === contact.id){
          //修改的是list 的一条记录的部分信息，代码如下：
          //如果是整条记录，可以仅根据某唯一字段筛选，然后处理（替换或者删除）
          //没尝试过更新原有state.data.list(不一定这种写法，看你命名的数据格式)，有兴趣的同学可以尝试下。
          let obj = state.data.list[i];
          obj.contact= contact.contact;
          obj.contactPhone =contact.contactPhone;
          obj.contactEmail =contact.contactEmail;
          listNew.push(obj);
        }else{
          listNew.push(state.data.list[i] );
        }
      }
      return {
        ...state ,
        data: {
          list : listNew,
          pagination: state.data.pagination
        }
      };
    },
  },
};

相关链接：
redux学习笔记之combineReducers源码解析
Redux系列x：源码解析
Redux中文帮助文档