reduxjs/reselect : Create memoized ‘selector’ functions

One of the Redux Style Guide “Strongly Recommended” rules is Keep State Minimal and Derive Additional Values:

Keep the actual data in the Redux store as minimal as possible, and derive additional values from that state as needed.

Another strongly recommended rule is Normalize Complex Nested/Relational State

Many applications need to cache complex data in the store. That data is often received in a nested form from an API, or has relations between different entities in the data (such as a blog that contains Users, Posts, and Comments).

Of course your components are interested in those derived values and in the nested data. Keeping those calculations and recombining the data efficient is where createSelector comes into play.

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

This first post is context and can basically be ignored.
The remainder of the series are no-nonsense pretty detailed explanations on how to start using ReduxJS/Toolkit, assuming you’re basically already a “legacy” Redux expert but don’t want to read the gazillion pages that is the default documentation.

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 succinct, 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.