如何使用 immer.js 更新多个状态属性

Question

我想知道是否可以immer.js在一次“调用”中更新多个状态属性。

说我有state：

export const initialState = {
  isUserLogged: false,
  menuIsClosed: false,
  mobileMenuIsClosed: true,
  dataArray: ["dog","cat"],
};

并且action creator：

export function updateSearchPage(data) {
  return {
    type: UPDATE_SEARCH_PAGE,
    payload: data
  };
}

然后我action creator在 React 组件中使用它，如下所示：

  this.props.updateSearchPage({
    isUserLogged: true,
    menuIsClosed: true,
    dataArray: ["dog","cat","owl"]
  })

这个想法是我想同时更新状态的几个属性。但我不知道它是哪些属性提前。我知道如何用一个简单的减速器来做到这一点：

case UPDATE_SEARCH_PAGE:
  return Object.assign({}, state, action.payload)

但是how to update several properties of state with immer at the same time？当状态属性（应该更新哪个）事先未知时。

Answer 1

你可以action.payload像下面这样循环：

const yourReducer = (state, action) =>
  produce(state, draft => {
    switch (action.type) {
      case UPDATE_SEARCH_PAGE:
        Object.entries(action.payload).forEach(([k, v]) => {
          draft[k] = v;
        })
        break;
    // ... other
    }
  }

另外：请记住，在最新版本的 immer 上返回一个对象是完全合法的，因此在调用中这样做return Object.assign({}, state, action.payload)仍然有效produce。