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

Sign up for Treehouse

The Road Travelled Thus Far

2:57 with Guil Hernandez and Beau Palmquist

Let's take a moment to go over some key Redux concepts, and review what we've implemented so far and what we still have to do with regards to Redux and the scoreboard application.

New Terms

Reducer: A Redux construct that is responsible for maintaining a specific portion of the Redux store. 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.
Actions: Explicit events that occur in our application represented by a type and any relevant metadata associated with the action
Action Creators: In Redux, a construct for generating an action.

Further Reading:

Let's take a moment to go over key Redux concepts and 0:00
review some of what we've implemented so far and 0:02
what we still have to do with regards to Redux on the scoreboard app. 0:05
This will help you understand each of the files we just wrote fit into the broader 0:08
Redux pipeline and where Redux fits into our entire application. 0:12
At the heart of a Redux application is the application store. 0:16
Now I've mentioned the term Redux store a few times in this course. 0:20
And the Redux store is the single source of truth for the application state. 0:24
This means that all state resides in one place, the store. 0:28
Isolating state to one container greatly simplifies how and 0:32
when application state is updated. 0:36
We're going to create the store in the next stage, and 0:38
that store will consist of the player data. 0:41
Redux will always maintain a history of the player data in the store whenever 0:44
actions like updating score or removing a player are taken within the application. 0:47
You learned that an action is an event that occurs in the application 0:53
that will result in a change in the underlying state. 0:56
In Redux, an action is a JavaScript object that has a type and 1:00
additional metadata associated with the action taken. 1:04
The type identifies the action and 1:07
the metadata of an action is the extra information required to update the store. 1:10
As you learned in the previous video, 1:15
actions are created in Redux by action creators. 1:16
For example, the action creators we wrote were JavaScript functions that generate 1:20
actions that change player data. 1:24
In order for actions to be interpreted and handled in Redux, a reducer is required. 1:27
For instance, in the scoreboard app, we created a reducer for the player data. 1:32
We wrote the reducers as a pure function that takes two arguments, 1:36
the current state, and the action that's been taken. 1:40
Once an action goes through the Redux store, a reducer catches the action, 1:43
interprets the incoming action by its type, and produces the new state. 1:47
[SOUND] Reducers are a big part of Redux. 1:51
They're registered and interact with the Redux store, and it's the composition of 1:55
the reducers that becomes the state container for your application. 1:59
So again, make sure that your reducers are implemented as pure functions and 2:03
that they do not mutate or alter the current state. 2:07
Finally, as I mentioned at the end of the previous video, in order for 2:10
reducers to receive actions, the actions must be dispatched. 2:14
Dispatched actions express an intent to change the state in the store. 2:18
This is done using a method called dispatch, and it's important to remember 2:23
that invoking an action creator alone is not enough to trigger a change in state. 2:27
The action that's created must be dispatched. 2:31
You'll learn how to provide a dispatch in the next stage when we connect 2:34
the scoreboard container to Redux. 2:37
Now that we've had a chance to take a closer look at how our actions and 2:39
reducers will fit into our application we need to 2:42
implement the remaining Redux elements. 2:45
This means creating our Redux store wiring up our scoreboard app to connect to Redux, 2:47
and provide relevant properties to all downstream components. 2:52
See in the next stage. 2:56

You need to sign up for Treehouse in order to download course files.

Sign up