According to the official documentation, Redux toolkit is the official, opinionated, batteries-included toolset for efficient Redux development …. yeah, bla, bla, bla. But what does that really mean?

Introduction to the Redux Toolkit (RTK)

If you’re reading this, then perhaps you haven’t given up on redux yet. For good reasons I suppose.

If you’ve lost touch on what’s happening in the redux ecosystem or wonder how to write redux like it's 2020 (amidst all the craziness) then redux toolkit may interest you.

By the end of this article you’ll understand what RTK is, what it offers and most importantly why it may be worth your time.

Too much boilerplate!

The number one complaint I get from redux users is how much boilerplate code they write. This is frustrating because as developers we’re focused on solving problems and appreciate some ease while at it.

Over the years, there have been open-source libraries to help take away some of the pain associated with redux - writing boilerplate code being one of many!

Some pain are perhaps better dealt with from the source, but it seemed like the official redux maintainers took no stand on fixing these problems commonly associated with redux. That’s all changed now.

More than just reducing boilerplate code, the redux toolkit aims to address other problems such as the difficulty in creating reducers, creating a store with multiple actors, constants, switch cases - it’s all a hassle, I reckon.

If you wanted to eliminate some of these problems, you had to rely on community libraries aimed at one or more of these problems.

Right now, imagine a single library from the official redux maintainers targeted at solving many of the challenges associated with the ease of writing redux code. With a sharp imagination, you get redux-toolkit!

I have to mention that no one drug heals all pains. So, redux toolkit may not solve all of yours. It is limited in scope, but it definitely kicks a lot of the aforementioned problems in the *ss. Concerns such as folder structure and data caching would still have to be addressed by you - no running away from caching, eh? ;)

What’s included in Redux Toolkit?

With redux toolkit you get an opinionated toolset for redux development. In fact, a stupid-simple way to see this is “the create-react-app for redux”. So, what does the library include?

The Redux Toolkit Main dependencies

To be completely honest you could skip this section and move on to the next. That’s more important if you care about the exposed APIs redux toolkit provides.

Okay, for the nerds, let’s talk about the inner libraries employed by redux-toolkit.

You don’t need a degree to know what the main dependencies are. You just need a package.json.

At the time of this writing, there are four main dependencies:

// 1. immer
// 2. redux 
// 3. redux-thunk 
// 4. reselect

If you’ve written redux in the past, you likely recognise all or a few of those. C’mon you recognise the second dependency!

Immer and Redux Toolkit

The most interesting of the dependencies is arguably immer, the german word for “always” in english. Goodness! Imagine if that was a longer german word like Donaudampfschiffahrtsgesellschaftskapitän. Then, I guess we’d all star the library to remember its name (try this novel trick to steal Github stars)

Other than the impressive name, it was named the breakthrough of the year on open source award.

When you first learned redux, you remember the rule “do not mutate state in your reducers”?

You must remember writing a lot of spread syntax magic:

{
     ...state,
       [userId]: {
        ...allUserMsgs,
       }
}

How could you forget!

Well, immer lets you throw that rule out the door (sort off). You write your typical mutable code, and it produces a new copy of state.

// you can do this in your reducer
state.newValue = 5

Redux toolkit lets you do the same as it implements immer. The good part is that you don’t really need to learn about the inner workings of immer to use the toolkit. Just go ahead and mutate state like no one cares. Well, the toolkit doesn’t care.

Reselect and Redux Toolkit

Reselect is perhaps no news to an avid redux developer. However what’s interesting is that redux toolkit exports the createSelector utility from reselect. In all fairness, this is perhaps the function that gives you 80% of the results when you use reselect. Think Pareto principle.

Essentially, you don’t have to reinstall Reselect to use createSelector. Just go ahead and import from the redux toolkit.

import { createSelector } from "@reduxjs/toolkit";

In the first real application I built with redux toolkit, I went on to still add reselect as a dependency when all I used was the createSelector utility! That’s how you know a redux toolkit rookie. You’ll spot them all around. Don’t say I told you.

The APIs exposed by Redux toolkit

The toolkit would be nothing if it didn’t expose an intuitive (and helpful) API. Here are the APIs included.

  • configureStore: Think of this as the good ol’ createStore method with a simplified configuration options and good defaults e.g., implements redux-thunk by default and enables the use of the Redux Devtools Extension.
  • createReducer: This one is a life saver. Instead of writing switch statements, you supply of a lookup table mapping action creators to reducer functions. Oh, and you can mutate state as much as you want thanks to immer.
  • createAction: generates an action creator function so you don’t have to do it. The function also has a toString method defined, so the function can be used in place of a type string. Pretty handy!
  • createSlice: This is one of the most loved APIs i reckon. It lets you define your entire application state in slices. You pass an object of reducer functions, a slice name, an initial state value, and it automatically generates a slice reducer, action creators and action types! Talk about the use of least effort!
  • createAsyncThunk : This helps you create a thunk easily. The thunk will dispatch pending, fulfilled or rejected action types based on the promise returned.
  • createEntityAdapter: This is great for managing normalised data in your redux store. It generates prebuilt reducers and selectors for performing CRUD operations on a normalised state structure.
  • createSelector: Well, I talked about this earlier. It exists to spot redux-toolkit newbies. More seriously, it exports the function from reselect so you don’t have to worry about it.

C’mon! Aren’t these amazing? I know redux has been under a lot of criticism in the past, but this is a great direction for one of the most mature client-side state management libraries out there.

How to Install Redux Toolkit

Installing the redux toolkit is pretty straightforward. If you’re creating a new app, use create-react-app with the redux template:

npx create-react-app my-app --template redux

If you want to add the redux toolkit to an existing app, install via npm or yarn:

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

Conclusion

There you go! I hope redux toolkit restores your dying faith in redux. I’ll be writing more on building actual applications with the redux toolkit. So, stay in touch!