Refactoring Reducer Logic Using Functional Decomposition and Reducer Composition

    Initial Reducer

    Let's say that our initial reducer looks like this:

    That function is fairly short, but already becoming overly complex. We're dealing with two different areas of concern (filtering vs managing our list of todos), the nesting is making the update logic harder to read, and it's not exactly clear what's going on everywhere.

    Extracting Utility Functions

    2.   // Encapsulate the idea of passing a new object as the first parameter
    3.   // to Object.assign to ensure we correctly copy data instead of mutating
    4.   return Object.assign({}, oldObject, newValues)
    5. }
    7. function updateItemInArray(array, itemId, updateItemCallback) {
    8.   const updatedItems = array.map(item => {
    9.     if (item.id !== itemId) {
    10.       // Since we only want to update one item, preserve all others as they are now
    11.       return item
    12.     }
    14.     // Use the provided callback to create an updated item
    15.     const updatedItem = updateItemCallback(item)
    16.     return updatedItem
    17.   })
    19.   return updatedItems
    20. }
    22. function appReducer(state = initialState, action) {
    23.   switch (action.type) {
    24.     case 'SET_VISIBILITY_FILTER': {
    25.       return updateObject(state, { visibilityFilter: action.filter })
    26.     }
    27.     case 'ADD_TODO': {
    28.       const newTodos = state.todos.concat({
    29.         id: action.id,
    30.         text: action.text,
    31.         completed: false
    32.       })
    34.       return updateObject(state, { todos: newTodos })
    35.     }
    36.     case 'TOGGLE_TODO': {
    37.       const newTodos = updateItemInArray(state.todos, action.id, todo => {
    38.         return updateObject(todo, { completed: !todo.completed })
    39.       })
    41.       return updateObject(state, { todos: newTodos })
    42.     }
    43.     case 'EDIT_TODO': {
    44.       const newTodos = updateItemInArray(state.todos, action.id, todo => {
    45.         return updateObject(todo, { text: action.text })
    46.       })
    48.       return updateObject(state, { todos: newTodos })
    49.     }
    50.     default:
    51.       return state
    52.   }
    53. }

    That reduced the duplication and made things a bit easier to read.

    Extracting Case Reducers

    Next, we can split each specific case into its own function:

    Now it's very clear what's happening in each case. We can also start to see some patterns emerging.

    Separating Data Handling by Domain

    1. // Omitted
    2. function updateObject(oldObject, newValues) {}
    3. function updateItemInArray(array, itemId, updateItemCallback) {}
    5. function setVisibilityFilter(visibilityState, action) {
    6.   // Technically, we don't even care about the previous state
    7.   return action.filter
    8. }
    10.   switch (action.type) {
    11.     case 'SET_VISIBILITY_FILTER':
    12.       return setVisibilityFilter(visibilityState, action)
    13.     default:
    14.       return visibilityState
    15.   }
    16. }
    19.   const newTodos = todosState.concat({
    20.     id: action.id,
    21.     text: action.text,
    22.     completed: false
    23.   })
    25.   return newTodos
    26. }
    28. function toggleTodo(todosState, action) {
    29.   const newTodos = updateItemInArray(todosState, action.id, todo => {
    30.     return updateObject(todo, { completed: !todo.completed })
    31.   })
    33.   return newTodos
    34. }
    36. function editTodo(todosState, action) {
    37.   const newTodos = updateItemInArray(todosState, action.id, todo => {
    38.     return updateObject(todo, { text: action.text })
    39.   })
    41.   return newTodos
    42. }
    44. function todosReducer(todosState = [], action) {
    45.   switch (action.type) {
    46.     case 'ADD_TODO':
    47.       return addTodo(todosState, action)
    48.     case 'TOGGLE_TODO':
    49.       return toggleTodo(todosState, action)
    50.     case 'EDIT_TODO':
    51.       return editTodo(todosState, action)
    52.     default:
    53.       return todosState
    54.   }
    55. }
    57. function appReducer(state = initialState, action) {
    58.   return {
    59.     todos: todosReducer(state.todos, action),
    60.     visibilityFilter: visibilityReducer(state.visibilityFilter, action)
    61.   }
    62. }

    Notice that because the two "slice of state" reducers are now getting only their own part of the whole state as arguments, they no longer need to return complex nested state objects, and are now simpler as a result.

    Reducing Boilerplate

    We're almost done. Since many people don't like switch statements, it's very common to use a function that creates a lookup table of action types to case functions. We'll use the createReducer function described in :

    Combining Reducers by Slice

    As our last step, we can now use Redux's built-in combineReducers utility to handle the "slice-of-state" logic for our top-level app reducer. Here's the final result:

    1. // Reusable utility functions
    3. function updateObject(oldObject, newValues) {
    4.   // Encapsulate the idea of passing a new object as the first parameter
    5.   // to Object.assign to ensure we correctly copy data instead of mutating
    6.   return Object.assign({}, oldObject, newValues)
    7. }
    9. function updateItemInArray(array, itemId, updateItemCallback) {
    10.   const updatedItems = array.map(item => {
    11.     if (item.id !== itemId) {
    12.       // Since we only want to update one item, preserve all others as they are now
    13.       return item
    14.     }
    16.     const updatedItem = updateItemCallback(item)
    17.     return updatedItem
    18.   })
    20.   return updatedItems
    21. }
    23. function createReducer(initialState, handlers) {
    25.     if (handlers.hasOwnProperty(action.type)) {
    26.       return handlers[action.type](state, action)
    27.     } else {
    28.       return state
    29.     }
    30.   }
    31. }
    33. // Handler for a specific case ("case reducer")
    34. function setVisibilityFilter(visibilityState, action) {
    35.   // Technically, we don't even care about the previous state
    36.   return action.filter
    37. }
    39. // Handler for an entire slice of state ("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. // "Root reducer"
    81. const appReducer = combineReducers({
    82.   visibilityFilter: visibilityReducer,
    83.   todos: todosReducer

    Although the final result in this example is noticeably longer than the original version, this is primarily due to the extraction of the utility functions, the addition of comments, and some deliberate verbosity for the sake of clarity, such as separate return statements. Looking at each function individually, the amount of responsibility is now smaller, and the intent is hopefully clearer. Also, in a real application, these functions would probably then be split into separate files such as reducerUtilities.js, visibilityReducer.js, todosReducer.js, and .