Learning Redux

Using <Provider>

In our App component, we pass the Redux store manually to each connected component. While this method works, it is a bit tedious and might get complicated when we have to pass down the store over multiple levels of components.

React-Redux provides a <Provider> component, which passes the Redux store down to all child components (even deeply nested ones), via React context.

Edit the src/components/App.jsx file:

1. Add an import for the Provider component.

import { Provider } from 'react-redux'

2. Then, wrap the root <div> of the App component with the <Provider> component, passing the store to it:

const App = ({ store }) =>  <Provider store={store}>    <div>      ...    </div>  </Provider>

3. Finally, we can get rid of the manual passing of ...