Updating the Player, Counter and AddPlayerForm Components6:17 with Guil Hernandez and Beau Palmquist
In this video, we'll update the Player, Counter and Header components to use Redux. This will involve updating propTypes as needed, and making sure we wire up our event handlers to the proper action creator methods.
We're officially on the last leg of our journey. 0:00 All we have left to do is make sure that the appropriate components receive 0:03 the updated readouts props. 0:06 There's not too much code left to write and most of what we'll do will be 0:08 cleaning up existing code within our component definitions. 0:11 Specifically, we're going to make sure that our components can invoke 0:15 the appropriate actions. 0:18 And that the application behaves exactly like it did before but 0:20 with the added benefit of having Redux managing our player state changes. 0:23 So let's start by taking a look at the scoreboard container that we finished in 0:27 the previous video. 0:30 If we quickly review what we did here in scoreboard RTS, the key things to note 0:32 are that we're now subscribed to Redux state changes for our player data. 0:36 And our components are being passed the appropriate prop data but now we need to 0:40 update any of the components that have been impacted by these changes. 0:44 And those components are the player counter and add player form components. 0:48 So let's start with the player component and 0:53 the first thing we need to do is update the prop validation to include index. 0:56 So in Player.propTypes we'll add index, and 1:01 this propType will be a required number. 1:05 Now, I'll add the bound action creator methods remove player and 1:12 update player score, by replacing onRemove and 1:19 onScoreChange with removePlayer 1:24 PropTypes.func.isRequired and updatePlayerScore, 1:28 Whose PropType is also a required function. 1:38 Next in the return statement, we need to update the remove-player 1:44 onClick to use our remove player bound action creator. 1:48 So in the opening anchor tag I'll replace props.onRemove with an inline lambda or 1:52 error function to invoke the removed player bound action creator for 1:59 the appropriate player index. 2:03 Next we need to pass the index prop to the counter component, 2:06 so we'll say index = props.index. 2:14 And we'll pass the update player score bound action creator to 2:19 the counter component by replacing the onChange handler here 2:23 with updatePlayerScore = 2:28 props.updateplayerscore. 2:34 All right, so next as you would expect we now need to update the counter component 2:39 code to use the bound action creator we just passed to it as a prop. 2:44 So open up counter.js, we added the index and 2:48 the update player score bound action creator method as props to counter. 2:52 So we need to validate them, so 2:56 start by replacing on change with UpdatePlayerScore. 2:58 I'll say PropTypes.func.isRequired and 3:03 right below I'll type index proptypes.number.isRequired. 3:08 Next, there are two locations in the counter component, 3:19 where we need to invoke the update player score bound action creator. 3:22 One, when documenting the player score, and 3:26 one when incrementing the player score. 3:28 Once again, we'll make use of the in line error functions to invoke our bound 3:31 action creator method. 3:35 So in the onClicks error function we'll replace 3:37 the OnChange method with props.updatePlayerScore. 3:42 Where will pass props.index and minus 1, 3:47 then I'll go ahead and Copy this function here and for 3:52 our increment button I'll simply replace the value 3:57 here in onClick props, and change -1 to 1. 4:02 All right, so now there's only one more file to update that's impacted by our 4:06 Redux changes, the ad player form component. 4:11 So let's open up the file and once again we need to update prop-type validation, 4:14 this time for the add player bound action creator. 4:19 So I'm going to replace onAdd with addPlayer. 4:22 And the only other change we need to make inside this class is to change the on 4:28 submit event method to an addPlayer event method 4:31 that invokes the add player bound action creator. 4:36 So I'll replace onSubmit, with addPlayer, 4:40 then we'll change it to this.props.addplayer. 4:43 And now in the form element we need to make sure that the onSubmit is set to 4:51 the proper function, so instead of this.onSubmit it should be this.addPlayer. 4:56 So let's take a second to talk about why we didn't have to make any changes to our 5:04 header stats and stopwatch components. 5:09 So if we open up the file header.js you'll notice that it only takes 5:12 one prop of players which is passed along to the stats component. 5:16 In both cases, the data didn't change for 5:21 our player so, nothing needs to be done in either of those components. 5:24 And if we open up the Stopwatch component, 5:27 noticed that it doesn't even take any props and manages its own local state, so 5:30 it is not affected by our Redux changes at all. 5:34 All right, so that's it, we should now be ready to fire up our dev server and 5:38 make sure that everything is working correctly. 5:43 When you run the app you should see that everything behaves exactly like it did 5:45 before, including our hot reloading. 5:50 So great, 5:57 we've successfully updated our scoreboard to use Redux to manage our player data. 5:57 So now, you may be thinking well that's great that we've implemented Redux but 6:02 what benefits has that really provided me? 6:05 The benefits of implementing Redux is what will be exploring in the next video. 6:08 Build, learn how to install and 6:12 utilize Redux step tools to step through all the different states of your app. 6:13
You need to sign up for Treehouse in order to download course files.Sign up