# 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: ```ts type ConfigureEnhancersCallback = ( defaultEnhancers: StoreEnhancer[] ) => StoreEnhancer[] interface ConfigureStoreOptions< S = any, A extends Action = AnyAction, M extends Middlewares = Middlewares > { /** * 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 | ReducersMapObject /** * An array of Redux middleware to install. If not supplied, defaults to * the set of middleware returned by `getDefaultMiddleware()`. */ middleware?: ((getDefaultMiddleware: CurriedGetDefaultMiddleware) => 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 `reducer`), * this must be an object with the same shape as the reducer map keys. */ preloadedState?: DeepPartial /** * 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 } function configureStore( options: ConfigureStoreOptions ): EnhancedStore ``` #### `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](https://redux.js.org/api/combinereducers). #### `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](/my-docs/redux/repos/redux-toolkit/docs/api/getdefaultmiddleware.md). #### `devTools` If this is a boolean, it will be used to indicate whether `configureStore` should automatically enable support for [the Redux DevTools browser extension](https://github.com/zalmoxisus/redux-devtools-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`](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig) 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](https://github.com/zalmoxisus/redux-devtools-extension/blob/d4ef75691ad294646f74bca38b973b19850a37cf/docs/Features/Trace.md) 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` An optional initial state value to be passed to the Redux `createStore` function. #### `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](https://redux.js.org/api/compose), 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 ```ts // file: reducers.ts noEmit import { Reducer } from '@reduxjs/toolkit' declare const rootReducer: Reducer<{}> export default rootReducer // file: store.ts import { configureStore } from '@reduxjs/toolkit' import rootReducer from './reducers' const store = configureStore({ reducer: rootReducer }) // The store now has redux-thunk added and the Redux DevTools Extension is turned on ``` #### Full Example ```ts // file: todos/todosReducer.ts noEmit import { Reducer } from '@reduxjs/toolkit' declare const reducer: Reducer<{}> export default reducer // file: visibility/visibilityReducer.ts noEmit import { Reducer } from '@reduxjs/toolkit' declare const reducer: Reducer<{}> export default reducer // file: store.ts import { configureStore } from '@reduxjs/toolkit' // We'll use redux-logger just as an example of adding another middleware import logger from 'redux-logger' // And use redux-batch as an example of adding enhancers import { reduxBatch } from '@manaflair/redux-batch' import todosReducer from './todos/todosReducer' import visibilityReducer from './visibility/visibilityReducer' const reducer = { todos: todosReducer, visibility: visibilityReducer, } const preloadedState = { todos: [ { text: 'Eat food', completed: true, }, { text: 'Exercise', completed: false, }, ], visibilityFilter: 'SHOW_COMPLETED', } const store = configureStore({ reducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger), devTools: process.env.NODE_ENV !== 'production', preloadedState, enhancers: [reduxBatch], }) // The store has been created with these options: // - The slice reducers were automatically passed to combineReducers() // - redux-thunk and redux-logger were added as middleware // - The Redux DevTools Extension is disabled for production // - The middleware, batch, and devtools enhancers were composed together ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://bryan-guner.gitbook.io/my-docs/redux/repos/redux-toolkit/docs/api/configurestore.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.