This course will be retired on April 12, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Now we're going to wire up our Scoreboard container to Redux! We'll use a react-redux helper method called connect to subscribe to specific reducer changes, then inject those state changes as props into our app container.
New Terms
Bound Action Creator: An action creator that generates and action and is immediately dispatched to the Redux store.
Further Reading
In the previous video we created a Redux
store and provided it to our application.
0:00
But at this point there are no
containers that are connected.
0:04
Which means that we cannot take advantage
of any of the Redux elements we
0:07
implemented.
0:10
That means our application can't
invoke any of the actions we wrote and
0:12
also that the store will
subsequently never be updated.
0:16
Therefore, in this video,
we're going to connect our scoreboard
0:19
container to the store we created
in the previous video, and
0:22
finalize a few other Redux related
items for container as well.
0:25
So, let's jump into our scoreboard
container and connect it to Redux.
0:29
Okay, so in order to finalize our
scoreboard container we first need to
0:33
connect to Redux.
0:37
Fortunately, react Redux provides
a helper method called connect
0:38
that provides a way to subscribe to
specific parts of the Redux store.
0:41
So let's import that first By
opening up scoreboard.js and
0:45
up top right below the react import
add import connect from react redux,
0:50
Our connect method will take one
argument a function that acts as a state
0:59
to props translator.
1:04
Now, a state to props translator
will allow our container component
1:06
to take any state data it passes and
convert it to profs data.
1:11
So, all the way at the bottom of the file.
1:15
I'll write a function
named map state to props
1:17
In our case the state to props function
will take the player state data and
1:25
assign it to a prop value called players.
1:30
This will return an object
that gets merged
1:34
into the scoreboard components props.
1:37
To do that I'll modify how we're
exporting our scoreboard class.
1:39
So, in the class definition
delete export default, so
1:43
that it's just class
scoreboard extends component.
1:48
Then I'll add an export statement at
the bottom of the file and this time it's
1:51
going to be a little different than
any export we've written so far.
1:55
So let's type export default
followed by the connect method
1:59
then we'll pass it mapStateToProps
followed by a set of parentheses and
2:05
inside parentheses will pass Scoreboard.
2:10
So, let's take a minute
to look at this code.
2:14
You'll notice that connect takes the
mapStateToProps function we wrote earlier.
2:16
But what does Scoreboard
in parentheses here mean?
2:23
Well, fortunately it's fairly
straightforward to explain.
2:27
The first set of parentheses contains
the function we want to use to transform
2:30
state to props and the second set of
parenthesis contains the container.
2:35
We want to connect to read,
in this case our Scoreboard container.
2:39
So, what this does is it subscribes
scoreboard to any changes in state or
2:43
any Redux store updates and
whenever that occurs our map state to
2:49
perhaps function is invoked and the result
is passed as a prop to Scoreboard.
2:54
In this case any time our
underlying player state changes,
2:58
it will be mapped to
a property called players.
3:02
That is injected into our Scoreboard
container making it available to any
3:05
downstream components.
3:09
I know that from a syntax perspective the
double parentheses may look strange and
3:11
you may be wondering about the code
behind the connect method.
3:15
So, if you're interested in learning more
be sure to check out the teacher's notes
3:18
for this video.
3:21
All right, so we've connected our
Scoreboard container to redux.
3:21
But now,
we need to add prop validation for
3:25
the player's prop defined in
our mapStateToProps function.
3:27
We can do this by importing
prop types from react and
3:31
now let's clear out everything
inside our Scoreboard class.
3:35
Except for the render method.
3:38
And then we'll add our prop types
to the top of the class definition.
3:44
Now the final thing we need to do to
scoreboard is update its render method.
3:58
This means passing the appropriate
action creators and
4:02
player data to the respective components.
4:05
So, in order to provide components
with a method for taking actions.
4:08
We'll need to make use of
a helper method provided by redux
4:11
called BindActionCreators.
4:14
In this method we'll construct what's
known as a bound action creator.
4:16
A bound action creator is an action
creator that when invoked,
4:20
will also be dispatched.
4:25
It's a useful way for packaging up action
creators into ready to use method.
4:26
Eliminating the need to pass dispatch
down to every child component.
4:30
For instance,
4:34
if we did not bind our action creators
before passing them as props,
4:35
we would have to supply the action creator
and dispatch from the Scoreboard container
4:40
all the way down to the component that
eventually invokes the action creator.
4:44
The problem is that every component that
needs to pass the action creator now
4:48
needs to make sure that it's
supplying dispatch as well.
4:53
The end result is a much cleaner way for
components to invoke an action.
4:55
And dispatch it all at once without
having to add a dispatch prop.
4:59
So, in our case we'll be
providing bound action creators
5:03
to the components that will need to
take actions within our application.
5:06
The player, counter and
add player form components.
5:10
To better understand the concept of bound
action creators, let's implement them and
5:14
then we'll take a minute to
go into a little more detail.
5:18
So in order to make use
of bind action creators
5:20
let's import it at the top
of our file from Redux.
5:23
And let's also import the action creators
that we wrote in the last stage.
5:33
And call them PlayerActionCreators,
5:37
So now, the first thing we'll need
to do is extract dispatch and
5:49
players from our props using
the destructuring assignment.
5:52
So, in the render method
had const- Dispatch
5:56
players equals the star props.
6:01
Then right below we'll create 3
bound action creators add player,
6:07
remove player and update player score.
6:12
So, first const add player-
6:15
Then const remove player and
const update player score.
6:21
And to create the actual bound action
creators we'll invoke the bind
6:32
action creators method for each of the
three action creators we defined earlier.
6:37
First for add player will say add
player equals bindActionCreators and
6:42
then will pass and
PlayerActionCreators at player and
6:49
a second argument of dispatch then for
remove player I'll go ahead and
6:56
copy the bind action creators
method you just wrote.
7:01
I'll change it to
PlayerActionCreators.RemovePlayer.
7:05
I'll do the same for
7:07
update player score placed in
the bind action creators method and
7:11
change it to
PlayerActionCreators.UpdatePlayerScore.
7:15
So, the thing to note here is that
7:19
bind action creators takes
dispatch ss its second argument.
7:24
This ensures that when the action
creator is invoked it's also dispatched.
7:29
So now, the constants we declared
are in a ready to use state
7:33
when they're passed to the components.
7:37
So, next in the render method and
right below our constance.
7:39
We're going to iterate over the players
and create a player component for
7:43
each player.
7:46
And now, we'll add the player component.
7:55
And inside will say index equals index,
8:02
name equals player.name and
8:07
score equals player.score and
8:12
will add a key prop with
key goals player.name.
8:16
Now, you may have noticed a slight
deviation from the reactor basics course
8:24
here because we're no longer inlining
the removed player or update player score
8:28
calls using the index provided to us in
the map method as you can see down here.
8:32
Now, this is actually just
a stylistic choice and
8:38
has no real major impact
on the application.
8:41
Now, we'll pass the required property
data and bound action creator methods.
8:44
For player we'll need to pass update
player score and remove player.
8:49
So right below the key prop,
we'll add update player score
8:53
equals update player score and
remove player equals remove player.
8:58
Finally, in the return
statement let's provide
9:08
the same players Redux data
to the header component.
9:11
So here in the header
components player prop.
9:16
Let's replace this.state.players
with players and
9:19
now we can clear out everything
inside this players div.
9:24
And to render the player's
components we generated,
9:31
add playerComponents
inside the player's div.
9:34
And to provide the AddPlayer ban
creator to the AddPlayerForm component,
9:40
replace the on add prop
with an AddPlayer prop and
9:47
the value for this will be AddPlayer.
9:51
And now, our score board is all set.
9:56
I know that was a lot of ground to cover
but we still need to update our player
9:58
counter and AddPlayer form components to
use the updated props that we provided
10:02
in this video, and
we'll do just that coming up next.
10:06
You need to sign up for Treehouse in order to download course files.
Sign up