Reducing boilerplate in Redux with Redux-Starter-Kit

Jerome Franco
Apr 5, 2019 · 4 min read

Chances are, you have been using Redux for quite a while now and you have come to realize how frustrating it is to write a lot of boilerplate code just to add state in your Redux app.

In this article, we’re going to discuss some of these problems that make Redux a bit frustrating to use and how we could address those using Redux-Starter-Kit.

Problem #1 — Setting up the store

To get you up and running with Redux in your project, you would normally have the following code below to setup a Redux store:

This setup is very common across your Redux app that you have to copy and paste it every time you create a Redux project.

Now you would think, why wouldn’t this code be abstracted away from us to simplify the store setup?

Redux! Why?

Problem #2 — Two separate files for defining an action

When creating a Redux action, a common practice would be to create a separate file for your action type constant and action creator (which also imports and wraps the earlier).

The problem with this approach is that mapping your React components to your redux state can be a bit tedious especially when you’re debugging since there are more files that you have to go thru.

Let’s say, you have a container component that has a button that when clicked, dispatches an action thru a bound action creator. To see how Redux handles this action (e.g. state changes via reducer and side effect via middleware), you would typically do the following steps:

  1. Go to the file where the action creator was defined and see what action type constant is being used.
  2. Go to the reducer file where the action type constant you found in the previous step is being used and see how the action is being handled via the switch statement in your reducer.
  3. If you have a middleware like redux-saga, you would go to the saga file and also look for the action-type constant and see how the action is being handled. Also in this file, you would normally see both the action type constant and action creator being imported.

What if you could skip step one and just use your action creator to handle an action in your reducers and middleware? What if you could reduce the amount of files that are being imported/used and just have one file that represents an action?

Problem #3 — Touching 4 files to implement a simple state

Have you added a state in your component using redux and you ended up touching constants.js, actions.js, reducer.js and container-component.js? What more if you have a middleware for side-effect like saga?

This process can be tedious for implementing things that are so simple. Also, having too many files just make your code fragmented that it ends up difficult to reason about.

What if you could increase cohesion by bundling these pieces together into an isolated, self-contained module?

Addressing Problems with Redux Starter Kit

Redux Starter Kit is a library created by the same team who maintains Redux, and it offers a set of tools to make using Redux easier. Now, let’s see how this library can solve the 3 problems we mentioned above.

Solution to Problem #1 — configureStore

Redux Starter Kit has a configureStore function that abstract a lot of boilerplate code (like we had on Problem #1) and adds some defaults to make setting up a Redux store a breeze.

Setting up your store is simple:

configureStore also allows you to pass some options so you could customize your store:

Solution to Problem #2 — createAction

This library has a createAction function that combines action type and action creator declarations into one, so you don’t have to create 2 separate files (constant.js and some-action.js).

This function returns an action creator that exposes a .type property so you can use it in your reducer and middleware to handle dispatched action. Here is an example of how you would create an action creator using createAction and how you can use the .type property in a reducer and saga:

By getting rid of the constant file for your action type, we reduce the amount of mappings we have to make between your React component and your Redux files when debugging. Plus, less files to import!

Solution to Problem #3 — createSlice

Lastly, Redux Starter Kit has a createSlice that allows you to put together pieces in Redux that are logically related to each other into a module.

Think of it as putting together pieces that works on a slice of state in the Redux state tree.

Here’s an example of how you use createSlice:

Isn’t that better than creating 4 files for just a single state?

To know more about the concept behind createSlice, take a look at the “Redux Ducks” pattern.

I hope you enjoyed reading this article and I hope you find the points that I’ve made useful. I just started using Redux-Starter-Kit recently and I may have not covered everything about it or some of the downsides of it so, please leave a comment and let me know.

This is also my first article on medium and I would really love to hear some comments about my writing. ❤️

Jerome Franco

Written by

Frontend Engineer, loves learning and sharing things.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade