重构 Reducer：基于函数分解（Functional Decomposition）和 Reducer 组合

看看不同类型的 sub-reducer 和如何把他们组合在一起的例子是很有用的。现在让我们看看如何将一个大型的单个 reducer 重构为多个比较小的函数的组合。

注意：为了说明重构的概念和过程而不是为了编写简洁的代码，这个例子是特意以冗长的风格编写的

初遇 Reducer

让我们看看初始 reducer 长什么样：

  1. const initialState = {
  2.   visibilityFilter: 'SHOW_ALL',
  3.   todos: []
  4. }
  6. function appReducer(state = initialState, action) {
  7.   switch (action.type) {
  8.     case 'SET_VISIBILITY_FILTER': {
  9.       return Object.assign({}, state, {
  10.         visibilityFilter: action.filter
  11.       })
  12.     }
  13.     case 'ADD_TODO': {
  14.       return Object.assign({}, state, {
  15.         todos: state.todos.concat({
  16.           id: action.id,
  17.           text: action.text,
  18.           completed: false
  19.         })
  20.       })
  21.     }
  22.     case 'TOGGLE_TODO': {
  23.       return Object.assign({}, state, {
  24.         todos: state.todos.map(todo => {
  25.           if (todo.id !== action.id) {
  26.             return todo
  27.           }
  29.           return Object.assign({}, todo, {
  30.             completed: !todo.completed
  31.           })
  32.         })
  33.       })
  34.     }
  35.     case 'EDIT_TODO': {
  36.       return Object.assign({}, state, {
  37.         todos: state.todos.map(todo => {
  38.           if (todo.id !== action.id) {
  39.             return todo
  40.           }
  42.           return Object.assign({}, todo, {
  43.             text: action.text
  44.           })
  45.         })
  46.       })
  47.     }
  48.     default:
  49.       return state
  50.   }
  51. }

这个函数非常短，但已经开始变得比较复杂。我们在处理两个不同的区域（filtering 和 todo 列表），嵌套使得更新逻辑难以阅读，并且会让我们不清楚到底是什么跟什么。

提取工具函数（Extracting Utility Functions）

第一步是写一个返回更新了相应区域的新对象。这儿还有一个重复的逻辑是在更新数组中的特定项目，我们也可以将他提成一个函数。

  1. function updateObject(oldObject, newValues) {
  2.   // 用空对象作为第一个参数传递给 Object.assign，以确保是复制数据，而不是去改变原来的数据
  3.   return Object.assign({}, oldObject, newValues)
  4. }
  6. function updateItemInArray(array, itemId, updateItemCallback) {
  7.   const updatedItems = array.map(item => {
  8.     if (item.id !== itemId) {
  9.       // 因为我们只想更新一个项目，所以保留所有的其他项目
  10.       return item
  11.     }
  13.     // 使用提供的回调来创建新的项目
  14.     const updatedItem = updateItemCallback(item)
  15.     return updatedItem
  16.   })
  18.   return updatedItems
  19. }
  21. function appReducer(state = initialState, action) {
  22.   switch (action.type) {
  23.     case 'SET_VISIBILITY_FILTER': {
  24.       return updateObject(state, { visibilityFilter: action.filter })
  25.     }
  26.     case 'ADD_TODO': {
  27.       const newTodos = state.todos.concat({
  28.         id: action.id,
  29.         text: action.text,
  30.         completed: false
  31.       })
  33.       return updateObject(state, { todos: newTodos })
  34.     }
  35.     case 'TOGGLE_TODO': {
  36.       const newTodos = updateItemInArray(state.todos, action.id, todo => {
  37.         return updateObject(todo, { completed: !todo.completed })
  38.       })
  40.       return updateObject(state, { todos: newTodos })
  41.     }
  42.     case 'EDIT_TODO': {
  43.       const newTodos = updateItemInArray(state.todos, action.id, todo => {
  44.         return updateObject(todo, { text: action.text })
  45.       })
  47.       return updateObject(state, { todos: newTodos })
  48.     }
  49.     default:
  50.       return state
  51.   }
  52. }

这样就减少了重复，使得代码的可读性更高。

提取 case reducer

接下来，把特殊逻辑封装成对应的函数：

  1. // 省略了内容
  2. function updateObject(oldObject, newValues) {}
  3. function updateItemInArray(array, itemId, updateItemCallback) {}
  5. function setVisibilityFilter(state, action) {
  6.   return updateObject(state, { visibilityFilter: action.filter })
  7. }
  9. function addTodo(state, action) {
  10.   const newTodos = state.todos.concat({
  11.     id: action.id,
  12.     text: action.text,
  13.     completed: false
  14.   })
  16.   return updateObject(state, { todos: newTodos })
  17. }
  19. function toggleTodo(state, action) {
  20.   const newTodos = updateItemInArray(state.todos, action.id, todo => {
  21.     return updateObject(todo, { completed: !todo.completed })
  22.   })
  24.   return updateObject(state, { todos: newTodos })
  25. }
  27. function editTodo(state, action) {
  28.   const newTodos = updateItemInArray(state.todos, action.id, todo => {
  29.     return updateObject(todo, { text: action.text })
  30.   })
  32.   return updateObject(state, { todos: newTodos })
  33. }
  35. function appReducer(state = initialState, action) {
  36.   switch (action.type) {
  37.     case 'SET_VISIBILITY_FILTER':
  38.       return setVisibilityFilter(state, action)
  39.     case 'ADD_TODO':
  40.       return addTodo(state, action)
  41.     case 'TOGGLE_TODO':
  42.       return toggleTodo(state, action)
  43.     case 'EDIT_TODO':
  44.       return editTodo(state, action)
  45.     default:
  46.       return state
  47.   }
  48. }

现在很清楚每个 case 发生了什么。我们也可以看到一些模式的雏形。

按域拆分数据（Separating Data Handling by Domain）

目前的 Reducer 仍然需要关心程序中所有不同的 case。下面尝试把 filter 逻辑和 todo 逻辑分离：

  1. // 省略了内容
  2. function updateObject(oldObject, newValues) {}
  3. function updateItemInArray(array, itemId, updateItemCallback) {}
  5. function setVisibilityFilter(visibilityState, action) {
  6.   // 从技术上将，我们甚至不关心之前的状态
  7.   return action.filter
  8. }
  10. function visibilityReducer(visibilityState = 'SHOW_ALL', action) {
  11.   switch (action.type) {
  12.     case 'SET_VISIBILITY_FILTER':
  13.       return setVisibilityFilter(visibilityState, action)
  14.     default:
  15.       return visibilityState
  16.   }
  17. }
  19. function addTodo(todosState, action) {
  20.   const newTodos = todosState.concat({
  21.     id: action.id,
  22.     text: action.text,
  23.     completed: false
  24.   })
  26.   return newTodos
  27. }
  29. function toggleTodo(todosState, action) {
  30.   const newTodos = updateItemInArray(todosState, action.id, todo => {
  31.     return updateObject(todo, { completed: !todo.completed })
  32.   })
  34.   return newTodos
  35. }
  37. function editTodo(todosState, action) {
  38.   const newTodos = updateItemInArray(todosState, action.id, todo => {
  39.     return updateObject(todo, { text: action.text })
  40.   })
  42.   return newTodos
  43. }
  45. function todosReducer(todosState = [], action) {
  46.   switch (action.type) {
  47.     case 'ADD_TODO':
  48.       return addTodo(todosState, action)
  49.     case 'TOGGLE_TODO':
  50.       return toggleTodo(todosState, action)
  51.     case 'EDIT_TODO':
  52.       return editTodo(todosState, action)
  53.     default:
  54.       return todosState
  55.   }
  56. }
  58. function appReducer(state = initialState, action) {
  59.   return {
  60.     todos: todosReducer(state.todos, action),
  61.     visibilityFilter: visibilityReducer(state.visibilityFilter, action)
  62.   }
  63. }

我们注意到，两个 reducer 分别关心 state 中的不同的部分。都只需要把自身关心的数据作为参数，不再需要返回复杂的嵌套型 state 对象了，代码变得更简单。

减少样板代码

马上就大功告成了。因为很多人不喜欢使用 switch 这种语法结构，创建一个 action 到 case 查找表示非常通用的做法。可以使用 缩减样板代码 中提到的 createReducer 函数减少样板代码。

  1. // 省略了内容
  2. function updateObject(oldObject, newValues) {}
  3. function updateItemInArray(array, itemId, updateItemCallback) {}
  5. function createReducer(initialState, handlers) {
  6.   return function reducer(state = initialState, action) {
  7.     if (handlers.hasOwnProperty(action.type)) {
  8.       return handlers[action.type](state, action)
  9.     } else {
  10.       return state
  11.     }
  12.   }
  13. }
  15. // 省略了内容
  16. function setVisibilityFilter(visibilityState, action) {}
  18. const visibilityReducer = createReducer('SHOW_ALL', {
  19.   SET_VISIBILITY_FILTER: setVisibilityFilter
  20. })
  22. // 省略了内容
  23. function addTodo(todosState, action) {}
  24. function toggleTodo(todosState, action) {}
  25. function editTodo(todosState, action) {}
  27. const todosReducer = createReducer([], {
  28.   ADD_TODO: addTodo,
  29.   TOGGLE_TODO: toggleTodo,
  30.   EDIT_TODO: editTodo
  31. })
  33. function appReducer(state = initialState, action) {
  34.   return {
  35.     todos: todosReducer(state.todos, action),
  36.     visibilityFilter: visibilityReducer(state.visibilityFilter, action)
  37.   }
  38. }

通过切片组合 Reducer（Combining Reducers by Slice）

最后一步了，使用 Redux 中 combineReducers 这个工具函数去把管理每个 state 切片的逻辑组合起来，形成顶层的 reducer。最终变成这样：

  1. // 可重用的工具函数
  3. function updateObject(oldObject, newValues) {
  4.   // 将空对象作为第一个参数传递给 Object.assign，以确保只是复制数据，而不是去改变数据
  5.   return Object.assign({}, oldObject, newValues)
  6. }
  8. function updateItemInArray(array, itemId, updateItemCallback) {
  9.   const updatedItems = array.map(item => {
  10.     if (item.id !== itemId) {
  11.       // 因为我们只想更新一个项目，所以保留所有的其他项目
  12.       return item
  13.     }
  15.     // 使用提供的回调来创建新的项目
  16.     const updatedItem = updateItemCallback(item)
  17.     return updatedItem
  18.   })
  20.   return updatedItems
  21. }
  23. function createReducer(initialState, handlers) {
  24.   return function reducer(state = initialState, action) {
  25.     if (handlers.hasOwnProperty(action.type)) {
  26.       return handlers[action.type](state, action)
  27.     } else {
  28.       return state
  29.     }
  30.   }
  31. }
  33. // 处理特殊 case 的 Handler ("case reducer")
  34. function setVisibilityFilter(visibilityState, action) {
  35.   // 从技术上将，我们甚至不关心之前的状态
  36.   return action.filter
  37. }
  39. // 处理整个 state 切片的 Handler ("slice reducer")
  40. const visibilityReducer = createReducer('SHOW_ALL', {
  41.   SET_VISIBILITY_FILTER: setVisibilityFilter
  42. })
  44. // Case reducer
  45. function addTodo(todosState, action) {
  46.   const newTodos = todosState.concat({
  47.     id: action.id,
  48.     text: action.text,
  49.     completed: false
  50.   })
  52.   return newTodos
  53. }
  55. // Case reducer
  56. function toggleTodo(todosState, action) {
  57.   const newTodos = updateItemInArray(todosState, action.id, todo => {
  58.     return updateObject(todo, { completed: !todo.completed })
  59.   })
  61.   return newTodos
  62. }
  64. // Case reducer
  65. function editTodo(todosState, action) {
  66.   const newTodos = updateItemInArray(todosState, action.id, todo => {
  67.     return updateObject(todo, { text: action.text })
  68.   })
  70.   return newTodos
  71. }
  73. // Slice reducer
  74. const todosReducer = createReducer([], {
  75.   ADD_TODO: addTodo,
  76.   TOGGLE_TODO: toggleTodo,
  77.   EDIT_TODO: editTodo
  78. })
  80. // 顶层 reducer
  81. const appReducer = combineReducers({
  82.   visibilityFilter: visibilityReducer,
  83.   todos: todosReducer
  84. })

现在我们有了分离集中 reducer 的例子：像 updateObject 和 createReducer 一样的工具函数，像 setVisibilityFilter 和 addTodo 一样的处理器（Handler），像 visibilityReducer 和 todosReducer 一样的处理单个切片数据的 Handler。appReducer 可以被当作是顶层 reducer。

这个例子中最后的结果看上去比原始的版本更长，这主要是因为工具函数的提取，注释的添加和一些为了清楚起见的故意冗长（比如单独的 return 语句）。单独的看每个功能，他们承担的责任更小，意图也更加清楚。在真正的应用中，这些函数将会分到单独的文件中，比如：reducerUtilities.js，visibilityReducer.js，todosReudcer.js 和 rootReducer.js。