Connecting components to an application state

So far, we have the reducer functions that handle creating a new application state, and the action creator functions that trigger our reducer functions. We still need to connect our React components to the Redux store. In this section, you'll learn how to use the connect() function to create a new version of your component that's connected to the Redux store.

Mapping state and action creators to props

The idea with Redux and React integration is that you tell Redux to wrap your component with a stateful component that has its state set when the Redux store changes. All we have to do is write a function that tells Redux how we want state values passed to our component as props. Additionally, we have to tell the component about any actions that it might want to dispatch.

Here is the general pattern that we'll follow when connecting components:

connect(
  mapStateToProps,
  mapDispatchToProps
)(Component);

Here's a breakdown of how...