在reducers中编写嵌套的Switch Case是一个好习惯

Question

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

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

在我的减速机中，除了其他功能之外，我正在编写一个减速机：

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中间件。我的问题只是关于嵌套的switchcase。

Answer 1

嵌套减速器：

嵌套减速器是一种不好的做法。您将希望将Reducer（和状态切片）尽可能保持平坦。因此，拆分将在更新您的州的切片方面产生更好的开发经验。检查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
    }
  }
}

使用这种方法的主要好处：

1. 简单，无论是否使用取决于您。
2. 不要担心变量名重复
3. 可以使用破坏行为和状态
4. 可以使用ES6箭头函数语法
5. 当有很多情况时，hashTable比switch更快
6. 不需要恼人的休息和默认

参考文献：

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