在 react 的 usereducer 钩子中嵌套 switch 语句 ls 是不好的做法吗？什么是首选的替代方法？

如何解决在 react 的 usereducer 钩子中嵌套 switch 语句 ls 是不好的做法吗？什么是首选的替代方法？

我最近一直在开发一个 React 应用程序，我正在使用一个很大的 usereducer 函数来保存全局状态。

我一直在尝试使用一种状态机模式，其中我将字符串常量作为当前状态的名称。举个例子：

// First declaring an object which represents the possible states the app can be in:

const possibleStates = {
  IDLE:"IDLE",ITEM_SELECTED:"ITEM_SELECTED",}

// Here's what the reducer function might look like:

function stateReducer(state,action){

 switch (state.stateName){
   case possibleStates.IDLE:
   // Logic
  Return newState;
  
  case possibleStates.ITEM_SELECTED: 
  // Logic
  Return newState;

}

这一切都很好，但是在每种状态情况下，我都需要打开操作类型以根据操作决定要做什么：

function stateReducer(state,action) {

  switch (state.stateName) {
    case possibleStates.IDLE:

      switch (action.type) {
        case "ITEM_CLICKED":
          //logic . . .
          return newState;

        default:
          return state;
      }

    case possibleStates.ITEM_SELECTED:

      switch (action.type) {
        case "DELETE_ITEM":
          //logic . . .
          return newState;

        default:
          return state;
      }
    default:
      return state;
  }
}

然后很多时候我发现自己需要在 action switch 语句中使用另一个 switch 语句，例如，如果我们选择了一个项目，我们需要针对我们选择的项目类型使用不同的逻辑。这让我们在 switch 语句中深入了 3 层。

现在，我喜欢在这一大功能中包含应用程序的所有逻辑。这意味着我可以很容易地通过记录状态来找到错误所在，然后在错误发生之前控制-F 到以前的状态名称。然后我知道我正在查看导致错误的逻辑。感觉很好的是，有一大块逻辑与 React 组件明显分离，我可以把它们变得非常愚蠢。这意味着它们可以纯粹代表应用的视图，而 reducer 可以纯粹代表逻辑。

但是这些深度嵌套的 switch 语句有明显的缺点：如果我忘记了 break 或 return 怎么办？然后我破坏了整个reducer，告诉我有多深以及在哪里添加新动作或可能的状态可能会令人困惑。我的减速器也开始变得很长 - 比如 500-600 行。

我可以为每个可能的状态编写一个不同的函数，然后对状态进行区分，然后将其扔给另一个函数：

  function stateReducer(state,action) {

  switch (state.stateName) {
    case possibleStates.IDLE:
      return idleReducer(state,action);

    case possibleStates.ITEM_SELECTED:
      return selectedReducer(state,action);

    default:
      return state;
  }
}

function idleReducer(state,action) {
  //logic . . .
  return newState;
}

function selectedReducer(state,action) {
  //logic . . .
  return newState;
}

在那之后，我可以进入另一层，将函数剥离到每个动作中。

您认为我应该咬紧牙关将我的减速器逻辑拉出到函数中，还是应该继续使用我的 500 行减速器和嵌套的 switch 语句。有没有更好的模式？