Javascript Redux-使用spread操作符更新深度嵌套的存储道具

我正在使用react+redux构建一个相对较大的web应用程序，处理我的商店变得非常混乱

我在更新存储区中的嵌套属性时遇到了一个问题，并找到了redux文档的一部分，该部分指示我应该执行以下操作：

function updateVeryNestedField(state, action) {
    return {
        ....state,
        first : {
            ...state.first,
            second : {
                ...state.first.second,
                [action.someId] : {
                    ...state.first.second[action.someId],
                    fourth : action.someValue
                }
            }
        }
    }
}

.
.
.
case "CHANGE_RANGED_INPUT": {
        return {
          ...state,
          searchPanel: {
            ...state.searchPanel,
            [action.payload.category]: {
              ...state.searchPanel[action.payload.category],
              rangedInputs: {
                ...state.searchPanel[action.payload.category].rangedInputs,
                [action.payload.type]: {
                  ...state.searchPanel[action.payload.category].rangedInputs[action.payload.type],
                  [action.payload.key]: {
                    ...state.searchPanel[action.payload.category].rangedInputs[action.payload.type][action.payload.key],
                    value: action.payload.value
                  }
                }
              },
            }
          },
        }
      }
.
.
.

我已经这样做了，结果我的减速机的一些部分是这样的：

function updateVeryNestedField(state, action) {
    return {
        ....state,
        first : {
            ...state.first,
            second : {
                ...state.first.second,
                [action.someId] : {
                    ...state.first.second[action.someId],
                    fourth : action.someValue
                }
            }
        }
    }
}

.
.
.
case "CHANGE_RANGED_INPUT": {
        return {
          ...state,
          searchPanel: {
            ...state.searchPanel,
            [action.payload.category]: {
              ...state.searchPanel[action.payload.category],
              rangedInputs: {
                ...state.searchPanel[action.payload.category].rangedInputs,
                [action.payload.type]: {
                  ...state.searchPanel[action.payload.category].rangedInputs[action.payload.type],
                  [action.payload.key]: {
                    ...state.searchPanel[action.payload.category].rangedInputs[action.payload.type][action.payload.key],
                    value: action.payload.value
                  }
                }
              },
            }
          },
        }
      }
.
.
.

我猜你同意我的代码变得比它应该的更混乱。我的问题不是关于redux docs推荐的方法的性能（尽管在我的情况下，几乎每秒钟都会发送一次动作，但感觉需要做很多工作），我认为这是最好的方法

我的问题是关于代码的可读性。有没有办法使我的减速器更干净

事实上，我正在使用我的一些巨型表单，不是因为我需要这个库提供的所有功能，而是只使用它的一个功能。这个库允许我创建一个包含大量嵌套内容的巨大表单模型，我所要做的就是将其模型路由添加到输入中，以使其预定义的onChange事件工作并更新相关值

该库是否在其引擎盖下使用spread operator

---

有没有其他方法，比如向某个输入添加一些索引，并在输入值更改时使用该索引更新存储中的相关值

实际上，我在redux文档中找到了几十个用于此的实用程序！

---

我认为这是非常简单和直接的。

听起来数据的形状太嵌套了，无法方便地操作。阅读redux文档中的“规范化状态形状”，看看是否可以将状态重新组织为更方便的形状。像@ DavID.Walsh所说，您可能需要考虑规范状态形状。另外，据说它有助于处理像这样的嵌套结构，尽管我自己还没有使用过它。我仍然认为，在尝试该库之前，您应该首先规范化您的状态。谢谢您的评论。我肯定会重新考虑我的店铺形状。我还注意到这样的句子：“很明显，每一层嵌套都会使它更难阅读，也会使它更容易出错。这就是为什么鼓励你保持状态平坦，并尽可能多地组成减缩器的原因之一。”我想我必须将我的一些减缩器拆分为多个减缩器。@DonovanM wow man。这个ImmutableJs太棒了。非常适合我的需要。谢谢，没问题。希望你能成功！谢谢分享这份名单。老实说，从去年开始我就没有看过它了，它肯定已经成长为一个不可改变的赢家：）aaaaa这就是为什么我不断用我找到的库更新这个列表：）很高兴它有帮助！