Lab 23 Redux: Installation & Configuration

Objectives

• Install Redux and related packages
• Configure Redux

Steps

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

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

   Yarn

   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.

   src\state.js

   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