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中文幫助文檔