In the previous video, we identified that the player data

we manage in the scoreboard address file would be better managed in Redux.

Then we took our first steps towards Redux integration by defining the different

action types that will occur for our player data.

In Redux, an action returns a new state via what's called a reducer.

As you're about to learn, reducers are a big part of Redux and

they perform most of the work in Redux.

In our scoreboard application, the player data would make a good reducer.

So the next step is to define a player reducer that will interpret

the actions that occur within the app and produce a new state for the player data.

But before we get started with coding, I would like to point out that reducers in

Redux are based on the principles that they will be implemented as a pure

function that will not mutate the current state.

This is very important as we move forward

because Redux does not enforce immutability.

For more information on reducer implementation and

concepts like immutability, be sure to check out the teacher's notes.

Earlier we created an action types file for

storing the different action types that we'll be using for our application.

Now we need a reducer file.

So let's start by creating a reducers folder in the source directory and

inside the reducers folder, add a file called player.js and

notice that we're using player.js as the filename in multiple directories.

Now this isn't done by any convention, but is useful for

logically organizing your Redux elements across multiple directories.

Now that being said,

there are no hard constraints on how you name your action type, reducer or

action files, as long as you understand what they refer to logically.

Next, in Player.js we'll import our

action types with import followed by

an asterisk then as PlayerActionTypes

from the path actiontypes/player.

This syntax may seem a little strange but all we're saying here is that we want to

take all exports from the player.js file in the action types folder and

set them as properties on an object called PlayerActionTypes.

The result is being able to use our action types like this,

PlayerActionType.ADD_PLAYER.

I've posted more information on the syntax in the teacher's notes of this video.

So the next thing we want to do is move the state we have defined in

scoreboard.js over to this new file and set it to an initial state variable.

So first, add the following code under your imports, const, initialState.

Then you can copy just the three objects inside

the scoreboard.js player's array and paste them in the initial state constant.

Now since our state is initially defined as an array of player objects,

the reducer is responsible for taking the existing state of our players array and

producing a new state for our players array based on some action occurring.

So in JavaScript we write a reducer as a pure function that takes two arguments,

the current state and the action that's been taken.

So let's add a function to our reducer file that takes our current state and

an action with export default function Player.

Then inside we'll pass state=initialState and action.

Once again if the syntax here is a little unclear, all you have to know is that

state=initialState allows us to assign a default value for

our state in the event one is not provided or is undefined.

Be sure to check out the teacher's notes for more resources and videos about this.

Now as for the inside of this function,

we're going to want to switch on action type and produce a new state accordingly.

So we'll next add a switch block to the function that has a case for

each of our action types.

So inside the function we'll type switch action.type.

Now, a switch block evaluates an expression that's matched

against a specific case.

So let's start with a case for the add player action type.

Inside the switch block,

type case PlayerActionTypes.ADD_PLAYER.

And each one of our case blocks is going to return an array.

And the first thing we want to return is all the items in the state array.

So we'll do that using the spread operator.

We'll type three dots, followed by state.

Now the spread operator has a number of different use cases,

which you can learn more about in the teacher's notes.

But again in this context, state will take the already existing

items in state and include them as part of the new array we're generating,

which will include the added player object.

So let's include an object with the name and score states.

[BLANK AUDIO] So the important thing that the spread operator will do for

us here, is that it will generate a new object or

array without mutating or altering the original source object,

which is key because that object should be immutable or unalterable.

So in the case of our add player, we're taking the existing player objects,

adding them to a new array and

also including the added player object as part of the array we're producing.

So next, we'll write a case for remove player.

So right below the case we just wrote, add case

PlayerActionTypes.REMOVE_PLAYER and

we're also going to return an array here.

And once again we'll use the spread operator to concatenate two arrays

together.

So in this particular case, we're creating a subset of

the original player rate from zero up to a specific index and

then combining that with the player at index plus one to the end of the player.

So in other words, think of it this way, in order to remove a player from our

player array, we have to figure out a way to produce an array that no

longer contains the player object we want to remove.

So the spread operator makes it easy to extract objects from an array.

So if we take out all of the objects of the original player array except for

the one with the index that we want to remove and combine the result, we'll

end up with a player array that excludes just the player we want to remove.

Finally, let's create a case for update player score.

PlayerActionTypes.UPDATE_PLAYER_SCORE.

And we're once again producing an array here,

this time using the index of a player and the map function.

So I'm going to type some code here and

go ahead and follow along, then I'll explain what the code is doing.

All right, so in this return statement, we're using the index

provided to us along with the map function to produce a new array where

the only thing we change is the score of the player whose index we have.

So an author reaction type cases we just wrote, we're being sure to produce a brand

new array of objects, therefore maintaining the principle of immutability.

So one important thing to note here is that we should always include a default

case that returns state, that way if the reducer ever receives an action type it

doesn't handle, it will still provide a valid state for the reducer.

So below all the cases let's add default and then return state.

All right, so now that we've written our reducer, the key thing to remember

about a reducer is that it should be written as a pure function and

not mutate the current state.

Again, immutability is not enforced by Redux, so it's up to the developer

to make sure that their reducers are implemented as pure functions.

In this video we created a player reducer that's ready to interpret and

handle three specific actions, but how do we actually invoke our reducer?

You'll learn about that in the next video when we build our actions and

action creators.