Enhance Your Redux By Using Redux Toolkit — An Intro to RTK and How It Can Help You

As many are familiar, whenever we work with a larger, real-world project using some frontend Javascript framework, we tend to have to work with a state management library. Redux happens to be one of the more popular ones, given its flexibility and immutable data properties.

However, problems arose with Redux, which Redux Toolkit aims to solve. Redux Toolkit, or RTK, is a SOPE state management library that is officially recommended by the Redux team.

What is a SOPE Library?

SOPE is just an acronym for simple, opinionated, powerful and efficient. So if a library is considered SOPE, it has those four characteristics in some fashion. But what does that mean exactly for RTK?

• Simple — As you’ll read later on, RTK makes it very easy to implement common use cases found in Redux, such as setting up a store or creating reducers.
• Opinionated — Whereas Redux essentially gives you a blank slate, RTK provides a set of good default values for store setup right out of the box. RTK is also opinionated about which most common Redux addons are built-in to the library.
• Powerful — With the help of the immer.js , you can write “mutative” immutable update logic and, most importantly, you are able to create entire “slices” of state automatically. A slice can be thought of as a piece of the overall store and you can use slices to group code together based on your frontend architecture. This allows for much cleaner and more readable code.
• Effective — Since RTK helps you write clean and concise code, it allows you to focus on the core logic your application needs so you can do more work in less time. Spend less time worrying about how to get things up and running with Redux and get to building your application.

Let’s talk deeper about these problems so you get a better sense of the motivation behind RTK.

The Problems with Redux

As great of a library Redux is, there are some issues with it. First of all, Redux is extremely unopinionated. What does that mean?

They essentially only give you the bare minimum functionality to get started. It’s great when you want a lot of flexibility with your implementation. But we’re not always interested in the extra flexibility based on the use case. So, it creates a problem of having to do a lot of configuration work just to get to build what you want.

Redux Toolkit aims to solve this problem and it does so by being opinionated, unlike Redux. In a broad sense, the main three problems Redux Toolkit aims to solve are:

1. Complicated store configuration — For the majority of use cases that we encounter in our day-to-day work, the amount of flexibility Redux gives you is overkill. It’s to the point where you have to take time out from writing actual business logic in order to set up proper configurations.
2. Lots of extra packages — In order to build anything meaningful with Redux, it requires multiple extra third-party packages. For example, making React Router and Redux work together requires an external package in your project.
3. Tons of boilerplate code — The amount of boilerplate code you have to write to create actions and reducers can get out of hand as the project scales. It takes time away from actually building a product.

The Benefits of Redux Toolkit

By solving the major problems listed above, the main benefits that one can derive from learning and using Redux Toolkit are the following:

1. Write more efficient code — You are going to write a lot fewer lines of code to get things like stores, action functions and reducers set up. Ultimately this leads to a cleaner and more efficient code.
2. Speed up development — Since you get recommended default values out of the box for things like creating a store, you’re able to get more work done in less time.
3. Automatically apply best-recommended practices — Since you follow a guideline with RTK for implementation, the library is able to help you better manage the global state.

For example, imagine that you are building a voting feature for your application. You want to store some data in Redux about which polls the user has already voted for so that you can change the state of the underlying <Poll> component.

Traditionally, you would have to create a store, create a types.js file to store all of the action types, an actions.js file to store our action functions and a reducers.js file to store our reducer function. In a smaller project, this is not that big of a deal but it is once the project becomes bigger.

That’s where the concept of “slices” from RTK helps. They allow you to define the types, action functions and reducers all in one, like the following:

Redux Toolkit’s API

The RTK library exposes multiple API functions that you can use to quickly get things set up. Here’s a list of the more helpful API functions that are exposed:

• configureStore — This one is similar to Redux’s createStore function, however, it is much more simple and requires a lot less configuration to get started.
• createReducer — Instead of writing a bunch of switch case statements, you can just supply a lookup table, similar to the reducers one in the code above, mapping action creator functions to reducer functions.
• createAction — As the name states, this function will generate an action creator function which you can use throughout your application.
• createSlice — It lets you take your entire state and divide them up into “slices”. You pass an object of reducer functions, a slice name and an initial state and it will create a reducer, all your action creator functions and action types.
• createAsyncThunk — This function allows you to create a thunk easily. Thunks are generally used when working with asynchronous code.
• createEntityAdapter — Whenever you are storing normalized data in your Redux store, you can use this function to help you generate reducers and selectors for performing CRUD operations.

Conclusion

Redux helps many developers bring state management to their application, however, it comes with a set of problems of its own. However, Redux Toolkit aims to solve the major problems of Redux by taking a different philosophical approach.

Whereas Redux is extremely flexible and configurable, Redux Toolkit comes with many predefined default values to help you implement common use cases. So where you lose out on flexibility, you gain on speed.

Personally speaking, the concept of slices makes it much easier to work with state management. If you can define all of your important state properties in a single slice and write intuitive and human-readable code, that’s a win for me.

For existing projects that are using Redux, it may take time to fully migrate all of your implemented code to use Redux Toolkit, however, you’ll see a pay-off in increased efficiency in the long run.