# configuring-your-store
[**Redux**](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/index.html)
[Getting Started](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/getting-started.html)[Tutorial](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-1-overview-concepts.html)[API](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/api-reference.html)[FAQ](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq.html)[Best Practices](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/style-guide/style-guide.html)[GitHub](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/github.com/reduxjs/redux.html)[Need help?](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/getting-started.html#help-and-discussion)
๐
๐
Search
[**Redux**](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/index.html)
* [Getting Started](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/getting-started.html)
* [Tutorial](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-1-overview-concepts.html)
* [API](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/api-reference.html)
* [FAQ](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq.html)
* [Best Practices](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/style-guide/style-guide.html)
* [GitHub](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/github.com/reduxjs/redux.html)
* [Need help?](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/getting-started.html#help-and-discussion)
* [Introduction](#!)
* [Getting Started with Redux](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/getting-started.html)
* [Installation](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/installation.html)
* [Core Concepts](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/core-concepts.html)
* [Learning Resources](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/learning-resources.html)
* [Ecosystem](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/ecosystem.html)
* [Examples](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/examples.html)
* [Tutorials](#!)
* [Tutorials Index](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/index.html)
* [Quick Start](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/quick-start.html)
* [TypeScript Quick Start](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/typescript-quick-start.html)
* [Redux Essentials](#!)
* [Redux Overview and Concepts](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-1-overview-concepts.html)
* [Redux App Structure](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-2-app-structure.html)
* [Basic Redux Data Flow](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-3-data-flow.html)
* [Using Redux Data](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-4-using-data.html)
* [Async Logic and Data Fetching](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-5-async-logic.html)
* [Performance and Normalizing Data](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-6-performance-normalization.html)
* [Redux Fundamentals](#!)
* [Redux Overview](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-1-overview.html)
* [Redux Concepts and Data Flow](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-2-concepts-data-flow.html)
* [State, Actions, and Reducers](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-3-state-actions-reducers.html)
* [Store](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-4-store.html)
* [UI and React](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-5-ui-react.html)
* [Async Logic and Data Fetching](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-6-async-logic.html)
* [Standard Redux Patterns](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-7-standard-patterns.html)
* [Modern Redux with Redux Toolkit](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-8-modern-redux.html)
* [Recipes](#!)
* [Recipes: Index](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/recipe-index.html)
* [Configuring Your Store](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/configuring-your-store.html)
* [Usage With TypeScript](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/usage-with-typescript.html)
* [Migrating to Redux](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/migrating-to-redux.html)
* [Using Object Spread Operator](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/using-object-spread-operator.html)
* [Reducing Boilerplate](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/reducing-boilerplate.html)
* [Server Rendering](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/server-rendering.html)
* [Writing Tests](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/writing-tests.html)
* [Computing Derived Data](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/computing-derived-data.html)
* [Implementing Undo History](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/implementing-undo-history.html)
* [Isolating Redux Sub-Apps](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/isolating-redux-sub-apps.html)
* [Code Splitting](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/code-splitting.html)
* [Troubleshooting](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/troubleshooting.html)
* [Structuring Reducers](#!)
* [Structuring Reducers](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/structuring-reducers/structuring-reducers.html)
* [Prerequisite Concepts](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/structuring-reducers/prerequisite-concepts.html)
* [Basic Reducer Structure](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/structuring-reducers/basic-reducer-structure.html)
* [Splitting Reducer Logic](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/structuring-reducers/splitting-reducer-logic.html)
* [Refactoring Reducers Example](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/structuring-reducers/refactoring-reducer-example.html)
* [Using combineReducers](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/structuring-reducers/using-combinereducers.html)
* [Beyond combineReducers](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/structuring-reducers/beyond-combinereducers.html)
* [Normalizing State Shape](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/structuring-reducers/normalizing-state-shape.html)
* [Updating Normalized Data](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/structuring-reducers/updating-normalized-data.html)
* [Reusing Reducer Logic](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/structuring-reducers/reusing-reducer-logic.html)
* [Immutable Update Patterns](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/structuring-reducers/immutable-update-patterns.html)
* [Initializing State](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/md-docs/structuring-reducers/initializing-state.html)
* [Understanding Redux](#!)
* [Thinking in Redux](#!)
* [Motivation](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/understanding/thinking-in-redux/motivation.html)
* [Three Principles](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/understanding/thinking-in-redux/three-principles.html)
* [Glossary](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/understanding/thinking-in-redux/glossary.html)
* [History and Design](#!)
* [Prior Art](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/understanding/history-and-design/prior-art.html)
* [Middleware](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/understanding/history-and-design/middleware.html)
* [FAQ](#!)
* [FAQ Index](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq.html)
* [General](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/general.html)
* [Reducers](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/reducers.html)
* [Organizing State](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/organizing-state.html)
* [Store Setup](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/store-setup.html)
* [Actions](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/actions.html)
* [Immutable Data](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/immutable-data.html)
* [Code Structure](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/code-structure.html)
* [Performance](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/performance.html)
* [Design Decisions](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/design-decisions.html)
* [React Redux](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/react-redux.html)
* [Miscellaneous](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq/miscellaneous.html)
* [Style Guide](#!)
* [Style Guide: Best Practices](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/style-guide/style-guide.html)
* [API Reference](#!)
* [API Reference](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/api-reference.html)
* [createStore](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/createstore.html)
* [Store](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/store.html)
* [combineReducers](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/combinereducers.html)
* [applyMiddleware](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/applymiddleware.html)
* [bindActionCreators](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/bindactioncreators.html)
* [compose](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/compose.html)
* [Redux Toolkit](#!)
* [Redux Toolkit: Overview](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/redux-toolkit/overview.html)
## Configuring Your Store[#](#configuring-your-store)
In the ["Redux Fundamentals" tutorial](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-1-overview.html), we introduced the fundamental Redux concepts by building an example Todo list app. As part of that, we talked about [how to create and configure a Redux store](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-4-store.html).
We will now explore how to customise the store to add extra functionality. We'll start with the source code from ["Redux Fundamentals" part 5: UI and React](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/fundamentals/part-5-ui-react.html). You can view the source from this stage of the tutorial in [the example app repository on Github](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux-fundamentals-example-app/tree/checkpoint-5-uiAllActions.html), or [in your browser via CodeSandbox](https://github.com/bgoonz/Learning-Redux/blob/master/codesandbox.io/s/github/reduxjs/redux-fundamentals-example-app/tree/checkpoint-5-uiAllActions/index.html).
### Creating the store[#](#creating-the-store)
First, let's look at the original `index.js` file in which we created our store:
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './components/App'
const store = createStore(rootReducer)
render(
\
\
\,
document.getElementById('root')
)
Copy
In this code, we pass our reducers to the Redux `createStore` function, which returns a `store` object. We then pass this object to the `react-redux` `Provider` component, which is rendered at the top of our component tree.
This ensures that any time we connect to Redux in our app via `react-redux` `connect`, the store is available to our components.
### Extending Redux functionality[#](#extending-redux-functionality)
Most apps extend the functionality of their Redux store by adding middleware or store enhancers *(note: middleware is common, enhancers are less common)*. Middleware adds extra functionality to the Redux `dispatch` function; enhancers add extra functionality to the Redux store.
We will add two middlewares and one enhancer:
* The [`redux-thunk` middleware](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/reduxjs/redux-thunk.html), which allows simple asynchronous use of dispatch.
* A middleware which logs dispatched actions and the resulting new state.
* An enhancer which logs the time taken for the reducers to process each action.
**Install `redux-thunk`**[**#**](#install-redux-thunk)
npm install redux-thunk
Copy
**middleware/logger.js**[**#**](#middlewareloggerjs)
const logger = store => next => action => {
console.group(action.type)
console.info('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
console.groupEnd()
return result
}
export default logger
Copy
**enhancers/monitorReducer.js**[**#**](#enhancersmonitorreducerjs)
const round = number => Math.round(number \* 100) / 100
const monitorReducerEnhancer =
createStore => (reducer, initialState, enhancer) => {
const monitoredReducer = (state, action) => {
const start = performance.now()
const newState = reducer(state, action)
const end = performance.now()
const diff = round(end - start)
console.log('reducer process time:', diff)
return newState
}
return createStore(monitoredReducer, initialState, enhancer)
}
export default monitorReducerEnhancer
Copy
Let's add these to our existing `index.js`.
* First, we need to import `redux-thunk` plus our `loggerMiddleware` and `monitorReducerEnhancer`, plus two extra functions provided by Redux: `applyMiddleware` and `compose`.
* We then use `applyMiddleware` to create a store enhancer which will apply our `loggerMiddleware` and the `thunkMiddleware` to the store's dispatch function.
* Next, we use `compose` to compose our new `middlewareEnhancer` and our `monitorReducerEnhancer` into one function.
This is needed because you can only pass one enhancer into `createStore`. To use multiple enhancers, you must first compose them into a single larger enhancer, as shown in this example.
* Finally, we pass this new `composedEnhancers` function into `createStore` as its third argument. *Note: the second argument, which we will ignore, lets you preloaded state into the store.*
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { applyMiddleware, createStore, compose } from 'redux'
import thunkMiddleware from 'redux-thunk'
import rootReducer from './reducers'
import loggerMiddleware from './middleware/logger'
import monitorReducerEnhancer from './enhancers/monitorReducer'
import App from './components/App'
const middlewareEnhancer = applyMiddleware(loggerMiddleware, thunkMiddleware)
const composedEnhancers = compose(middlewareEnhancer, monitorReducerEnhancer)
const store = createStore(rootReducer, undefined, composedEnhancers)
render(
\
\
\,
document.getElementById('root')
)
Copy
### Problems with this approach[#](#problems-with-this-approach)
While this code works, for a typical app it is not ideal.
Most apps use more than one middleware, and each middleware often requires some initial setup. The extra noise added to the `index.js` can quickly make it hard to maintain, because the logic is not cleanly organised.
### The solution: `configureStore`[#](#the-solution-configurestore)
The solution to this problem is to create a new `configureStore` function which encapsulates our store creation logic, which can then be located in its own file to ease extensibility.
The end goal is for our `index.js` to look like this:
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import App from './components/App'
import configureStore from './configureStore'
const store = configureStore()
render(
\
\
\,
document.getElementById('root')
)
Copy
All the logic related to configuring the store - including importing reducers, middleware, and enhancers - is handled in a dedicated file.
To achieve this, `configureStore` function looks like this:
import { applyMiddleware, compose, createStore } from 'redux'
import thunkMiddleware from 'redux-thunk'
import monitorReducersEnhancer from './enhancers/monitorReducers'
import loggerMiddleware from './middleware/logger'
import rootReducer from './reducers'
export default function configureStore(preloadedState) {
const middlewares = \[loggerMiddleware, thunkMiddleware]
const middlewareEnhancer = applyMiddleware(...middlewares)
const enhancers = \[middlewareEnhancer, monitorReducersEnhancer]
const composedEnhancers = compose(...enhancers)
const store = createStore(rootReducer, preloadedState, composedEnhancers)
return store
}
Copy
This function follows the same steps outlined above, with some of the logic split out to prepare for extension, which will make it easier to add more in future:
* Both `middlewares` and `enhancers` are defined as arrays, separate from the functions which consume them.
This allows us to easily add more middleware or enhancers based on different conditions.
For example, it is common to add some middleware only when in development mode, which is easily achieved by pushing to the middlewares array inside an if statement:
if (process.env.NODE\_ENV === 'development') {
middlewares.push(secretMiddleware)
}
Copy
* A `preloadedState` variable is passed through to `createStore` in case we want to add this later.
This also makes our `createStore` function easier to reason about - each step is clearly separated, which makes it more obvious what exactly is happening.
### Integrating the devtools extension[#](#integrating-the-devtools-extension)
Another common feature which you may wish to add to your app is the `redux-devtools-extension` integration.
The extension is a suite of tools which give you absolute control over your Redux store - it allows you to inspect and replay actions, explore your state at different times, dispatch actions directly to the store, and much more. [Click here to read more about the available features.](https://github.com/bgoonz/Learning-Redux/blob/master/github.com/zalmoxisus/redux-devtools-extension.html)
There are several ways to integrate the extension, but we will use the most convenient option.
First, we install the package via npm:
npm install --save-dev redux-devtools-extension
Copy
Next, we remove the `compose` function which we imported from `redux`, and replace it with a new `composeWithDevTools` function imported from `redux-devtools-extension`.
The final code looks like this:
import { applyMiddleware, createStore } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import monitorReducersEnhancer from './enhancers/monitorReducers'
import loggerMiddleware from './middleware/logger'
import rootReducer from './reducers'
export default function configureStore(preloadedState) {
const middlewares = \[loggerMiddleware, thunkMiddleware]
const middlewareEnhancer = applyMiddleware(...middlewares)
const enhancers = \[middlewareEnhancer, monitorReducersEnhancer]
const composedEnhancers = composeWithDevTools(...enhancers)
const store = createStore(rootReducer, preloadedState, composedEnhancers)
return store
}
Copy
And that's it!
If we now visit our app via a browser with the devtools extension installed, we can explore and debug using a powerful new tool.
### Hot reloading[#](#hot-reloading)
Another powerful tool which can make the development process a lot more intuitive is hot reloading, which means replacing pieces of code without restarting your whole app.
For example, consider what happens when you run your app, interact with it for a while, and then decide to make changes to one of your reducers. Normally, when you make those changes your app will restart, reverting your Redux state to its initial value.
With hot module reloading enabled, only the reducer you changed would be reloaded, allowing you to change your code *without* resetting the state every time. This makes for a much faster development process.
We'll add hot reloading both to our Redux reducers and to our React components.
First, let's add it to our `configureStore` function:
import { applyMiddleware, compose, createStore } from 'redux'
import thunkMiddleware from 'redux-thunk'
import monitorReducersEnhancer from './enhancers/monitorReducers'
import loggerMiddleware from './middleware/logger'
import rootReducer from './reducers'
export default function configureStore(preloadedState) {
const middlewares = \[loggerMiddleware, thunkMiddleware]
const middlewareEnhancer = applyMiddleware(...middlewares)
const enhancers = \[middlewareEnhancer, monitorReducersEnhancer]
const composedEnhancers = compose(...enhancers)
const store = createStore(rootReducer, preloadedState, composedEnhancers)
if (process.env.NODE\_ENV !== 'production' && module.hot) {
module.hot.accept('./reducers', () => store.replaceReducer(rootReducer))
}
return store
}
Copy
The new code is wrapped in an `if` statement, so it only runs when our app is not in production mode, and only if the `module.hot` feature is available.
Bundlers like Webpack and Parcel support a `module.hot.accept` method to specify which module should be hot reloaded, and what should happen when the module changes. In this case, we're watching the `./reducers` module, and passing the updated `rootReducer` to the `store.replaceReducer` method when it changes.
We'll also use the same pattern in our `index.js` to hot reload any changes to our React components:
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import App from './components/App'
import configureStore from './configureStore'
const store = configureStore()
const renderApp = () =>
render(
\
\
\,
document.getElementById('root')
)
if (process.env.NODE\_ENV !== 'production' && module.hot) {
module.hot.accept('./components/App', renderApp)
}
renderApp()
Copy
The only extra change here is that we have encapsulated our app's rendering into a new `renderApp` function, which we now call to re-render the app.
### Simplifying Setup with Redux Toolkit[#](#simplifying-setup-with-redux-toolkit)
The Redux core library is deliberately unopinionated. It lets you decide how you want to handle everything, like store setup, what your state contains, and how you want to build your reducers.
This is good in some cases, because it gives you flexibility, but that flexibility isn't always needed. Sometimes we just want the simplest possible way to get started, with some good default behavior out of the box.
The [Redux Toolkit](https://github.com/bgoonz/Learning-Redux/blob/master/redux-toolkit.js.org/index.html) package is designed to help simplify several common Redux use cases, including store setup. Let's see how it can help improve the store setup process.
Redux Toolkit includes a prebuilt [`configureStore` function](https://github.com/bgoonz/Learning-Redux/blob/master/redux-toolkit.js.org/api/configureStore.html) like the one shown in the earlier examples.
The fastest way to use is it is to just pass the root reducer function:
import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducers'
const store = configureStore({
reducer: rootReducer
})
export default store
Copy
Note that it accepts an object with named parameters, to make it clearer what you're passing in.
By default, `configureStore` from Redux Toolkit will:
* Call `applyMiddleware` with [a default list of middleware, including `redux-thunk`](https://github.com/bgoonz/Learning-Redux/blob/master/redux-toolkit.js.org/api/getDefaultMiddleware.html), and some development-only middleware that catch common mistakes like mutating state
* Call `composeWithDevTools` to set up the Redux DevTools Extension
Here's what the hot reloading example might look like using Redux Toolkit:
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import monitorReducersEnhancer from './enhancers/monitorReducers'
import loggerMiddleware from './middleware/logger'
import rootReducer from './reducers'
export default function configureAppStore(preloadedState) {
const store = configureStore({
reducer: rootReducer,
middleware: \[loggerMiddleware, ...getDefaultMiddleware()],
preloadedState,
enhancers: \[monitorReducersEnhancer]
})
if (process.env.NODE\_ENV !== 'production' && module.hot) {
module.hot.accept('./reducers', () => store.replaceReducer(rootReducer))
}
return store
}
Copy
That definitely simplifies some of the setup process.
### Next Steps[#](#next-steps)
Now that you know how to encapsulate your store configuration to make it easier to maintain, you can [look at the Redux Toolkit `configureStore` API](https://github.com/bgoonz/Learning-Redux/blob/master/redux-toolkit.js.org/api/configureStore.html), or take a closer look at some of the [extensions available in the Redux ecosystem](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/ecosystem.html#debuggers-and-viewers).
Previous
ยซ Recipes: Index
Next
Usage With TypeScript ยป
* [Creating the store](#creating-the-store)
* [Extending Redux functionality](#extending-redux-functionality)
* [Problems with this approach](#problems-with-this-approach)
* [The solution: `configureStore`](#the-solution-configurestore)
* [Integrating the devtools extension](#integrating-the-devtools-extension)
* [Hot reloading](#hot-reloading)
* [Simplifying Setup with Redux Toolkit](#simplifying-setup-with-redux-toolkit)
* [Next Steps](#next-steps)
**Docs**
* [Getting Started](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/getting-started.html)
* [Tutorial](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/tutorials/essentials/part-1-overview-concepts.html)
* [FAQ](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/faq.html)
* [API Reference](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/api/api-reference.html)
**Community**
* [Reactiflux Discord](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/discord.com/invite/0ZcbPKXt5bZ6au5t.html)
* [Stack Overflow](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/stackoverflow.com/questions/tagged/redux.html)
* [Feedback](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/introduction/getting-started.html#help-and-discussion)
**More**
* [GitHub](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/official/github.com/reduxjs/redux.html)
* [](https://github.com/bgoonz/Learning-Redux/blob/master/www.netlify.com/index.html)
[](https://github.com/bgoonz/Learning-Redux/blob/master/DOCS/index.html)
Copyright ยฉ 2015โ2021 Dan Abramov and the Redux documentation authors.