Search⌘ K
Home
Courses
Practical Redux

Redux Setup

Explore the process of setting up a Redux store using createStore, applying middleware like redux-thunk, and combining reducers in a React project. Understand how to provide the store to the component tree with React-Redux's Provider and verify connectivity with a sample component. Learn to integrate Redux DevTools Extension for powerful debugging and state inspection during development.

We'll cover the following...

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 ...