Redux Setup

Initial Redux Configuration

CRA gave us a basic application template to start with. We now need to set up the initial Redux store and reducers, make the store available to our component tree, and make sure that it’s being used. Let’s jump right in and walk through the pieces.

Commit 44a18c4: Add initial Redux configuration and sample component

First, we need to create our Redux store instance.

store/configureStore.js

import {createStore, applyMiddleware, compose} from "redux";

import thunk from "redux-thunk";

import rootReducer from "../reducers/rootReducer";

export default function configureStore(preloadedState) {
    const middlewares = [thunk];
    const middlewareEnhancer = applyMiddleware(...middlewares);

    const storeEnhancers = [middlewareEnhancer];
    
    const composedEnhancer = compose(...storeEnhancers);

    const store = createStore(
        rootReducer,
        preloadedState,
        composedEnhancer
    );

    return store;
}

I like to keep my store setup logic in a configureStore function that can be further improved as time goes on. I also try to keep the setup for each piece of the configuration process separate, so it’s easy to follow what’s ...