Redux reducer / state-shape design fordependent state-slices

Posted 2023-03-16

【中文标题】Redux reducer / state-shape design fordependent state-slices

【英文标题】：Redux reducer / state-shape design for dependent state-slices

【发布时间】：2016-01-29 05:39:38

【问题描述】：

我喜欢 Redux 中 reducer 组合的概念，但遇到了这样一种情况：我希望 拆分一个 reducer，但子 reducer 会依赖其他的 state-slice做出改变。

举例

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

一系列可能的

排名

（即[ 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

中），则不应更新训练级别位。

如果我将训练级别位拆分到另一个减速器中，那么他们将无法知道此“rank检查”的结果，因为他们将在他们的状态下“看到”所有内容-slice 是训练级别的片段。

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

【参考方案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