Skip to main content

Lab 23 Redux: Installation & Configuration


  • Install Redux and related packages
  • Configure Redux


Install Redux

  1. Open a command prompt (Windows) or terminal (Mac).
  2. Change the current directory to working\keeptrack.
  3. Run one of the following sets of commands:


    npm install redux react-redux redux-devtools-extension redux-thunk


    yarn add redux react-redux redux-devtools-extension redux-thunk
  4. After the installs finish, open the \package.json file and quickly verify the packages were added to the dependencies and devDependencies.

Configure Redux

  1. Create the following file and configure Redux.


    import { createStore, applyMiddleware } from 'redux';
    import ReduxThunk from 'redux-thunk';
    import { composeWithDevTools } from 'redux-devtools-extension';
    import { combineReducers } from 'redux';

    const reducer = combineReducers({});

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

    //Thunk is middleware
    //DevTools is an enhancer (actually changes Redux)
    //applyMiddleware wraps middleware and returns an enhancer

    // to use only thunk middleware
    // const enhancer = compose(middlewareEnhancer);

    //to use thunk & devTools
    const enhancer = composeWithDevTools(middlewareEnhancer);

    const store = createStore(reducer, preloadedState, enhancer);
    return store;

    export const initialAppState = {};

    export const store = configureStore(initialAppState);
  2. Verify the application compiles.

You have completed Lab 23