Create the root Redux store from slice reducers.
Application initialization
Redux Toolkit · Function
configureStore
configureStore is Redux Toolkit's standard API for creating a Redux store with sensible defaults. It accepts named configuration options and handles reducer composition, middleware, enhancers, and DevTools setup.
How it works
configureStore creates a Redux store from one configuration object. It can build the root reducer from slice reducers, add standard middleware and enhancers, configure DevTools, and infer useful TypeScript types.
Syntax
configureStore(options)Parameters
| Name | Type | Description |
|---|---|---|
reducer | Reducer | Record<string, Reducer> | A reducer function used directly as the root reducer, or an object of slice reducers from which configureStore creates the root reducer. |
preloadedState | any | Initial state for the store; it takes precedence over reducer-defined initial state. |
middleware | (getDefaultMiddleware) => Middleware[] | Callback receiving getDefaultMiddleware and returning the middleware array to install. |
enhancers | (getDefaultEnhancers) => StoreEnhancer[] | Callback for configuring store enhancers, including the defaults. |
devTools | boolean | DevToolsOptions | Controls Redux DevTools integration; true by default or an options object. |
Returns
A configured Redux store created with the supplied reducer and options.
Key points
- Use configureStore as the usual Redux Toolkit entry point for creating an application store.
- A single call performs the main store setup instead of requiring separate manual configuration steps.
- Passing an object of slice reducers causes automatic root-reducer construction.
- Thunk support is included during the default middleware setup, enabling dispatched functions for async logic.
- Development mode adds middleware checks that help detect accidental state mutations and related mistakes.
- The store is connected to the Redux DevTools Extension automatically when available.
- Configuration uses a single object with named options rather than positional arguments.
Common mistakes
- Supplying middleware replaces the default middleware list, so preserve the defaults when you still need them.
- Preloaded state overrides reducer-provided initial values, so ensure its shape matches the reducer structure.
Example: Create a store with configureStore
import { configureStore } from '@reduxjs/toolkit'
const counterReducer = (state = { value: 0 }, action) => {
if (action.type === 'counter/increment') return { value: state.value + 1 }
return state
}
export const store = configureStore({
reducer: { counter: counterReducer },
})
store.dispatch({ type: 'counter/increment' })
console.log(store.getState().counter.value)Creates a store from an object of slice reducers, then dispatches an action and reads the resulting state.
When to use it
Use the built-in thunk middleware for dispatching functions.
Async workflows
Detect accidental mutations and non-serializable values during development.
Development diagnostics
Connect the store to Redux DevTools for debugging.
State inspection
Interview questions
QWhat problem does configureStore solve?
configureStore is Redux Toolkit's standard store-construction API. It accepts named options, combines an object of slice reducers when needed, adds thunk and development checks, configures DevTools, and creates the store.
Follow-up: What happens when reducer is an object? configureStore passes that object to combineReducers, using its keys as the corresponding state keys.
QWhat forms can the reducer option take?
The reducer option accepts either a single root reducer function or an object of slice reducers. The object form lets configureStore create the root reducer automatically.
Follow-up: What limitation does the object form have? It handles only one level of nesting, so deeper composition must be done explicitly.
QWhat defaults does configureStore provide?
Thunk middleware and Redux DevTools integration are enabled by default, while development adds checks for accidental mutations and non-serializable values. A middleware callback can return the middleware array to use.
Follow-up: How can custom middleware retain defaults? Use the callback's getDefaultMiddleware argument and return a list that adds custom middleware to those defaults.
Related
createSlicecombineReducersgetDefaultMiddlewarecreateStoreredux-thunkRedux DevTools Extension