A compact reference for the Redux Toolkit series. Tables only, no prose. Use it during slice authoring, store configuration, and component integration. Installation Package Purpose @reduxjs/toolkit Core: configureStore, createSlice, createAsyncThunk react-redux Provider, useSelector, useDispatch @reduxjs/toolkit/query/react RTK Query hooks msw Network mocking in tests vitest or jest Test runner Store Setup Item Syntax Create store configureStore({…

An async thunk is not a pure function. It calls an API, waits for a response, and dispatches actions based on the result. Testing it requires either mocking the API layer and running the thunk through a real store, or extracting the payload creator and testing it in isolation. The Redux documentation recommends the first…

A Redux slice is the easiest part of a Redux application to test. The reducer is a pure function: given a state and an action, it returns a new state. The action creators are small functions that return plain objects. The async thunks are the only part that requires mocking, because they call the network….

createAsyncThunk generates a thunk, a pending action, a fulfilled action, and a rejected action from a single call. In TypeScript, the types for those four artifacts are derived from three generic parameters: the return type of the payload creator, the type of the argument passed to the thunk, and an optional configuration object that defines…

A Redux store in a TypeScript project has two types that every component needs: the shape of the state (RootState) and the type of the dispatch function (AppDispatch). Neither type exists by default. RootState is derived from the store’s reducer map, and AppDispatch is derived from the store itself, because the store’s dispatch function includes…

Redux Toolkit’s default middleware includes a serializability check that inspects every dispatched action and every value in the store state. If it finds a Date, a Map, a Set, a class instance, a function, or a Promise, it logs a warning or throws an error depending on the environment. The check exists because Redux DevTools,…

A custom middleware is a function that sits between dispatch and the reducers. It receives every action, can inspect it, can modify it, can delay it, can perform side effects, and can pass it along to the next middleware or the reducer. Redux Toolkit’s configureStore includes a default middleware stack (thunk, immutability checks, serializability checks),…

RTK Query’s lifecycle is not a single mount-to-unmount span. It is a set of subscription behaviors that determine when a query fetches, when it re-fetches, and when it stops. Three mechanisms control that lifecycle beyond the initial fetch: polling re-fetches on an interval while a component remains subscribed, lazy queries defer the fetch until a…