用于依赖状态切片的Redux减速器/状态设计

Question

我喜欢在终极版减速器组成的概念,但遇到了这样一个场景,我就喜欢拆减速,但后来孩子们减速将依靠从其他国家的切片,使他们的变化.

例如

在我的州,我需要跟踪以下内容:

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

最初,我有一个更大的减速器,它封装了所有这些方面:

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;
  .
  .
  .
}

我想把这个减速器分开,因为我觉得等级和训练水平可以保持在单独的减速器中.

但是,如果拆分缩减器,则仍需要处理状态块之间的依赖关系,例如:

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

如果我将训练级别比特分成另一个减速器,那么他们将无法知道这种" 等级检查" 的结果,因为他们在状态切片中"看到"的是训练级别的部分.

在这种情况下,鉴于它们之间的依赖关系,上面的reducer真的是我能得到的状态的"最小切片"吗？或者有没有更好的方法来拆分它,我可能没有看到？

Answer 1

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

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