Skip to Content
Learn
The React Redux Library
The <Provider> Component

Now that the react-redux library is installed, it is time to start the one-way data flow by giving the top-level <App> component access to the Redux store.

The <Provider> component from the react-redux library gives the components of an application access to the Redux store without the need to pass the store directly to the React components through props. To implement this, wrap the <Provider> component around the top-level component and pass store through the store prop of the <Provider>:

import React from 'react'; import ReactDOM from 'react-dom'; import { App } from './app/App.js'; import { store } from './app/store.js'; import { Provider } from 'react-redux' ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById("root") );

This example demonstrates:

  • Importing Provider from react-redux.
  • Wrapping the <Provider> component around the root <App /> component.
  • Passing the store through the <Provider> component’s store prop.

Before moving on to the instructions, it is important to note that ReactDOM.render() is no longer inside a render() function and therefore nothing is subscribed to changes in the Redux store. This is something you will address in the next few exercises. Like many improvements in the world, you sometimes have to break the process to make it better.

Instructions

1.

Before you can use the <Provider> component you must import it.

In the index.js file, create an import statement that retrieves the Provider component from react-redux.

2.

The next step is to insert the <Provider> component into the recipe application.

Inside ReactDOM.render(), wrap the top level component, <App> with the <Provider> component.

3.

With the <App> component now nested inside the <Provider> component, pass the imported Redux store through the <Provider> component store prop.

This begins the process of accessing data throughout the application components but you must do a couple more things to see any progress.

Folder Icon

Take this course for free

Already have an account?