javascript - 用于依赖状态切片的 Redux reducer/state-shape 设计

Question

我喜欢 Redux 中的 reducer 组合的概念，但是遇到了这样一种情况，我喜欢将一个 reducer 分开，但是子 reducer 会依赖其他 reducer 的状态切片进行更改。

例如

在我的状态下，我需要跟踪以下内容:

• 可能的排名范围(即[ 2, 3, 4, 5, 6 ])
• 当前选择的排名(上述值之一)。
• 根据所选级别，一系列可能的培训级别。关系是范围从 [ 1 .. (selectedRank - 1) ]
• 当前选择的培训级别在上述范围内

最初，我有一个更大的 reducer，它封装了所有这些方面:

function rankAndTraining(state = {
  selectedRank            : 4,
  availableRanks          : [ 2, 3, 4, 5, 6 ],
  availableTrainingLevels : [ 1, 2, 3 ],
  selectedTrainingLevel   : 2,
}, action) {
  .
  .
  .
    case SELECT_RANK: 

      let newRank = action.rank;

      if(!availableRanks.contains(newRank)) {
        // If new rank is not an allowed value, do nothing.
        return state;
      }

      // Update selectedRank with newRank...

      // Update availableTrainingLevels array based on newRank...
      // [ 1 ... (selectedRank - 1) ]

      // Update selectedTrainingLevel if it is now out of range 
      // of availableTrainingLevel (i.e. set to highest value of new range)

      return state;
  .
  .
  .
}

我想把这个 reducer 分开，因为我觉得 ranks 和 training levels 可以在单独的 reducer 中维护。

但是，如果 reducer 被拆分，仍然需要处理状态部分之间的依赖关系，例如:

• 如果新排名无效(例如，它不在 availableRanks 中)，则不应更新训练级别位。

如果我将训练级别位拆分到另一个 reducer，那么他们将无法知道这个“rank 检查”的结果，因为他们会在他们的状态中“看到” -slice 是 training level block 。

在这种情况下，考虑到它们之间的依赖关系，上面的 reducer 真的是我可以获得的“最小切片”状态吗？还是有更好的拆分方法我可能看不到？

Answer 1

如果您使用 Redux thunk 中间件，您可以在实际分派(dispatch)操作之前先检查整个状态，而不是先分派(dispatch)您的操作，然后有条件地更新 reducer 中的状态:

function selectRankIfAllowed() {
  return (dispatch, getState) => {
    const { availableRanks } = getState(); 

    if(!availableRanks.contains(newRank)) {
      // If new rank is not an allowed value, do nothing.
      return state;
    }

    dispatch(selectRank());
  };
}

https://github.com/gaearon/redux-thunk