Add Redux to the React App

We'll take the plain React app from the previous lesson and add Redux to it, piece-by-piece.

Here we cover:
  • Creating a store with createStore
  • Writing a reducer
  • Dispatching actions
  • Using connect to feed data to a React component
  • Using the react-redux Provider to pass data through the app
  • How to write a mapStateToProps function

Code along with the video and try it out yourself!

Here is the before and after code for this lesson.

Extra Notes

The mapStateToProps function might seem a bit silly, since it's basically passing in all of the properties of state. Why not pass all of state directly?

In this case, that would work fine. (Give it a try! const mapState = state => state). It's good to get in the habit of writing a mapState function though because it's best if components don't know the internal shape of your Redux store. By keeping that knowledge of "where to find the data" in the mapState function,  that logic is centralized, making it easier to update if you end up changing the shape of your Redux state.