Actions and Action Creators4:48 with Guil Hernandez
We’ve gone from defining our action types to building our reducer, so the next step is to provide a mechanism for notifying our reducer when an action takes place. This is done using actions, action creators and dispatch.
In the previous videos we've gone from defining our action types to building 0:00 our reducer. 0:04 So, the next step is to provide a mechanism for 0:05 notifying our reducer when an action takes place. 0:07 This is done using action creators, actions and dispatch. 0:10 In Redux an action is an event that will result in a change in 0:13 the underlying state. 0:17 For example, updating a player's score. 0:18 The general principle of submitting an action to Redux works something like this. 0:21 An action creator is used to generate an action, and 0:25 the action is dispatched to the Redux store which holds the App state. 0:28 And it's where a reducer handles the action. 0:32 The reducer then passes the action to a component and returns a new state. 0:34 We'll review this process again later. 0:40 But you can check the teacher's notes of this video for 0:41 more resources about this process. 0:44 So, now let's get started on our actions and action creators. 0:46 Let's start by creating a folder called actions, under our source directory. 0:50 Next, add a file called player.js to the actions folder. 0:56 In this new file we're going to export action creators, one for 1:02 each of the action types we've defined. 1:05 And since we have three action types defined, 1:07 we're going to need three action creators. 1:09 So, first let's import our action types, 1:12 just like we did earlier in the play reducer. 1:14 In fact, I'll just copy the import from the player reducers file and 1:16 paste it in my new file. 1:22 Now that we have our action types, let's start with the addPlayer action creator. 1:25 We'll type export const addPlayer = name followed 1:30 by an arrow function, And a return statement. 1:36 So, this particular action creator takes a name as an argument and returns an action. 1:45 And the action it returns is one with a type of addPlayer, and 1:51 it provides the name of the player being added as the action metadata. 1:54 So, in the return statement we'll add type 1:58 PlayerActionTypes.ADD_PLAYER followed by name. 2:02 And as you'll see later, when this action is dispatched to trigger a change 2:07 in state it will be handled by the ADD_PLAYER switch case in our reducer. 2:12 So, let's open up the player reducer and 2:18 take a quick look at that case block again. 2:20 Notice that the way we pull the action metadata is by property. 2:23 So, the name that we provided here 2:27 is used to create a new person object in our player array. 2:30 Next, we'll build the remove player action creator and 2:34 this time our action creator takes an index argument. 2:37 This action creator is going to generate an action object with a type of 2:50 removePlayer, and provide the index as the action metadata. 2:54 So, in the return statement, we'll add type 2:58 PlayerActionTypes.REMOVE_PLAYER followed by index. 3:01 So, when this action is dispatched to trigger a change in state, 3:09 it will be handled by the remove player case block we wrote in our player reducer. 3:13 Now, our last action creator is update player score. 3:19 And this time we'll provide two arguments to this action creator. 3:23 An index and a score. 3:27 And the action that is created by this action creator is of type update 3:41 player score, and it provides two pieces of action meta data. 3:46 The index and score that were passed in as arguments. 3:50 So, in the return statement we'll add type PlayerActionTypes.UPDATE_PLAYER_SCORE, 3:53 and then we'll include index and score. 4:01 So now, the update player score switch block in our player 4:07 reducer will handle when this action gets dispatched to change state. 4:11 And you'll learn more about dispatching actions soon. 4:16 But for now, just know that these actions need to get dispatched in order to 4:18 express an intent to change the state. 4:22 All right so we've laid the foundation for our Redux implementation. 4:25 But at this point our App is still completely unaware of any of the Redux 4:27 plumbing we've created. 4:31 So, we still need to wire up our App to use all these features. 4:33 But before we do that, in the next video we're going to review important Redux 4:37 concepts, along with some of the Redux code we've written so far. 4:41 That way you'll have a good understanding of how everything is going to work. 4:44
You need to sign up for Treehouse in order to download course files.Sign up