reactjs - Redux 是编写 reducer 的更好方法吗？

Question

我认为 Redux 具有很大的值(value)，但对我来说主要问题在于今天如何编写 reducer:

const addToDoReducer = (state, action) => {
    switch (action.type) {
        case ADD_TODO:
            return Object.assign({}, state, {
                todos: todos(state.todos, action)
            })
        case TOGGLE_TODO:
            return Object.assign({}, state, {
                todos: todos(state.todos, action)
            })
        default:
            return state
    }
}

• reducer 太通用了(你真的可以写出臃肿的 reducer 来处理各种不同的 Action ，很容易造成困惑)如果没有别的，这违反了单一责任原则
• switch 语句施加维护方面的影响，例如对一种情况的更改可能会破坏其他情况(例如，已经有效的代码)
• 总是重复“默认:返回状态”(失败 DRY)
• 所有的 reducer 总是被调用(调用函数什么都不做是错误的)

...最终 reducer 成为项目的弱点/束缚点

问:是否有更好的方法/选项来编写 reducer:

• 仅针对特定操作调用(基于操作对象的类型)
• 消除 switch 语句

更像是这样的:

const addToDoReducer = (state:toDoState, action:addAction) =>
{
    return { ...state, toDos: [...state.toDos, action.toDoObject] };
}

或者是否有图书馆已经这样做了？

Answer 1

请阅读"Reducing Boilerplate" docs page有关如何编写自己的 reducer 实用程序的示例，例如将操作类型的查找表获取到每种类型的特定 reducer 函数的函数。具体来说:

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

"Structuring Reducers" docs section还提供了有关组织 reducer 逻辑的方法的说明和想法。

更多信息，请参阅:

• Redux FAQ entry on "calling all reducers" and performance
• Redux FAQ entry on using switch statements
• 我的博文 The Tao of Redux, Part 2 - Practice and Philosophy ，专门讨论了the fact that whether you use switch statements and how you write your reducer logic is entirely up to you
• reducer utility libraries 的 Redux addons 目录列表

记住:Redux 调用您的 root reducer 函数，这是您编写的代码。该 reducer 如何工作是您的选择。如果您不喜欢 switch 语句，请不要编写它们。如果您发现代码重复，请编写工厂函数。