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

Question

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

假设我有状态:

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

和 Action 创建者:

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

然后我在 React 组件中使用该 action Creator，如下所示:

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

这个想法是我想同时更新状态的多个属性。但我事先并不知道它是哪些属性。我知道如何使用简单的 reducer 来做到这一点:

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

但是如何使用immer同时更新状态的多个属性？当状态属性(应该更新哪一个)事先未知时。

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) 在 中仍然有效>产生调用。