如何使用 Immer 解决此错误 - “未捕获（承诺中）类型错误：无法在已撤销的代理上执行 'get'”答案

【问题标题】：How can I solve this error with Immer - "Uncaught (in promise) TypeError: Cannot perform 'get' on a proxy that has been revoked"如何使用 Immer 解决此错误 - “未捕获（承诺中）类型错误：无法在已撤销的代理上执行 'get'”
【发布时间】：2019-11-08 00:57:34
【问题描述】：

我喜欢将数组从服务器推送到初始状态的空数组中。据我所知，使用 immer 来保存数组，

  draft.arr.push({a:1, b:2})

但是，我不知道为什么我收到了这条消息

Uncaught (in promise) TypeError: Cannot perform 'get' on a proxy that has been revoke

我尝试使用concat 和push。但我无法得到我想要的。

const initialState : WorkerState = {
  workersList : []
}

const workers = handleActions<WorkerState, any>(
  {
    [GET_WORKERS_LIST]: (state, action: GetWorkersList) => {
      return produce(state, draft => {
        action.payload.then((res: WorkerInfo[]) => {
           res.map(data => {
            return draft.workerList.push({
              id: data.id,
              name: data.name,
              email: data.email,
              user_type: data.user_type,
              address: data.address,
              salary: data.salary,
              profile_image: data.profile_image,
              birth: data.birth,
              join_date: data.join_date,
              leave_date: data.leave_date,
              working_year: data.working_year,
              grade: data.grade,
              half_vacation: data.half_vacation,
              total_year_vacation: data.total_year_vacation,
              year_vacation: data.year_vacation,
            });
          });
        });
      });
    },initialState,
);

【问题讨论】：

标签： reactjs typescript redux immer.js

【解决方案1】：

我假设你使用redux-actions包的handleAction(s)函数。

它将创建多个 redux reducer。 Reducers 只是纯函数，它们接受前一个状态和一个动作，然后返回下一个状态。

您不应在其中包含副作用操作，例如 promise。您应该使用来自 API 的数据作为其有效负载来分派一个操作。那你就可以直接修改immer草稿状态了，直接把workersList替换成map+push一项一项就好了。

例如

import produce from 'immer';
import { combineReducers, createStore } from 'redux';
import { createActions, handleActions } from 'redux-actions';

const api = {
  async getWorkersList() {
    return [
      { id: 1, name: 'a' },
      { id: 2, name: 'b' },
    ];
  },
};
const GET_WORKERS_LIST = 'GET_WORKERS_LIST';

interface WorkerState {
  workersList: any[];
}
interface GetWorkersList {
  payload: any[];
}
interface WorkerInfo {}

const initialState: WorkerState = {
  workersList: [],
};

const workers = handleActions<WorkerState, any>(
  {
    [GET_WORKERS_LIST]: (state, action: GetWorkersList) => {
      return produce(state, (draft) => {
        draft.workersList = action.payload;
      });
    },
  },
  initialState,
);

const { getWorkersList } = createActions({
  GET_WORKERS_LIST: (payload) => payload,
});

const rootReducer = combineReducers({ workers });
const store = createStore(rootReducer);
store.subscribe(() => {
  console.log(store.getState().workers);
});

api.getWorkersList().then((res) => {
  store.dispatch(getWorkersList(res));
});

输出：

{ workersList: [ { id: 1, name: 'a' }, { id: 2, name: 'b' } ] }

【讨论】：