Writing Cleaner and More Readable Redux

23 / 03 / 2022

Read Time 5 minutes

Writing Redux code can quickly become boilerplately and difficult to understand. This applies especially on larger projects or when you’re needing to update an incredibly nested property. 

We can make use of two libraries to very easily adjust your approach while making your code much cleaner and far more readable. 

The libraries redux-actions and @reactjs/toolkit are fantastic and can help us to write a lot less Redux code without losing functionality. 

Redux-actions allows us to rapidly produce generic action creators (as well as create action creators that manipulate the data before returning the action object) while reduxjs/toolkit allows for us to structure our reducers in a different way plus make us of immer. Immer is a library that allows us to write code in a mutable fashion by making use of a proxy state, however, the updates to our store are actually performed immutably. 

This describes the flow of immer. You’re provided with a draft (or proxy) state that represents the current one. You can then make changes to that draft state. After you’re done making changes, that draft state will be persisted to the store as the next state. 

 

Actions 

Let’s look at our actions.js file from the ShopDrop application we created in the previous blog. 

Our actions currently look like this: 

 

If we import the redux-actions library into our project using npm i redux-actions, we’ll then be able to import the createActions function. Using that function, we can rapidly produce action creators that would be identical to the example you see above. 

All we need to provide this method is the type of the action (like we normally would) and it’ll implicitly build a function that would take data and return that as a payload. The result of the above could would provide is with an actionCreators object that if we were to log, would look like this: 

A function is generated in the form of camel case based on what string literal type we provided to the method. 

Note: Check out the API to see how you could perform data manipulation prior to creating the action object. 

Reducer 

Our previous reducer.js would have looked like this: 

 

After importing the new library using npm i reduxjs/toolkit, we could make use of the createReducer function. This function allows us to build a reducer without having to have a switch cache (and thusly mitigating the need for string constants for action types everywhere). The biggest bonus is that this library is a wrapper for immer which means it allows us to make changes mutably. 

Our new reducer could look something like this: 

You can see how much easier this makes updating nested properties and also how much easier it is to read. We could go from this: 

to this: 

As usual, a CodeSandBox for this project is available here if you want to mess around and dive into the code. 

View
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website.

These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.

Necessary

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-Necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.