# configureStore — Redux Toolkit / Zustand

Source: https://www.skillbyai.com/en/redux-zustand/c-store

> A store with good defaults.

## 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.

![Three ideas: configureStore, createSlice with Immer, typed hooks with a Provider.](assets/figures/redux-zustand/section-2-map.svg) — Figure 2.1 — Store, slices and React components connected through hooks.

## A typed store

store.ts with RootState and AppDispatch types.

```typescript
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.

**Quiz:** What does configureStore add by default?

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

*Answer:* Thunk middleware, dev-mode checks and DevTools integration. Sensible defaults are the point of configureStore.