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
In this challenge, you're going to use the skills learned in this course to add a new feature to the Scoreboard application, using React and Redux.
Challenge Steps
- In the 'actiontypes/player.js' file, add and export a new action for
SELECT_PLAYER
- Define a reducer that will interpret the
SELECT_PLAYER
action and produce a new state for the playerDetail data - In 'reducers/player.js', in the
ADD_PLAYER
switch
block, set the newly added player’screated
value to the current date - Add a
switch
case for the newSELECT_PLAYER
action type. You'll need to set theselectedPlayerIndex
to the value passed in -- for example, withaction.index
. - In the
UPDATE_PLAYER_SCORE
switch
case, set the player'supdated
value to the current date - In 'actions/player.js', create the action creator for the
selectPlayer
action. The new action creator should take an index argument and generate an action object with a type ofSELECT_PLAYER
and provide the index as the action metadata. - In the Scoreboard component, don't forget to update the
mapStateToProps
method to account for theselectedPlayerIndex
and, in therender
method, pullselectedPlayerIndex
offthis.props
- Add a new bound action creator for the
selectPlayer
action creator - Use the index to pull out just the
selectedPlayer
from theplayers
array if theselectedPlayerIndex
is not -1 (a conditional would work great for this) - Pass the
selectPlayer
bound action creator to the player component and, in the return statement, the prop provided toPlayerDetail
should be theselelectedPlayer
object - In the new
PlayerDetail
component, use the data being passed via theselectedPlayer
prop to display the name, score, created, and updated data, if theselectedPlayer
prop is being passed. Otherwise, it should display the paragraph "Click on a player to see more details". - When you click on a player, it should display the details for that player in the PlayerDetail component. In the Player component, you'll devise a way to detect an
onClick
for a player that invokes theselectPlayer
bound action creator - The function you write should provide the index of the player as an argument -- similar to the
onClick
forremovePlayer
Don't forget to update your prop validation for selectedPlayerIndex
in the Scoreboard component and selectPlayer
the Player component, and make sure you also have prop validation on the selectedPlayer
info coming into the new PlayerDetail component.
Using Redux for the simple scoreboard
application was a great way of getting
0:00
comfortable with the basics of Redux.
0:03
Now mastering when to use Redux
takes a lot more practice,
0:05
but we have to start with the basics.
0:09
So now it's your turn to use the skills,
you learn in this course
0:11
to add a new feature to the scoreboard
app using React and Redux.
0:14
Let's have a look at where
you're going to build.
0:18
In this challenge,
0:20
you're going to add a player detail
component to the scoreboard app.
0:21
I've already included some code
to get you started so to start.
0:25
You'll need to download the project
files for this challenge and
0:28
run N-P-N install to install
all the dependencies.
0:30
I've posted the link to the files
in the teacher's notes.
0:33
So the new player detail component
should display a player's name, score,
0:36
the date when the player was
added to the scoreboard,
0:40
as well as the date when
the player score was updated.
0:43
And this information
should appear down here in
0:45
the player detail component whenever a
user clicks on a player in the scoreboard.
0:49
So for example when I click on Andrew,
we see Andrew Chalkley,
0:54
score 20, created on November 9,
2016 and updated November 10, 2016.
0:59
Now if you update Andrew's score,
you see the score and
1:05
the player detail component
updated as well, and
1:10
the updated date changes to 11/15/2016,
the current date.
1:13
And when you add a player to the score
board and click on the new player,
1:19
you'll see the score, created date,
and no updated value yet but
1:24
once you update the new player score
it changes to the current date.
1:29
In the project files, I've already
included a player detail component with
1:34
some of the code to get you started, so
this is a pure component that's going
1:38
to provide the currently
selected players information.
1:43
And over in the producer's player
digest file, you'll notice that
1:46
the initial state is a little different,
it has some extra data in it.
1:50
So the initial state constant is now
an object containing players array and
1:55
in the player's array the player
objects have new data for
2:00
the created and updated date.
2:05
That will display in the player
detail component and
2:07
I just added some placeholder dates for
the initial state.
2:12
Then below the players array,
I added a separate field for
2:17
tracking the currently
selected player index you see.
2:21
You'll need to use the selected player
index to pass the correct player or
2:25
the player that was clicked to
the player detail component.
2:30
Then, you'll use what you learn about
redux like an action type reducer and
2:34
bound action creator to handle
the selected player data.
2:38
And display it in the player detail
component so now, let's walk through
2:42
the steps you'll need to take in
order to implement this feature.
2:46
I've also posted the steps
in the teacher's notes,
2:49
so first,
in the action types player.js file.
2:52
You'll need to add and
export a new action for
2:56
select the player just like you did for
these three.
2:59
Then you'll define a reducer that will
interpret the select player action and
3:03
produce a new state for
the player detail data.
3:07
So back in the reducer file down in the
add player switch block you'll need to set
3:10
the newly added players created value to
the current date with the javascript here.
3:16
Then you'll add a new switch case for the
new select Select player action type and
3:22
in this new block you'll need
to set the selected player index
3:27
to the value being passed in.
3:32
So for
example you can do it with action.index.
3:34
And finally,
in the UPDATE_PLAYER_SCORE switch case,
3:37
you also need to set the player's
updated value to the current date and
3:41
you can do things a little
different if you like.
3:45
So for example, I'm just displaying
a date for the Created and
3:48
Updated values but
you could also display a time for these.
3:52
Keep in mind that since the initial player
data is now being defined as an object,
3:56
containing a player's array.
4:01
And a selected player index field outside
that array, you'll need to make a few
4:03
changes to the way you produce a new
state in the reducer file switch block.
4:07
So for example, for the add player, remove
player and update player score cases
4:12
you'll want to update just the players
array data when returning a new state.
4:18
So you'll make a copy of the existing
state for both players and
4:22
selected player index and
change just the player's data.
4:26
Next over in the actionsPlayer.js file
you'll create the action creator for
4:30
the select player action
just like you did earlier.
4:35
So the new action creator should
take an index argument and
4:39
generate an action object
with a type of select player.
4:43
And provide the index as the action
metadata and over in scoreboard.js
4:47
Don't forget to update the map state
to props method to account for
4:52
the selected player index,
and up in the render method.
4:57
You're going to wanna pull selected
player index off this stop props,
5:02
so you'll add that here.
5:07
Then right below you'll add
a new bound action creator for
5:09
the select player action creator so
just like these three here.
5:13
And then we need to write some
javascript here that uses
5:17
the index to pull out
just the selected player
5:21
from the player's rate if the selected
player index is not negative one.
5:24
So a javascript conditional
would work great for that.
5:29
Then, right below you'll pass
the select player bound action creator
5:32
to the player component, and
the return statement the prop
5:37
provided to the playerDetail component
should be the selected player object.
5:41
All right, so back in the new player
detail component you're going to use
5:47
the data being passed via the selected
player prop to pass the name score and
5:52
the created and updated data, if
the selected player prop is being passed.
6:00
Otherwise, it should display the paragraph
click on a player to see more details and
6:05
again, when you click on a player,
it should display the details from that
6:09
player down here in
the player detail component.
6:14
So over in the player digest component,
you'll devise a way to detect
6:16
an on click for a player that invokes
the select player bound action creator.
6:22
And that function you write should provide
the index of the player as an argument, so
6:27
it's going to be very similar to
the On Click for remove player.
6:32
And finally, don't forget to
update your prop validation for
6:36
select player and scoreboard RTS and
the player component.
6:40
And make sure you also have prop
validation on the player info coming into
6:44
the new player detail component.
6:48
This extension to the scoreboard app is
a great example of a real purpose use case
6:51
for redux.
6:55
So good luck, have fun,
and in the next video,
6:56
I'll walk you through the methods
I used to implement this feature.
6:58
You need to sign up for Treehouse in order to download course files.
Sign up