Question

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

我在更新商店中的嵌套属性时遇到了问题，并找到了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 docs推荐的方式的表现（尽管感觉像一个动作的很多工作，在我的情况下几乎每秒都被调度），我认为这是最好的方法。

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

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

这个库是否通过扩展操作员来实现？

还有其他方法可以为某些输入添加一些索引，并且在输入值更改时能够使用该索引更新商店中的相关值吗？

Answer 1

我实际上在redux docs中找到了几十个这样的工具！ Immutable Update Utilities

我认为dot-prop-immutable非常简单直接。

Redux - 使用spread运算符更新深层嵌套的商店道具

1 个答案: