Redux: What is Provider?

Today we are talking about Provider!

✨✨✨

Provider is a component given to us to use from the react-redux node package.

We use Provider in order to pass the store as an attribute. By passing the store as an attribute in the Provider component, we are avoiding having to store the store as props.

As we know, applications can be very complex and extensive, thus having many React components. Provider eases the pain of having to pass the store as props into each component. This ultimately dries our code, saves time, and eases readability.

Let's take a look at Provider in action:

//index.js

import { Provider } from "react-redux"

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider >,
  document.getElementById('root')
)

As you can see this is a small piece of code. Yet, it encompasses our entire project: every component and all of the state + props in our application.

See? I told you Provider dries up our code.

Now let me explain what is happening in this bit of code:

1. Import Provider component from the 'react-redux' node package.

2. Using ReactDOM.render() we pass in two (2) arguments:

   • Provider wrapping our top-level component 'App'.
   • the HTML element in which we are rendering the first argument.

3. The Provider component wraps our top-level component, so as to say "every child component of your App component will have access to the store".

4. We pass our "store" constant to a store attribute. (The creation of our store constant is not pictured).

💫💫💫

Vocabulary

• the store: given to us from Redux; it is the single location where an application's state is stored.
• Redux: a state management library.
• component: an individual unit of UI given to us by React -- helps to separate concerns + responsibility.
• props: data passed from parent component to child component in React.
• node package: contains all the files you need for a module.
• module: JS libraries with prewritten code that provides us with built in behaviors + methods.

💫Feel free to ask any questions💫
💫Continue the discussion below💫

✨Thanks For Reading!✨