Connecting the Scoreboard Container to Redux

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