This course will be retired on April 12, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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 perform most of the work in Redux.
New Terms
Reducer: A Redux construct that is responsible for maintaining a specific portion of the Redux store, which holds the app's state. In JavaScript, a reducer is implemented as a pure function that takes two arguments, the current state and the action being taken, and produces the next state. In order for Redux to work properly, Reducers must not mutate the current state. In other words, the state for a reducer must be treated as immutable.
Related Treehouse Videos
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
You need to sign up for Treehouse in order to download course files.
Sign up