ReduxJS/Toolkit

The opinionated way of building Redux apps

ReduxJS/Toolkit

posted in javascript on  •   • 

reduxjs/redux-toolkit : The official, opinionated, batteries-included toolset for efficient Redux development

We’re 2025 and you start a new app with old, trusted and deprecated create-react-app, only to find out that using Redux is also, deprecated.

Redux createStore deprecation

During previous migrations I took a long hard look at the ReduxJS/Toolkit documentation and I was like… Aint nobody got time for that!

For the last migration, I decided to give it go and well, I can already say with conviction, it is worth the time learning. Reduced boilerplate, batteries included and while the full documentation is still daunting, you can take it step by step.

Immer

immerjs/immer : Create the next immutable state by mutating the current one

Before we actually start with ReduxJS/Toolkit (RTK), let’s take a step back.

The application I was migrating, was using ImmutableJS because you know, you want all store state to be immutable, your reducers pure, and it was all the rage back then. For me though, the cure turned out to be worse than the disease. You could not longer just do state.someProp, you had to do state.get('someProp').

I rather just ...spread all the way instead.

Immer is the solution the ReduxJS/Toolkit has adopted and I love how it allows you to write reducers while (almost) not having to think about immutability anymore!

Part 1: Immer

createSlice and configureStore

Okay, now that we’re Immer experts, let’s look at the two most important exports of the Toolkit: createSlice and configureStore.

  • createSlice: each top level object of your state is typically a slice
  • configureStore: abstracts away the horror that was createStore

Part 2: createSlice and configureStore

createAsyncThunk

On top of the included redux-thunk package, createAsyncThunk is the helper function for all your API call needs.

Coming from “legacy Redux”, this is the last basic piece of ReduxJS/Toolkit!

Part 3: createAsyncThunk

TypeScript

Keeping everything entirely type-safe.

Part 4: TypeScript

Not yet written

Parts of this series that are not yet written 😀

Reselect

More batteries included.

Part 5: createSelector

RTK Query

A much higher level of abstraction.

Part 6: createApi

And more?

Listener middleware? EntityAdapters? What is Redux & Redux best practices?


Stuff that came into being during the making of this post