In the previous video we created a Redux store and provided it to our application.

But at this point there are no containers that are connected.

Which means that we cannot take advantage of any of the Redux elements we

implemented.

That means our application can't invoke any of the actions we wrote and

also that the store will subsequently never be updated.

Therefore, in this video, we're going to connect our scoreboard

container to the store we created in the previous video, and

finalize a few other Redux related items for container as well.

So, let's jump into our scoreboard container and connect it to Redux.

Okay, so in order to finalize our scoreboard container we first need to

connect to Redux.

Fortunately, react Redux provides a helper method called connect

that provides a way to subscribe to specific parts of the Redux store.

So let's import that first By opening up scoreboard.js and

up top right below the react import add import connect from react redux,

Our connect method will take one argument a function that acts as a state

to props translator.

Now, a state to props translator will allow our container component

to take any state data it passes and convert it to profs data.

So, all the way at the bottom of the file.

I'll write a function named map state to props

In our case the state to props function will take the player state data and

assign it to a prop value called players.

This will return an object that gets merged

into the scoreboard components props.

To do that I'll modify how we're exporting our scoreboard class.

So, in the class definition delete export default, so

that it's just class scoreboard extends component.

Then I'll add an export statement at the bottom of the file and this time it's

going to be a little different than any export we've written so far.

So let's type export default followed by the connect method

then we'll pass it mapStateToProps followed by a set of parentheses and

inside parentheses will pass Scoreboard.

So, let's take a minute to look at this code.

You'll notice that connect takes the mapStateToProps function we wrote earlier.

But what does Scoreboard in parentheses here mean?

Well, fortunately it's fairly straightforward to explain.

The first set of parentheses contains the function we want to use to transform

state to props and the second set of parenthesis contains the container.

We want to connect to read, in this case our Scoreboard container.

So, what this does is it subscribes scoreboard to any changes in state or

any Redux store updates and whenever that occurs our map state to

perhaps function is invoked and the result is passed as a prop to Scoreboard.

In this case any time our underlying player state changes,

it will be mapped to a property called players.

That is injected into our Scoreboard container making it available to any

downstream components.

I know that from a syntax perspective the double parentheses may look strange and

you may be wondering about the code behind the connect method.

So, if you're interested in learning more be sure to check out the teacher's notes

for this video.

All right, so we've connected our Scoreboard container to redux.

But now, we need to add prop validation for

the player's prop defined in our mapStateToProps function.

We can do this by importing prop types from react and

now let's clear out everything inside our Scoreboard class.

Except for the render method.

And then we'll add our prop types to the top of the class definition.

Now the final thing we need to do to scoreboard is update its render method.

This means passing the appropriate action creators and

player data to the respective components.

So, in order to provide components with a method for taking actions.

We'll need to make use of a helper method provided by redux

called BindActionCreators.

In this method we'll construct what's known as a bound action creator.

A bound action creator is an action creator that when invoked,

will also be dispatched.

It's a useful way for packaging up action creators into ready to use method.

Eliminating the need to pass dispatch down to every child component.

For instance,

if we did not bind our action creators before passing them as props,

we would have to supply the action creator and dispatch from the Scoreboard container

all the way down to the component that eventually invokes the action creator.

The problem is that every component that needs to pass the action creator now

needs to make sure that it's supplying dispatch as well.

The end result is a much cleaner way for components to invoke an action.

And dispatch it all at once without having to add a dispatch prop.

So, in our case we'll be providing bound action creators

to the components that will need to take actions within our application.

The player, counter and add player form components.

To better understand the concept of bound action creators, let's implement them and

then we'll take a minute to go into a little more detail.

So in order to make use of bind action creators

let's import it at the top of our file from Redux.

And let's also import the action creators that we wrote in the last stage.

And call them PlayerActionCreators,

So now, the first thing we'll need to do is extract dispatch and

players from our props using the destructuring assignment.

So, in the render method had const- Dispatch

players equals the star props.

Then right below we'll create 3 bound action creators add player,

remove player and update player score.

So, first const add player-

Then const remove player and const update player score.

And to create the actual bound action creators we'll invoke the bind

action creators method for each of the three action creators we defined earlier.

First for add player will say add player equals bindActionCreators and

then will pass and PlayerActionCreators at player and

a second argument of dispatch then for remove player I'll go ahead and

copy the bind action creators method you just wrote.

I'll change it to PlayerActionCreators.RemovePlayer.

I'll do the same for

update player score placed in the bind action creators method and

change it to PlayerActionCreators.UpdatePlayerScore.

So, the thing to note here is that

bind action creators takes dispatch ss its second argument.

This ensures that when the action creator is invoked it's also dispatched.

So now, the constants we declared are in a ready to use state

when they're passed to the components.

So, next in the render method and right below our constance.

We're going to iterate over the players and create a player component for

each player.

And now, we'll add the player component.

And inside will say index equals index,

name equals player.name and

score equals player.score and

will add a key prop with key goals player.name.

Now, you may have noticed a slight deviation from the reactor basics course

here because we're no longer inlining the removed player or update player score

calls using the index provided to us in the map method as you can see down here.

Now, this is actually just a stylistic choice and

has no real major impact on the application.

Now, we'll pass the required property data and bound action creator methods.

For player we'll need to pass update player score and remove player.

So right below the key prop, we'll add update player score

equals update player score and remove player equals remove player.

Finally, in the return statement let's provide

the same players Redux data to the header component.

So here in the header components player prop.

Let's replace this.state.players with players and

now we can clear out everything inside this players div.

And to render the player's components we generated,

add playerComponents inside the player's div.

And to provide the AddPlayer ban creator to the AddPlayerForm component,

replace the on add prop with an AddPlayer prop and

the value for this will be AddPlayer.

And now, our score board is all set.

I know that was a lot of ground to cover but we still need to update our player

counter and AddPlayer form components to use the updated props that we provided

in this video, and we'll do just that coming up next.