index.jsfile in which we created our store:
createStorefunction, which returns a
storeobject. We then pass this object to the
Providercomponent, which is rendered at the top of our component tree.
connect, the store is available to our components.
dispatchfunction; enhancers add extra functionality to the Redux store.
monitorReducerEnhancer, plus two extra functions provided by Redux:
applyMiddlewareto create a store enhancer which will apply our
thunkMiddlewareto the store's dispatch function.
composeto compose our new
monitorReducerEnhancerinto one function.
createStore. To use multiple enhancers, you must first compose them into a single larger enhancer, as shown in this example.
createStoreas its third argument. Note: the second argument, which we will ignore, lets you preloaded state into the store.
index.jscan quickly make it hard to maintain, because the logic is not cleanly organised.
configureStorefunction which encapsulates our store creation logic, which can then be located in its own file to ease extensibility.
index.jsto look like this:
configureStorefunction looks like this:
enhancersare defined as arrays, separate from the functions which consume them.
preloadedStatevariable is passed through to
createStorein case we want to add this later.
createStorefunction easier to reason about - each step is clearly separated, which makes it more obvious what exactly is happening.
composefunction which we imported from
redux, and replace it with a new
composeWithDevToolsfunction imported from
ifstatement, so it only runs when our app is not in production mode, and only if the
module.hotfeature is available.
module.hot.acceptmethod to specify which module should be hot reloaded, and what should happen when the module changes. In this case, we're watching the
./reducersmodule, and passing the updated
store.replaceReducermethod when it changes.
index.jsto hot reload any changes to our React components:
renderAppfunction, which we now call to re-render the app.