Question

我是react-redux应用程序的新手。我的动作包括一个这样的小层次结构：

{
    type:'FITLER',
    filterType: 'FILTER_COUNTRY',
    payload: countries
}

在我的reducer中，除其他功能外，我正在编写其中一个reducer为：

function FilterValue(state, action){
    switch(action.type){
        CASE FILTER:break;
        CASE FILTER_CLEAR_ALL:break;
        default:
    }
}

我想知道是否应该为我的典型情况制作嵌套的switch语句：

function FilterValue(state, action){
    switch(action.type){
        CASE FILTER:
             switch(action.filterType){
                  CASE FILTER_COUNTRY:break;
                  CASE FILTER_REGION: break;
                  default:
             }
        CASE FILTER_CLEAR_ALL:
        default:
    }
}

我研究了这些文章和SO问题，但没有人回答有关此编程实践的问题。

Object Literals vs Switch Case

Switch-Case - Object literals

Reduce Reducers vs Combine Reducers

编辑：我已经在使用reduceReducers和Thunk中间件。我的问题只是关于嵌套开关柜。

Answer 1

嵌套减少器：

嵌套减少器是一种不良做法。您将需要使减速器（和状态切片）保持尽可能平坦。因此，就更新您的状态切片而言，分割将带来更好的开发体验。选中combineReducers()。

关于开关盒：

考虑从开关构造中重构减速器

export function todos(state = [], action) {
  switch (action.type) {
    case ActionTypes.ADD_TODO:
      const text = action.text.trim()
      return [...state, text]
    default:
      return state
  }
}

哈希表形成

export const todos = createReducer([], {
  [ActionTypes.ADD_TODO]: (state, action) => {
    const text = action.text.trim()
    return [...state, text]
  }
})

您可以编写以下助手来完成此任务：

function createReducer(initialState, handlers) {
  return function reducer(state = initialState, action) {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action)
    } else {
      return state
    }
  }
}

使用这种方法的主要优点：

简单，是否使用取决于您。
不用担心变量名重复
可以使用破坏动作和状态
可以使用ES6箭头函数语法
在很多情况下，hashTable比switch更快
不需要烦人的休息和默认设置

参考：

https://redux.js.org/recipes/reducing-boilerplate#generating-reducers https://github.com/reduxjs/redux/issues/883

在减速器中编写嵌套的Switch Case是一种好习惯

1 个答案:

嵌套减少器：

关于开关盒：