如何使用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
  };
}

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

  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仍然有效。

Answer 2

使用ES6，您可以这样做：

export const state = produce((draft, action) => {
  switch (type) {
    case UPDATE_SEARCH_PAGE:
      return {...draft, ...action.payload}
  }
}, initialState)

在这种情况下，它的工作方式与没有Immer一样。所有属性都将合并(浅合并)到状态。如果需要替换状态，只需返回action.payload

Answer 3

Immer给出了一个可以编辑的草稿状态。在幕后，它使用ES6代理来发现您更改的内容，并以不可变的方式将您的编辑应用到原始状态。

基本上，您可以做与现在完全相同的事情，但是使用Immer：

import produce from 'immer'

const newState = produce(this.state, draft => Object.assign({}, draft, payload))

相反，如果您知道哪些属性发生了更改，则可以执行以下操作：

const newState = produce(this.state, draft => {
  draft.propertyOne = 'newValue'
  draft.propertyTwo = 42
})