Reactjs 更新嵌套的react redux状态

初始化后，我使用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',
      }
    }

使用

选项调用update函数：{selector:'#container'}

。 设置应更改为：

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

---

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

draft.settings={
…draft.settings，//扩展现有值
…action.payload.settings，//覆盖action中的某些值
选项：{
…draft.settings.options，//扩展现有值
…action.payload.settings.options//覆盖action中的某些值
},
风格：{
…草稿样式，
…action.payload.styles，
主容器：{
…draft.styles.mainContainer，
…action.payload.mainContainer
}
}
}

您可以做一些事情来简化此过程：

1） 稍微展平您的状态结构，这样就不会有太多嵌套对象。这将使更新更容易，并且当您从数据中取出结构（即选择器）时，您始终可以重新构建结构。类似normalizer的功能可以帮助您：

2） 再细分几个动作类型，这样就不会在单个

update

动作中进行每次更新。可能

更新主容器
等

 3）考虑使用类似Ramda的<代码>合并> /COD>函数来为您这样做：
此答案中的链接：


拉姆达合并-
正常化因子-