React Flux: Actions
Actions contain no functionality, but rather describe an event in our application. In this lesson we will describe our Actions as they relate to our application. These Actions will then be available for triggering in our Views and for execution in our Store.
[00:00] The first step in creating our app actions is actually going to be to create a list of those in our app constants. I'm creating app-constants.js in the constants directory. Here, we're just going to export a very simple object that's going to list each of those actions by name. Sorry, ADD_ITEM.
[00:22] We're going to be building a shopping cart. We're going to have some actions that relate to adding and removing items from a shopping cart. This one's going to be REMOVE. Then, we'll have INCREASE_ITEM.
[00:37] Finally, we'll have DECREASE_ITEM. Cool. We've got our constants. Now we can go ahead and...Whoops. A little typo there.
[00:51] Now, we can go ahead and create our actual actions file. Here in the actions directory, I'm going to create app-actions.js. Here, we're going to need our AppConstants, and we're also going to need our AppDispatcher.
[01:12] We can go ahead and begin building up our AppActions object, which is what we'll export when we're done here. We're just going to go ahead and create those. The first one's going to be addItem. It's going to be a function. Takes in an item. What it's going to do is it's going to call AppDispatcher.handleViewAction. It's going to take in an object.
[01:42] If we go back and look at our AppDispatcher, that is the key that we added. We've got this handleViewAction method available to us. Into that, we are going to pass an actionType, which is going to come from our AppConstants.ADD_ITEM, which we just created, obviously. We're also going to pass the actual item in itself. This is adding an item to our shopping cart.
[02:13] We're going to copy this guy here. This is going to be our removeItem. Since we don't really need the item...we need the index of the item in our cart...we're going to be passing in index. Our actionType here is going to be REMOVE_ITEM. Here, rather than passing in the item, we're going to be passing in the index.
[02:40] We can actually copy this guy two more times. This will be increaseItem. increaseItem there. That function will work the exact same way. This will be decreaseItem. All that's looking good. We'll go ahead and export our AppActions. Save that guy out.
[03:22] Our next step is actually to create our stores. However, if we want to get a look at how this is going to work within our application...I'm going to go ahead and add AppActions here, to our App component. I'm going to create a method here, called "handler." It's going to be a function.
[03:37] Here, we're just going to call AppActions.addItem, which is a method we just created. Rather than passing in an actual item, I'm going to say, "this is an item," as a string. We'll trigger that on the onClick event of our h1 here, so this.handler. Save that.
[03:59] If we jump over here, to our Dispatcher, right here, in our handleViewAction function, we'll just output or we'll console.log out "action" and the action that's passed in. Go ahead and save that guy.
[04:12] Reload over here and bring up our console. Here's our console. When we click on this guy...whoops. Typo there. AppActions. Sorry about that.
[04:25] Reload over here. We click on him. We can see our actual action is being sent to the Dispatcher. We're not doing anything with it yet, because we haven't created our store, but that'll be the next step.