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.
What's the best way to scale
app-actions.jsas your app becomes more and more complex? Is it suitable to simply append all of your apps actions to what could become a potentially massive file?
I'm not an expert, but as I see it, you are dividing your application up into many small applications, so each would have actions that corresponded to the functionality of the individual module.
Perhaps Flux gives a better idea about this in practice.
It's important to remember, that this Lesson use the 'react/lib/merge', and this lib 'll be deprecated on the next version of React, if you want to keep your code up to date, run the following line in your terminal (make sure to execute this inside your project directory): npm install object-assign --save
After that, replace this: var merge = require('react/lib/merge');
for this: var assign = require('object-assign');
And, everywhere that you use the 'merge', you replace with 'assign';
I used the dispatcher from Facebook’s Chat Example to build the dispatcher and it should look like this now:
<pre><code> var Dispatcher = require('flux').Dispatcher; var assign = require('object-assign'); var AppDispatcher = assign(new Dispatcher, { handleViewAction: function(action){ console.log('action', action); this.dispatch({ source: 'VIEW_ACTION', action:action }) } }); module.exports = AppDispatcher; </code></pre>This is the right dispatcher
be sure to: npm install flux --save
if you use this dispatcher
Thanks for these corrections! They work!
Thanks for this Gabriel - spent a bit of time blundering around in the source tree
I've been manually following the videos as a way of bumping up my React muscle memory so haven't benefitted from any corrections in the downloadable source.
Thanks mate appreciate it.
Thanks for posting this man! It really helped!
I need to create and add users to a MongoDB with react. Will this tutorial help?
What's the best way to scale
app-actions.jsas your app becomes more and more complex? Is it suitable to simply append all of your apps actions to what could become a potentially massive file?