[MUSIC]

Now, we're going to focus on fitting all of our redux pieces together.

So, first in this video we're going to implement the most

critical component of redux, the store.

This is done with the help of a react redux component called provider, that

takes the store will create and provide it to all connected container components.

The store is what will be used as the primary source of information for

our school work container.

The container will then be able to subscribe to state changes in the store

and pass that information to the components housed within it.

As a quick reminder, a redux store holds the entire application state.

It's a composition of all the reducers we've defined,

that then becomes one single state container for our application.

in the case of our scoreboard application, our store consists of only one reducer,

the player reducer.

So back in our project, let's open up index digests and

take a look at how it's currently constructed.

So you'll notice that all this file does currently is render

our scoreboard component at the root dom element.

So in order to provide a redux store to our application.

We'll create a store that's composed of our player reducer and

past that store to the reactor redux provider component.

To get started with creating our store,

we'll need to add a few imports to this file.

The first will import provider from react redux, like so.

Next we need to import a helper method from redux called createStore and the last

import we have is to the PlayerReducer file we created in the previous stage.

So using the utilities provided from these three imports,

we are now ready to create our store and provide it to the rest of the application.

But first we have to create a store.

So beneath the imports at const store = createSre and

in the create store method pass PlayerReducer.

In this case the create store method takes our PlayerReducer and

registers it with Redux.

This means that our PlayerReducer is now ready to participate in

the Redux pipeline.

And for more information about what create store does behind the scenes,

be sure to check out the teacher's notes.

All right, now that we have a store, the next thing to do is,

wrap our scoreboard component with the provider component, and

set the store property to the store we just created.

In the render method, we'll wrap the scoreboard component

with a provider where store = store and

right below the scoreboard component we'll add a closing provider tag.

So now you may be asking yourself what the provider component is actually doing under

the hood.

Well at this point, let's just say that by wrapping our application with the provider

component we've created a method for any container component to subscribe to Redux

data changes, which is essential for passing data down to other components.

And I've included more detailed information about provider

in the teacher's notes of this video.

Okay we now have the root of our application set up to use Redux.

But our application is still not using our Redux store yet.

So coming up in the next video will connect our school work container to Redux

package app or action creators and update the scoreboard containers render method.