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
  }
}

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 😊