So far, we’ve used createStore to create a new store, store.getState to get the state of the store, store.dispatch to dispatch actions that get processed by the reducer to alter the state, and finally subscribe to re-run our render function whenever the state changed.

We had to do all that by hand, but there’s a better alternative that simplifies this as well as adds many performance optimizations that prevents unnecessary re-renders. React Redux is the official binding of Redux for React. It provides a connect function that will replace the role of store.subscribe, reads from the Redux store’s state, and passes the relevant parts as props to the presentational components (for example, Input and Button). Let’s install it now:

$ yarn add react-redux

It works with React Redux like this:

• You wrap the root component of the application with the <Provider> component. This makes the Redux store available to every component within the app.
• Within each container component that needs to read from the state, you use the connect function to connect the component to the Redux store.