index.js
file in which we created our store: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.react-redux
connect
, the store is available to our components.dispatch
function; enhancers add extra functionality to the Redux store.redux-thunk
index.js
.redux-thunk
plus our loggerMiddleware
and monitorReducerEnhancer
, plus two extra functions provided by Redux: applyMiddleware
and compose
.applyMiddleware
to create a store enhancer which will apply our loggerMiddleware
and the thunkMiddleware
to the store's dispatch function.compose
to compose our new middlewareEnhancer
and our monitorReducerEnhancer
into one function.createStore
. To use multiple enhancers, you must first compose them into a single larger enhancer, as shown in this example.composedEnhancers
function into createStore
as its third argument. Note: the second argument, which we will ignore, lets you preloaded state into the store.index.js
can quickly make it hard to maintain, because the logic is not cleanly organised.configureStore
configureStore
function which encapsulates our store creation logic, which can then be located in its own file to ease extensibility.index.js
to look like this:configureStore
function looks like this:middlewares
and enhancers
are defined as arrays, separate from the functions which consume them.preloadedState
variable is passed through to createStore
in case we want to add this later.createStore
function easier to reason about - each step is clearly separated, which makes it more obvious what exactly is happening.redux-devtools-extension
integration.compose
function which we imported from redux
, and replace it with a new composeWithDevTools
function imported from redux-devtools-extension
.configureStore
function:if
statement, so it only runs when our app is not in production mode, and only if the module.hot
feature is available.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.index.js
to hot reload any changes to our React components:renderApp
function, which we now call to re-render the app.