在 redux 中将一个更大的 reducer 的一部分委托给它自己的 reducer答案

【问题标题】：Delegate one slice of a larger reducer to its own reducer in redux在 redux 中将一个更大的 reducer 的一部分委托给它自己的 reducer
【发布时间】：2021-05-02 22:37:06
【问题描述】：

我有一个更大的减速器，我想向它添加另一个切片，这本身会相当复杂。例如，这是一个已经很复杂的大型 reducer：

const initialState = {
  bigchunk1: { ...someObject },
  bigchunk2: true,
  bigchunk3: [...somevalues],
  bigchunk4: 'etc'
}

function mainReducer(state = initialState, action){
  switch(action.type){
    case Actions.CASE1:
      return {
        ...state,
        bigchunk1: {
           ...state.bigchunk1;
           somevalue: action.payload.this_is_already_enough_nesting
        }
      }
    case Actions.CASE2:
      return {
        ...state,
        bigchunk4: 'this goes on for awhile'
      }
    // lots more cases
    default:
      return state
  }
}

我想为 state 添加一个新切片，所以整个 initialState 最终会在 store 中看起来像这样：

const initialState = {
  bigchunk1: { ...someObject },
  bigchunk2: true,
  bigchunk3: [...somevalues],
  bigchunk4: 'etc',
  newslice: { ...someComplicatedThing }
}

但我不想将所有新案例都写入我原来的 reducer（以及非常混乱的嵌套和扩展运算符级别），我想编写一个新的 reducer 来处理与 newslice 相关的案例：

const initialState = { ...someComplicatedThing }

function newSliceReducer(state = initialState, action){
  switch(action.type}{
    // cases here
  }
}

我知道combineReducers，但我很难考虑如何在这种情况下应用它。 combineReducers 可以使用这两个 reducer 并将它们作为兄弟姐妹放置，但是我怎样才能将它们组合起来以使 newSliceReducer 及其关联状态成为 mainReducer 的子 newslice 下的子节点？我觉得这应该很简单，但它现在正在逃避我。我一直在阅读 redux 文档，但我没有清楚地看到答案。我不想使用redux-toolkit 或任何外部库。

【问题讨论】：

您能否澄清一下为什么使用combineReducers 并将mainReducer 作为newslice 的兄弟姐妹对您不起作用？他们是否会有交叉依赖关系？
我正在尝试向一个已经很大的应用程序添加一个状态片段，但我无法重写整个应用程序。我不希望newslice 成为mainReducer 的兄弟，我希望它成为mainReducer 的孩子。

标签： javascript reactjs redux

【解决方案1】：

在默认的switch情况下，你可以这样做

      default: 
          let newSlice = newSliceReducer(state.newslice, action)
          if (newSlice !== state.newslice) {
              return {...state,newslice:newSlice}
          }
          return state

您可以将 Redux 视为一种编码模式，而不是库。

reducer 的工作是更新状态并在更改时返回新对象，否则返回旧对象。如果返回一个新对象，react 会假设发生了一些变化并触发了刷新。

现在，您拥有的是一个“newSliceReducer”，它的状态只是主减速器的一部分。因此，我遵循上述规则并调用新的减速器，其状态为原始状态的较小部分，并检查结果是否发生变化。如果是，我创建了一个具有更新状态的新对象，否则返回旧状态。

检查 newSlice 是否真的改变很重要。

【讨论】：