configureStore
configureStore
configureStore
A friendly abstraction over the standard Redux createStore
function that adds good defaults to the store setup for a better development experience.
Parameters
configureStore
accepts a single configuration object parameter, with the following options:
reducer
reducer
If this is a single function, it will be directly used as the root reducer for the store.
If it is an object of slice reducers, like {users : usersReducer, posts : postsReducer}
, configureStore
will automatically create the root reducer by passing this object to the Redux combineReducers
utility.
middleware
middleware
An optional array of Redux middleware functions
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.
Alternately, you may pass a callback function that will receive getDefaultMiddleware
as its argument, and should return a middleware array. This lets you skip importing getDefaultMiddleware
separately. If using TypeScript, prefer using this syntax, as we provide a more strongly-typed version of getDefaultMiddleware
that will correctly retain the types of the provided middleware when constructing the store.
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
devTools
If this is a boolean, it will be used to indicate whether configureStore
should automatically enable support for the Redux DevTools browser extension.
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
.
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.
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
preloadedState
An optional initial state value to be passed to the Redux createStore
function.
enhancers
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
.
This should not include applyMiddleware()
or the Redux DevTools Extension composeWithDevTools
, as those are already handled by configureStore
.
Example: enhancers: [offline]
will result in a final setup of [applyMiddleware, offline, devToolsExtension]
.
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
.
Example: enhancers: (defaultEnhancers) => [offline, ...defaultEnhancers]
will result in a final setup of [offline, applyMiddleware, devToolsExtension]
.
Usage
Basic Example
Full Example
Last updated