object literals for redux reducers

after.js

// O(1)
const todo = (state, action) => {
  const actions = {
    ADD_TODO: () => {
      return {
        id: action.id,
        text: action.text,
        completed: false
      }
    },
    TOGGLE_TODO: () => {
      if (state.id !== action.id) return state
      return {
        ...state,
        completed: !state.completed
      }
    }
  }
  return {
    default: state,
    ...actions
  }[action.type || 'default']
}

before.js

// O(n)
const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      }
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state
      }
      return {
        ...state,
        completed: !state.completed
      }
    default:
      return state
  }
}

performance is not 100% applicable using big-O when it comes to comparing a switch statement to an object literal approach. In the same way a compiler optimizes a resulting binary, the browser does as well. I can't speak for all browsers, but as an example, V8 in Chrome seems to have poor switch performance in comparison to arrays and object literals, especially when the growth of the switch statement escalates to a certain point (pretty much starting to confirm that O(n)). cite.

another argument is that a switch statement may also not really be a switch statement: at compile time that is. depending on the browser or node engine that is being used, a switch statement could actually transform into a giant if/else conditional at compiler time. this starts to make more sense as to the performance decrease, especially if switch statements are being used for clauses that shouldn't be compared using a switch statement (ie. redux reducers...)

2 years later, an additional benefit to avoiding the switch, is pure readability:

export const actions = {
  ADD_TODO: () => {
    return {
      id: action.id,
      text: action.text,
      completed: false
    }
  },
  TOGGLE_TODO: () => {
    if (state.id !== action.id) return state
    return {
      ...state,
      completed: !state.completed
    }
  }
}

export const todo = (state, action) => {
  return {
    default: state,
    ...actions
  }[action.type || 'default']
}

Thank you for your sharing. How do you execute method? I am using useReducer hook and need to add function call syntax to execute method.

return {
    default: state,
    ...actions,
  }[action.type || 'default']();

Thank you for your sharing. How do you execute method? I am using useReducer hook and need to add function call syntax to execute method.

return {
    default: state,
    ...actions,
  }[action.type || 'default']();

in the case of my last reply:

export const actions = {
  ADD_TODO: () => {
    return {
      id: action.id,
      text: action.text,
      completed: false
    }
  },
  TOGGLE_TODO: () => {
    if (state.id !== action.id) return state
    return {
      ...state,
      completed: !state.completed
    }
  }
}

export const todo = (state, action) => {
  return {
    default: state,
    ...actions
  }[action.type || 'default']
}

you can use the actions object directly:

actions.TOGGLE_TODO()

however, to take full advantage, you'd wanna do a little editing to actions to accomodate for arguments:

export const actions = {
  ADD_TODO: (action) => {
    return {
      id: action.id,
      text: action.text,
      completed: false
    }
  },
  TOGGLE_TODO: (action, state) => {
    if (state.id !== action.id) return state
    return {
      ...state,
      completed: !state.completed
    }
  }
}

This is super helpful and readable. Thanks 😊