Create a store from slice reducers
Application startup
Redux Toolkit · Type Alias
ConfigureStoreOptions
ConfigureStoreOptions is the options type for configureStore. It specifies reducers and optional middleware, enhancers, preloaded state, DevTools configuration, and duplicate-middleware checking.
How it works
ConfigureStoreOptions is the generic options object accepted by configureStore. It describes the root reducer, optional middleware and enhancers, preloaded state, DevTools settings, and duplicate-middleware checking used to build an EnhancedStore.
Syntax
interface ConfigureStoreOptions<S = any, A extends Action = UnknownAction, M extends Tuple<Middlewares<S>> = Tuple<Middlewares<S>>, E extends Tuple<Enhancers> = Tuple<Enhancers>, P = S>Parameters
| Name | Type | Description |
|---|---|---|
reducer | Reducer<S, A> | ReducersMapObject<S, A> | Root reducer function or object of slice reducers. |
middleware | ((getDefaultMiddleware: CurriedGetDefaultMiddleware<S>) => M) | M | Redux middleware to install; defaults to getDefaultMiddleware when omitted. |
preloadedState | P | Initial state supplied to the store. |
devTools | boolean | DevToolsOptions | Enables DevTools or supplies DevTools options. |
enhancers | ((getDefaultEnhancers: GetDefaultEnhancers<M>) => E) | E | Store enhancers to apply. |
duplicateMiddlewareCheck | boolean | Checks for duplicate middleware instances; defaults to true. |
Returns
An EnhancedStore<S, A, M, E>.
Key points
- The type represents the named configuration object consumed by configureStore.
- reducer may be a complete root reducer function.
- Alternatively, reducer may be an object whose slice reducers are combined automatically.
- The middleware option can provide the middleware installed in the store.
- devTools controls DevTools integration and defaults to enabled.
- enhancers configures additional store enhancers.
Common mistakes
- Supplying middleware replaces the default middleware list; include every middleware the store should use.
- Duplicate middleware detection is enabled by default and can be disabled when intentional duplicate instances are required.
Example: Create a configured store
import { configureStore, createSlice } from '@reduxjs/toolkit'
const counter = createSlice({
name: 'counter',
initialState: 0,
reducers: { increment: state => state + 1 },
})
export const store = configureStore({
reducer: { counter: counter.reducer },
devTools: false,
})
Creates a store from an object of slice reducers and disables DevTools integration.
When to use it
Provide an initial preloaded state
Server rendering or persistence
Customize middleware and enhancers
Custom store infrastructure
Interview questions
QWhat is ConfigureStoreOptions used for?
It is the generic configuration type passed to configureStore, not the store itself. Its type parameters describe state, action, middleware, enhancers, and preloaded state.
Follow-up: How does reducer shape affect inference? Passing an object lets configureStore infer state from the slice reducers, while a function supplies the root reducer directly.
QWhat can the reducer option contain?
The reducer option accepts either one root reducer function or an object of slice reducers. With the object form, configureStore passes those reducers to combineReducers.
Follow-up: What limitation applies to the object form? It combines only one nesting level; nested reducer composition must be performed separately.
QHow does middleware configuration work?
The middleware option configures the Redux middleware installed in the store. If omitted, configureStore uses the middleware returned by getDefaultMiddleware, which includes the standard defaults.
Follow-up: What happens when middleware is supplied explicitly? The supplied list becomes the complete middleware configuration, so defaults must be added deliberately if needed.
Related
configureStoreEnhancedStoregetDefaultMiddlewareDevToolsOptionsTuplecombineReducers