更新嵌套的 react redux 状态答案

【问题标题】：Update nested react redux state更新嵌套的 react redux 状态
【发布时间】：2019-03-16 13:47:24
【问题描述】：

我使用 react redux（带有 immer）在初始化后存储我的应用程序的选项和样式。如何更改更新功能以更新应用的特定样式/选项，而不更改其他选项/样式？

// reducer.js

export const common = produce((draft, action) => {
  if (!draft) {
    return {
      settings: {},
    };
  }
  switch (action.type) {
    case STORE_WIDGET_SETTINGS:
        draft.settings = action.payload.settings;
        return;

    case UPDATE_WIDGET_SETTINGS:
      draft.settings = action.payload.settings;
      return;

    default:
      return;
  }
});

更新函数应该只更新选项/样式状态而不改变当前选项/样式。

示例：更新前的设置：

    options: {
      selector: '#root'
    },
    styles: {
      mainContainer: {
        backgroundColor: 'black',
        color: 'white',
      }
    }

用option:{selector: '#container'} 调用更新函数。设置应更改为：

options: {
  selector: '#container'
},
styles: {
  mainContainer: {
    backgroundColor: 'black',
    color: 'white',
  }
}

【问题讨论】：

标签： reactjs react-redux immer.js

【解决方案1】：

要手动执行此操作，您需要在现有值的基础上更新状态的每个分支。您可以通过传播现有值并包含新值来做到这一点。

draft.settings = {
  ...draft.settings, // Spread existing values
  ...action.payload.settings, // Override some values from action
  options: {
   ...draft.settings.options, // Spread existing values
   ...action.payload.settings.options // Override some values from action
  },
  styles: {
   ...draft.styles,
   ...action.payload.styles,
   mainContainer: {
   ...draft.styles.mainContainer,
   ...action.payload.mainContainer
   }
  }
}

你可以做一些事情来简化这个：

1) 稍微扁平化你的状态结构，这样就没有那么多嵌套对象。这将使更新更容易，并且当您将它们从数据中提取出来时（即选择器），您始终可以重新构建结构。像 Normalizr 这样的东西可以帮助你：https://github.com/paularmstrong/normalizr

2) 拆分出更多的操作类型，以便不是每次更新都发生在单个 UPDATE 操作中。也许是UPDATE_MAIN_CONTAINER 等。

3) 考虑使用 Ramda 的 merge 函数为您执行此操作：https://ramdajs.com/docs/#merge

此答案中的链接：

Ramda 合并 - https://ramdajs.com/docs/#merge
Normalizr - https://github.com/paularmstrong/normalizr

【讨论】：