Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire 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.
- In the 'actiontypes/player.js' file, add and export a new action for
- Define a reducer that will interpret the
SELECT_PLAYERaction and produce a new state for the playerDetail data
- In 'reducers/player.js', in the
switchblock, set the newly added player’s
createdvalue to the current date
- Add a
switchcase for the new
SELECT_PLAYERaction type. You'll need to set the
selectedPlayerIndexto the value passed in -- for example, with
- In the
switchcase, set the player's
updatedvalue to the current date
- In 'actions/player.js', create the action creator for the
selectPlayeraction. The new action creator should take an index argument and generate an action object with a type of
SELECT_PLAYERand provide the index as the action metadata.
- In the Scoreboard component, don't forget to update the
mapStateToPropsmethod to account for the
selectedPlayerIndexand, in the
- Add a new bound action creator for the
- Use the index to pull out just the
playersarray if the
selectedPlayerIndexis not -1 (a conditional would work great for this)
- Pass the
selectPlayerbound action creator to the player component and, in the return statement, the prop provided to
PlayerDetailshould be the
- In the new
PlayerDetailcomponent, use the data being passed via the
selectedPlayerprop to display the name, score, created, and updated data, if the
selectedPlayerprop 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
onClickfor a player that invokes the
selectPlayerbound action creator
- The function you write should provide the index of the player as an argument -- similar to the
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
comfortable with the basics of Redux.
Now mastering when to use Redux takes a lot more practice,
but we have to start with the basics.
So now it's your turn to use the skills, you learn in this course
to add a new feature to the scoreboard app using React and Redux.
Let's have a look at where you're going to build.
In this challenge,
you're going to add a player detail component to the scoreboard app.
I've already included some code to get you started so to start.
You'll need to download the project files for this challenge and
run N-P-N install to install all the dependencies.
I've posted the link to the files in the teacher's notes.
So the new player detail component should display a player's name, score,
the date when the player was added to the scoreboard,
as well as the date when the player score was updated.
And this information should appear down here in
the player detail component whenever a user clicks on a player in the scoreboard.
So for example when I click on Andrew, we see Andrew Chalkley,
score 20, created on November 9, 2016 and updated November 10, 2016.
Now if you update Andrew's score, you see the score and
the player detail component updated as well, and
the updated date changes to 11/15/2016, the current date.
And when you add a player to the score board and click on the new player,
you'll see the score, created date, and no updated value yet but
once you update the new player score it changes to the current date.
In the project files, I've already included a player detail component with
some of the code to get you started, so this is a pure component that's going
to provide the currently selected players information.
And over in the producer's player digest file, you'll notice that
the initial state is a little different, it has some extra data in it.
So the initial state constant is now an object containing players array and
in the player's array the player objects have new data for
the created and updated date.
That will display in the player detail component and
I just added some placeholder dates for the initial state.
Then below the players array, I added a separate field for
tracking the currently selected player index you see.
You'll need to use the selected player index to pass the correct player or
the player that was clicked to the player detail component.
Then, you'll use what you learn about redux like an action type reducer and
bound action creator to handle the selected player data.
And display it in the player detail component so now, let's walk through
the steps you'll need to take in order to implement this feature.
I've also posted the steps in the teacher's notes,
so first, in the action types player.js file.
You'll need to add and export a new action for
select the player just like you did for these three.
Then you'll define a reducer that will interpret the select player action and
produce a new state for the player detail data.
So back in the reducer file down in the add player switch block you'll need to set
Then you'll add a new switch case for the new select Select player action type and
in this new block you'll need to set the selected player index
to the value being passed in.
So for example you can do it with action.index.
And finally, in the UPDATE_PLAYER_SCORE switch case,
you also need to set the player's updated value to the current date and
you can do things a little different if you like.
So for example, I'm just displaying a date for the Created and
Updated values but you could also display a time for these.
Keep in mind that since the initial player data is now being defined as an object,
containing a player's array.
And a selected player index field outside that array, you'll need to make a few
changes to the way you produce a new state in the reducer file switch block.
So for example, for the add player, remove player and update player score cases
you'll want to update just the players array data when returning a new state.
So you'll make a copy of the existing state for both players and
selected player index and change just the player's data.
Next over in the actionsPlayer.js file you'll create the action creator for
the select player action just like you did earlier.
So the new action creator should take an index argument and
generate an action object with a type of select player.
And provide the index as the action metadata and over in scoreboard.js
Don't forget to update the map state to props method to account for
the selected player index, and up in the render method.
You're going to wanna pull selected player index off this stop props,
so you'll add that here.
Then right below you'll add a new bound action creator for
the select player action creator so just like these three here.
the index to pull out just the selected player
from the player's rate if the selected player index is not negative one.
Then, right below you'll pass the select player bound action creator
to the player component, and the return statement the prop
provided to the playerDetail component should be the selected player object.
All right, so back in the new player detail component you're going to use
the data being passed via the selected player prop to pass the name score and
the created and updated data, if the selected player prop is being passed.
Otherwise, it should display the paragraph click on a player to see more details and
again, when you click on a player, it should display the details from that
player down here in the player detail component.
So over in the player digest component, you'll devise a way to detect
an on click for a player that invokes the select player bound action creator.
And that function you write should provide the index of the player as an argument, so
it's going to be very similar to the On Click for remove player.
And finally, don't forget to update your prop validation for
select player and scoreboard RTS and the player component.
And make sure you also have prop validation on the player info coming into
the new player detail component.
This extension to the scoreboard app is a great example of a real purpose use case
So good luck, have fun, and in the next video,
I'll walk you through the methods I used to implement this feature.
You need to sign up for Treehouse in order to download course files.Sign up