Why You Should Switch to Redux Toolkit Library

When most engineers are working on a front-end project that requires using a state container, their go-to option is Redux. While Redux is undeniably an excellent choice for organizing your states, I would recommend another library from the team that developed Redux that will make the utilization of Redux for your project even easier.

Described as simple, opinionated, powerful and effective, the Redux Toolkit is the newest library developed by Redux. You may be asking yourself, what exactly does Redux Toolkit mean? What makes it different from the classic Redux? Or, does it really make development simpler? The purpose of this article is to answer some of these questions, and help you decide whether Redux Toolkit may be a helpful tool for you to use during your development projects. Let’s get started!

In my experience, there are a few negative aspects of using the standard Redux library:

• First, there are times when using Redux when you have to install additional tools in order to get all of the applications you need. For example, in the event that you need a reselect library, you will have to install the selector library for Redux.
• Another problem that I have encountered with Redux is that oftentimes you have to continually write boilerplate code, something that most developers I know don’t appreciate. You repeatedly have to write action creators, for example.
• In addition, the configuration setup is extremely complicated.

Taking these issues into account and in an effort to abstract the setup process, the Redux Toolkit package was built. To give you a chance to see the difference in the two systems, I am going to take a common use case and show you the results of the standard Redux library versus the Redux Toolkit library.

As our example project we will take a shopping cart that needs to be incremented. In the standard Redux library, the action creator function will look something like this:

Included within the Redux Toolkit, there is a function called createAction which can be used to simplify creating actions such as the one we are trying to code for. This is what the code would look like for an incrementCart action within Redux Toolkit library:

With just one simple line of code we have created the incrementCart action. In addition, notice that with this action the payload has been added automatically when the function is called with an argument.

The next step is to make the reducer for the shopping cart. This is the Redux library version of our reducer:

Within the Redux Toolkit library the same reducer function will look like this:

When looking through these lines of code, you may have noticed that the Redux Toolkit version was written to mutate the state directly. As you know, this type of code is a violation of the Redux rule that states that you need to keep reducer functions pure. So how can we write the code this way?

One of the many benefits of the Redux Toolkit is that the createReducer function allows you to mutate the state, or looks as if it mutates the state, but on the backend it doesn’t. This eliminates the problem with the Redux library that makes changing the implementation of the state very complicated. Some developers may utilize the spread syntax of ES6 or possibly use an immutable library in order to ensure that the state isn’t mutated, but by using the createReducer helper function, the state can be switched easily and will still remain predictable.

Next, we will take a look at the configuration of the store using the Redux library:

While the above code may seem familiar and easy to operate, we are actually performing so many tasks simply to configure a store. As an example of streamlining the process, we could use the combineReducer function for our rootReducer so that all of our reducers were combined, and only then configure the enhancers and middlewares, etc.

Also, you need to consider that depending on the complexity of the application you are working on, there could be more mistakes within longer lines of code and configuration. By using the Redux Toolkit, you could instead use the configureStore helper function which is a simpler function for configuring the store. Check it out:

Because we don’t have to combine the reducers on our own, there isn’t much additional configuration needed. Also, our middlewares can be passed as arrays to the middleware option using getDefaultMiddleware which is a function available in the Redux Toolkit. This particular function can help pass additional middlewares which may be needed by default.

There is an argument among some coders who say that the only value in the Redux Toolkit is that it simplifies functions but that there is still a need for boilerplates when working. In addition to everything we have already discussed, there is a really fun function within Redux Toolkit called createSlice (this is my favorite).  By using this function, you can define the initial state, define reducer functions, and create the matching action types and creates, simply by calling this one function. Here is the code used so that you can better understand why this function is so useful.

Let’s say you want to recreate all of the coding done throughout the process of creating the shopping cart examples, but you only want to use createSlice. Here is how that would look:

Within these few lines of code, there are the action creators, reducers, and action types and they are all contained within the same file. Isn’t that cool?

If you are interested in simplifying your process or saving time in the same way the Create React App saves hours, I recommend you at least give the Redux Toolkit library a try. This is just the tip of the iceberg when it comes to all of the functions redux-toolkit has to offer, so you can reference the documentation here to gain more knowledge on this lifesaver of a library.

Happy coding!

Are you a React developer interested in growing your software engineering career Apply to join the Andela Talent Network today.