Skip to main content

✏️ Redux Help Queue, Project Refactor

Goals: Follow along with the weekend homework. Start by testing and writing reducers. Once your reducers are complete, incorporate React Redux into your projects.

Warm Up​

  • What is a reducer action? How are they important to reducers?
  • How do reducers work?
  • What happens when we pass a reducer as an argument to a Redux store?
  • Give an overview of the following three functions in Redux: dispatch(), setState() and subscribe().
  • How do actions, reducers, and the store all work together in Redux? Draw out the process on a whiteboard and refer to the weekend homework if necessary?
  • Why should we unit test reducers?
  • Walk through the benefits of React Redux. You should be able to give an overview of the store, the <Provider> component, the connect() function and mapStateToProps.

Code​

Redux Help Queue​

Work through the weekend lessons to update the Help Queue to use Redux. Test and write reducers first. Take the time to build the demonstration Redux application in the browser so you can see how Redux works on its own.

Redux Project Refactor​

Refactor one of the following projects from the React Fundamentals course section to use Redux for shared state:

  • Farmer's Market
  • Merch Site
  • Event Logger

Make sure to test and write reducers before you begin integrating Redux with your application.

Further Exploration​

If you finish the above projects with time to spare, work through upcoming homework.

Peer Code Review​

  • Redux successfully manages all shared state.
  • All Redux reducers are pure functions.
  • Jest is used to test all reducers.
  • Actions are successfully dispatched to specify changes to state.
  • Reducers receive and handle actions to correctly mutate the store's state.
  • Previous objectives and React best practices are followed.