Intro to Reducers

In the previous video, we identified that the player data 0:00 we manage in the scoreboard address file would be better managed in Redux. 0:03 Then we took our first steps towards Redux integration by defining the different 0:07 action types that will occur for our player data. 0:12 In Redux, an action returns a new state via what's called a reducer. 0:14 As you're about to learn, reducers are a big part of Redux and 0:19 they perform most of the work in Redux. 0:22 In our scoreboard application, the player data would make a good reducer. 0:26 So the next step is to define a player reducer that will interpret 0:30 the actions that occur within the app and produce a new state for the player data. 0:33 But before we get started with coding, I would like to point out that reducers in 0:38 Redux are based on the principles that they will be implemented as a pure 0:41 function that will not mutate the current state. 0:45 This is very important as we move forward 0:48 because Redux does not enforce immutability. 0:50 For more information on reducer implementation and 0:53 concepts like immutability, be sure to check out the teacher's notes. 0:56 Earlier we created an action types file for 1:00 storing the different action types that we'll be using for our application. 1:03 Now we need a reducer file. 1:06 So let's start by creating a reducers folder in the source directory and 1:08 inside the reducers folder, add a file called player.js and 1:14 notice that we're using player.js as the filename in multiple directories. 1:20 Now this isn't done by any convention, but is useful for 1:25 logically organizing your Redux elements across multiple directories. 1:28 Now that being said, 1:32 there are no hard constraints on how you name your action type, reducer or 1:33 action files, as long as you understand what they refer to logically. 1:37 Next, in Player.js we'll import our 1:40 action types with import followed by 1:46 an asterisk then as PlayerActionTypes 1:51 from the path actiontypes/player. 1:56 This syntax may seem a little strange but all we're saying here is that we want to 2:01 take all exports from the player.js file in the action types folder and 2:04 set them as properties on an object called PlayerActionTypes. 2:10 The result is being able to use our action types like this, 2:15 PlayerActionType.ADD_PLAYER. 2:17 I've posted more information on the syntax in the teacher's notes of this video. 2:20 So the next thing we want to do is move the state we have defined in 2:24 scoreboard.js over to this new file and set it to an initial state variable. 2:29 So first, add the following code under your imports, const, initialState. 2:35 Then you can copy just the three objects inside 2:43 the scoreboard.js player's array and paste them in the initial state constant. 2:47 Now since our state is initially defined as an array of player objects, 2:53 the reducer is responsible for taking the existing state of our players array and 2:59 producing a new state for our players array based on some action occurring. 3:04 So in JavaScript we write a reducer as a pure function that takes two arguments, 3:08 the current state and the action that's been taken. 3:13 So let's add a function to our reducer file that takes our current state and 3:16 an action with export default function Player. 3:21 Then inside we'll pass state=initialState and action. 3:28 Once again if the syntax here is a little unclear, all you have to know is that 3:36 state=initialState allows us to assign a default value for 3:41 our state in the event one is not provided or is undefined. 3:46 Be sure to check out the teacher's notes for more resources and videos about this. 3:49 Now as for the inside of this function, 3:54 we're going to want to switch on action type and produce a new state accordingly. 3:56 So we'll next add a switch block to the function that has a case for 4:00 each of our action types. 4:05 So inside the function we'll type switch action.type. 4:06 Now, a switch block evaluates an expression that's matched 4:13 against a specific case. 4:16 So let's start with a case for the add player action type. 4:18 Inside the switch block, 4:22 type case PlayerActionTypes.ADD_PLAYER. 4:24 And each one of our case blocks is going to return an array. 4:32 And the first thing we want to return is all the items in the state array. 4:37 So we'll do that using the spread operator. 4:41 We'll type three dots, followed by state. 4:43 Now the spread operator has a number of different use cases, 4:47 which you can learn more about in the teacher's notes. 4:50 But again in this context, state will take the already existing 4:52 items in state and include them as part of the new array we're generating, 4:56 which will include the added player object. 5:01 So let's include an object with the name and score states. 5:04 [BLANK AUDIO] So the important thing that the spread operator will do for 5:09 us here, is that it will generate a new object or 5:15 array without mutating or altering the original source object, 5:19 which is key because that object should be immutable or unalterable. 5:24 So in the case of our add player, we're taking the existing player objects, 5:29 adding them to a new array and 5:34 also including the added player object as part of the array we're producing. 5:36 So next, we'll write a case for remove player. 5:41 So right below the case we just wrote, add case 5:46 PlayerActionTypes.REMOVE_PLAYER and 5:49 we're also going to return an array here. 5:58 And once again we'll use the spread operator to concatenate two arrays 6:02 together. 6:06 So in this particular case, we're creating a subset of 6:23 the original player rate from zero up to a specific index and 6:27 then combining that with the player at index plus one to the end of the player. 6:31 So in other words, think of it this way, in order to remove a player from our 6:37 player array, we have to figure out a way to produce an array that no 6:41 longer contains the player object we want to remove. 6:45 So the spread operator makes it easy to extract objects from an array. 6:48 So if we take out all of the objects of the original player array except for 6:52 the one with the index that we want to remove and combine the result, we'll 6:56 end up with a player array that excludes just the player we want to remove. 7:00 Finally, let's create a case for update player score. 7:05 PlayerActionTypes.UPDATE_PLAYER_SCORE. 7:10 And we're once again producing an array here, 7:21 this time using the index of a player and the map function. 7:24 So I'm going to type some code here and 7:28 go ahead and follow along, then I'll explain what the code is doing. 7:29 All right, so in this return statement, we're using the index 8:05 provided to us along with the map function to produce a new array where 8:10 the only thing we change is the score of the player whose index we have. 8:15 So an author reaction type cases we just wrote, we're being sure to produce a brand 8:22 new array of objects, therefore maintaining the principle of immutability. 8:26 So one important thing to note here is that we should always include a default 8:31 case that returns state, that way if the reducer ever receives an action type it 8:36 doesn't handle, it will still provide a valid state for the reducer. 8:41 So below all the cases let's add default and then return state. 8:45 All right, so now that we've written our reducer, the key thing to remember 8:54 about a reducer is that it should be written as a pure function and 8:59 not mutate the current state. 9:03 Again, immutability is not enforced by Redux, so it's up to the developer 9:05 to make sure that their reducers are implemented as pure functions. 9:09 In this video we created a player reducer that's ready to interpret and 9:13 handle three specific actions, but how do we actually invoke our reducer? 9:17 You'll learn about that in the next video when we build our actions and 9:21 action creators. 9:24