Three ways to reduce the Redux boilerplate (and become more productive)

Have you noticed the boilerplate code when coding Redux? I bet you have!

But you know what? Redux doesn’t enforce you to use all of it. There are shortcuts you can take. Shortcuts that are ok to use!

1. Fewer files when using Ducks

It is common to have separate files for actions, reducers and action types. When you want to implement a new feature, you have to edit three different files. That’s a lot of context switching.

One solution to this problem is to write actions, reducer and action type in the same file. Yes, it’s allowed.

Erik has formalized this a bit and written a specification of it that he calls ducks. This specification is on the list of community add-ons that the Redux maintainers have vetted personally, so it’s legit.

This doesn’t work for all apps where many reducers need to access the same action. But it might work for your app, so it’s worth checking out!

By the way, the name ducks come from the last syllable in redux. Clever name!

2. You don’t have to use types

There is some boilerplate when using types for your actions. First, defining them:

const ADD_TODO = 'ADD_TODO'

And then importing them:

import { ADD_TODO, REMOVE_TODO } from '../actionTypes'.

The reason types are officially recommended is that it reduce the risk for bugs because of misspelled actions.

But this is only a recommendation. You don’t have to use it (proof). Instead, you can reference to your action as strings directly:

{
  type: 'UPDATE_NOTIFICATIONS_BADGE_COUNT',
  countType,
  count,
}

This example is actually from the respected open source project spectrum chat and as you can see, they are not using types.

I personally rarely use types on my projects. It makes it quicker to write new action/reducer pairs. And I have so far never experienced any bugs because of this.

3. Use the short version of mapDispatchToProps

In the Redux tutorial, they first teach you this way of writing the mapDispatchToProps function

const mapDispatchToProps = dispatch => {
  return {
    onTodoClick: id => {
      dispatch(toggleTodo(id))
    }
  }
}

What they don’t teach you (at least not at first) is that there is a simpler syntax you can use to achieve the exact same thing.

const mapDispatchToProps = {
  onTodoClick: toggleTodo
}

This syntax can always be used when the same input parameters are used in both the props function and the action creator.

I always use this shorter syntax when I can, and I only use the more complex syntax when I have to.

4. BONUS: use spread syntax in reducers

Something you do very often is changing an item in the state inside a reducer like this:

case SET_VISIBILITY_FILTER:
  return Object.assign({}, state, {
    visibilityFilter: action.filter
  })

That Object.assign syntax is a bit boilerplatey.

There is a shorter syntax that you can use that look like this:

case SET_VISIBILITY_FILTER:
  return { ...state, visibilityFilter: action.filter }

It’s called spread syntax and you must add a plugin to babel to be able to use it (it’s worth it!):

• redux