In-Class exercise: Redux

The goal for this exercise is to change the People app to use Redux for maintaining all state.

  • We'll be using the following GitHub project:
    1. If you haven't yet already cloned that project, follow the instructions.
    2. If you have already cloned that project:
      1. Pull the latest changes (git pull from terminal, or Git/Pull... menu from WebStorm).
      2. Checkout the specified branch above
    3. Do an npm install of the redux and react-redux packages.

      Hint: you can add an install-dependencies script in package.json: 

       
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "install-dependencies": "npm install redux react-redux"
},
      and then run the npm script install-dependencies
    4. Determine the structure of your new global state. How does the application currently use useState?
    5. Start without any actions yet. Create:
      1. an initial state constant,
      2. a rootReducer that takes a state and an action and just returns the passed-in state.
      3. a store (created by createStore)
      4. a Provider surrounding your App component
    6. Remove existing code that uses useState:
      • To read state, use useSelector
      • To change state, instead of calling set... or calling a parent's callback function, dispatch an action.
      • Update the rootReducer to actually return the new state given an action.
      Hint: When you are done, there should be no callback functions passed to children.
    7. Modify the application so that the Person component no longer receives an isSelected property from its parent but instead retrieves that information from the store.
    8. Challenge: Support multiple-selection. Shift-clicking on a row should toggle its state.