configureStore

What configureStore sets up

configureStore from @reduxjs/toolkit creates a Redux store in one call. You pass a reducer (a single reducer or an object of slice reducers, which it combines). By default it adds the thunk middleware, and in development it adds checks that warn when state is mutated or when non-serialisable values (such as class instances or Promises) appear in state or actions. It also enables the Redux DevTools browser extension integration. The plain createStore from the core redux package is marked deprecated in favour of this (check the docs for your version).

Less boilerplate, same Redux

Redux Toolkit is the official, recommended way to write Redux logic.

A typed store

store.ts with RootState and AppDispatch types.

import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './features/cart/cartSlice';
import userReducer from './features/user/userSlice';

export const store = configureStore({
  reducer: {
    cart: cartReducer,
    user: userReducer,
  },
  // devTools defaults to true; disable or configure it if needed
});

// infer types from the store itself so they stay in sync
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Middleware is a callback

To add middleware, pass middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(myMiddleware). Returning only your own array would drop thunk and the dev checks.

Quick check: What does configureStore add by default?

• A REST client
• Thunk middleware, dev-mode checks and DevTools integration
• Persistence to localStorage
• Server-side rendering