Professional Documents
Culture Documents
Configurestore - Redux Toolkit
Configurestore - Redux Toolkit
configureStore
The standard method for creating a Redux store. It uses the low-level Redux core
createStore method internally, but wraps that to provide good defaults to the store setup
for a better development experience.
Legacy Redux usage patterns typically required several dozen lines of copy-pasted boilerplate
to achieve this.
Redux Toolkit's configureStore simplifies that setup process, by doing all that work for you.
One call to configureStore will:
Call combineReducers to combine your slices reducers into the root reducer function
Add the thunk middleware and called applyMiddleware
In development, automatically add more middleware to check for common mistakes like
accidentally mutating the state
Automatically set up the Redux DevTools Extension connection
Call createStore to create a Redux store using that root reducer and those configuration
options
configureStore also offers an improved API and usage patterns compared to the original
createStore by accepting named fields for reducer , preloadedState , middleware ,
enhancers , and devtools , as well as much better TS type inference.
https://redux-toolkit.js.org/api/configureStore 1/7
11/13/23, 4:43 PM configureStore | Redux Toolkit
Parameters
configureStore accepts a single configuration object parameter, with the following options:
type ConfigureEnhancersCallback = (
defaultEnhancers: EnhancerArray<[StoreEnhancer]>
) => StoreEnhancer[]
interface ConfigureStoreOptions<
S = any,
A extends Action = AnyAction,
M extends Middlewares<S> = Middlewares<S>
> {
/**
* A single reducer function that will be used as the root reducer,
or an
* object of slice reducers that will be passed to
`combineReducers()`.
*/
reducer: Reducer<S, A> | ReducersMapObject<S, A>
/**
* An array of Redux middleware to install. If not supplied, defaults
to
* the set of middleware returned by `getDefaultMiddleware()`.
*/
middleware?: ((getDefaultMiddleware: CurriedGetDefaultMiddleware<S>)
=> M) | M
/**
* Whether to enable Redux DevTools integration. Defaults to `true`.
*
* Additional configuration can be done by passing Redux DevTools
options
*/
devTools?: boolean | DevToolsOptions
/**
* The initial state, same as Redux's createStore.
* You may optionally specify it to hydrate the state
* from the server in universal apps, or to restore a previously
serialized
* user session. If you use `combineReducers()` to produce the root
reducer
* function (either directly or indirectly by passing an object as
https://redux-toolkit.js.org/api/configureStore 2/7
11/13/23, 4:43 PM configureStore | Redux Toolkit
`reducer`),
* this must be an object with the same shape as the reducer map
keys.
*/
preloadedState?: DeepPartial<S extends any ? S : S>
/**
* The store enhancers to apply. See Redux's `createStore()`.
* All enhancers will be included before the DevTools Extension
enhancer.
* If you need to customize the order of enhancers, supply a callback
* function that will receive the original array (ie,
`[applyMiddleware]`),
* and should return a new array (such as `[applyMiddleware,
offline]`).
* If you only need to add middleware, you can use the `middleware`
parameter instead.
*/
enhancers?: StoreEnhancer[] | ConfigureEnhancersCallback
}
reducer
If this is a single function, it will be directly used as the root reducer for the store.
middleware
If this option is provided, it should contain all the middleware functions you want added to the
store. configureStore will automatically pass those to applyMiddleware .
If not provided, configureStore will call getDefaultMiddleware and use the array of
middleware functions it returns.
https://redux-toolkit.js.org/api/configureStore 3/7
11/13/23, 4:43 PM configureStore | Redux Toolkit
Where you wish to add onto or customize the default middleware, you may pass a callback
function that will receive getDefaultMiddleware as its argument, and should return a
middleware array.
For more details on how the middleware parameter works and the list of middleware that are
added by default, see the getDefaultMiddleware docs page.
devTools
If it is an object, then the DevTools Extension will be enabled, and the options object will be
passed to composeWithDevtools() . See the DevTools Extension docs for
EnhancerOptions for a list of the specific options that are available.
Defaults to true .
trace
The Redux DevTools Extension recently added support for showing action stack traces that
show exactly where each action was dispatched. Capturing the traces can add a bit of overhead,
so the DevTools Extension allows users to configure whether action stack traces are captured by
setting the 'trace' argument. If the DevTools are enabled by passing true or an object, then
configureStore will default to enabling capturing action stack traces in development mode
only.
preloadedState
enhancers
An optional array of Redux store enhancers, or a callback function to customize the array of
enhancers.
If defined as an array, these will be passed to the Redux compose function, and the combined
enhancer will be passed to createStore .
https://redux-toolkit.js.org/api/configureStore 4/7
11/13/23, 4:43 PM configureStore | Redux Toolkit
If defined as a callback function, it will be called with the existing array of enhancers without the
DevTools Extension (currently [applyMiddleware] ), and should return a new array of
enhancers. This is primarily useful for cases where a store enhancer needs to be added in front
of applyMiddleware , such as redux-first-router or redux-offline .
Usage
Basic Example
TypeScript JavaScript
Full Example
https://redux-toolkit.js.org/api/configureStore 5/7
11/13/23, 4:43 PM configureStore | Redux Toolkit
// file: store.ts
import { configureStore } from '@reduxjs/toolkit'
const reducer = {
todos: todosReducer,
visibility: visibilityReducer,
}
const preloadedState = {
todos: [
{
text: 'Eat food',
completed: true,
},
{
text: 'Exercise',
completed: false,
},
],
visibilityFilter: 'SHOW_COMPLETED',
}
https://redux-toolkit.js.org/api/configureStore 6/7
11/13/23, 4:43 PM configureStore | Redux Toolkit
https://redux-toolkit.js.org/api/configureStore 7/7