You don’t want to be using useDispatch, useSelector etc directly in your code. Instead they are wrapped so that you can enjoy complete type safety!

createAsyncThunk generates promise lifecycle action types, which you handle in the extraReducers of your slice.

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

export const fetchStuff = createAsyncThunk(
  'resource/action',
  async (params, thunkApi) => {
    try {
      const response = await fetch(`/api/resource/${params.id}`);
      return await response.json();
    } catch {
      // Also possible to return a rejected Promise
      return thunkApi.rejectWithValue("Well, that failed");
    }
  }
);

This dispatches the following actions (from the first “Type” argument):

• resource/action/pending: display a spinner or something?
• resource/action/rejected: display an error message?
• resource/action/fulfilled: while the previous two could be considered optional, you definitely want to handle this one!

The legacy Redux createStore could make a grown man cry, and probably has. createSlice and configureStore GREATLY simplifies this process while at the same time also significantly reducing the boilerplate – you can basically delete all your actions as they are now defined by the reducers!

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

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

Immer is the solution the ReduxJS/Toolkit has adopted to enforce pure reducers: it allows you to write reducers while (almost) not having to think about immutability anymore!

Awards!? 🏆🥇

• React: Breakthrough of the year 2019
• JavaScript: Most impactful contribution 2019

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.

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.

We needed to generate some files and share them with a third party. They preferred we put the files on our SharePoint since they already had access to it.

So we made a docker-compose that scheduled a CRON job to create the files in the shared folder.

The files were getting generated alright and other files were getting synced alright, but the generated files were not!?

Compared to other SPA frameworks, Angular really made it quite cumbersome to do simple things like an if/else to show/hide certain UI parts.

The new syntax is so much more succint, it gets rid of excess html tags, is easier to remember and it doesn’t need to be added to the imports array of a standalone component.

Typically you want to write tests only for public methods. You want to avoid writing tests for private methods so that when you change the implementation, your tests remain green and you can do that ruthless refactoring without having to worry about introducing new bugs.