The Provider Component

The Provider Component

Our goal is to have a heading that depicts the actual balance, and two buttons that for now the will make a deposit of 50 dollars, or a withdraw of 50 dollars. And we will use redux for that. Every button will be in a different component and the heading will be on a component on it's own.

So all components will directly connect with the state object in the redux.js file and make changes there, and the heading will pull any changes. How? Let's see.

First of all we need to wrap all of our application components under the same shelter. And to define that all of them from now they will have a centralized state. Thus, we need to go to our index.js file and inside the ReactDOM.render function to wrap the <App /> component, with the <Provider />  component.

The Provider component, comes from the react-redux module and accepts a prop named store, we set this equal to the store variable we have created from the redux.js file (export it from there, and import it to the index.js) exactly as shown above. 

At the end, your index.js file should look something like the code above.