• 使用函数分解（Functional Decomposition）和 Reducer 组合（Reducer Composition）重构 Reducer
    • 初遇 Reducer
    • 提取工具函数（Extracting Utility Functions）
    • 提取 case reducer
    • 按域拆分数据（Separating Data Handling by Domain）
    • 减少样板代码
    • 通过切片组合 Reducer（Combining Reducers by Slice）

    使用函数分解（Functional Decomposition）和 Reducer 组合（Reducer Composition）重构 Reducer

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

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

    初遇 Reducer

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

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

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

    提取 case reducer

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

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

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

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

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

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

    我们注意到，两个 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. }
    16. // 省略了内容
    17. function setVisibilityFilter(visibilityState, action) {}
    19. const visibilityReducer = createReducer('SHOW_ALL', {
    20.     'SET_VISIBILITY_FILTER' : setVisibilityFilter
    21. });
    23. // 省略了内容
    24. function addTodo(todosState, action) {}
    25. function toggleTodo(todosState, action) {}
    26. function editTodo(todosState, action) {}
    28. const todosReducer = createReducer([], {
    29.     'ADD_TODO' : addTodo,
    30.     'TOGGLE_TODO' : toggleTodo,
    31.     'EDIT_TODO' : editTodo
    32. });
    34. function appReducer(state = initialState, action) {
    35.     return {
    36.         todos : todosReducer(state.todos, action),
    37.         visibilityFilter : visibilityReducer(state.visibilityFilter, action)
    38.     };
    39. }

    通过切片组合 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. }
    34. // 处理特殊 case 的 Handler ("case reducer")
    35. function setVisibilityFilter(visibilityState, action) {
    36.     // 从技术上将，我们甚至不关心之前的状态
    37.     return action.filter;
    38. }
    40. // 处理整个 state 切片的 Handler ("slice reducer")
    41. const visibilityReducer = createReducer('SHOW_ALL', {
    42.     'SET_VISIBILITY_FILTER' : setVisibilityFilter
    43. });
    45. // Case reducer
    46. function addTodo(todosState, action) {
    47.     const newTodos = todosState.concat({
    48.         id: action.id,
    49.         text: action.text,
    50.         completed: false
    51.     });
    53.     return newTodos;
    54. }
    56. // Case reducer
    57. function toggleTodo(todosState, action) {
    58.     const newTodos = updateItemInArray(todosState, action.id, todo => {
    59.         return updateObject(todo, {completed : !todo.completed});
    60.     });
    62.     return newTodos;
    63. }
    65. // Case reducer
    66. function editTodo(todosState, action) {
    67.     const newTodos = updateItemInArray(todosState, action.id, todo => {
    68.         return updateObject(todo, {text : action.text});
    69.     });
    71.     return newTodos;
    72. }
    74. // Slice reducer
    75. const todosReducer = createReducer([], {
    76.     'ADD_TODO' : addTodo,
    77.     'TOGGLE_TODO' : toggleTodo,
    78.     'EDIT_TODO' : editTodo
    79. });
    81. // 顶层 reducer
    82. const appReducer = combineReducers({
    83.     visibilityFilter : visibilityReducer,
    84.     todos : todosReducer
    85. });

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

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