Redux

Question

我正在使用 react+redux 构建一个相对较大的网络应用程序，处理我的商店真的很混乱。

我在更新商店中的嵌套属性时遇到了一个问题，并找到了 redux 文档的 Immutable Update Patterns 部分，这表明我应该这样做：

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 文档推荐的方式的性能（尽管在我的情况下几乎每秒都会发送一个动作感觉需要做很多工作）并且我认为这是最好的方式。

我的问题是关于我的代码的可读性。有什么方法可以让我的减速器更干净吗？

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

这个库是否在其幕后使用展开运算符？

是否有任何其他方法，比如向某些输入添加一些索引，并能够在输入值更改时使用该索引更新商店中的相关值？

Answer 1

我实际上在 redux 文档中找到了几十个实用程序！ Immutable Update Utilities

我认为 dot-prop-immutable 非常简单明了。

Redux - 使用扩展运算符更新深度嵌套的商店道具

Redux - Updating deeply nested store props using spread operator

javascript

react-redux

react-redux-form