Flux Architecture: Application Actions
In this lesson we'll build our actions which will be sent to our dispatcher.
[00:00] The first step in creating actions for our Flux application is to create a list of those actions. Here in the constants directory I'm going to create a new file. I'm just going to call that app-constants.js. In here we're just going to export an object that lists each of those actions.
[00:19] The first one's going to be add-item and its value is going to be add item. We're just going to continue on and what we're going to be creating here is a shopping cart application, so we'll just have actions that relate to adding and removing items from a shopping cart. We'll have things like increase-item and decrease-item.
[00:44] We now have a list of all the actions that are available on this application. This could obviously get much more complex, but again for our application we've just got a simple list of actions.
[00:53] Now we're going to move on to creating the actual actions here in the actions directory. We're going to create a new file called app-actions.js. Here we're going to import our app constants from Constants, app-constants. We're also going to import dispatch and register from our dispatcher, app-dispatcher.
[01:23] We're going to get a little more room on the screen here. We're going to export a default object and we're going to have a handful of items here. They're all going to follow the exact same pattern, so add-item while taking an item. It'll call dispatch. We're going to pass our entire payload here in the first argument so it's going to have an action type. In this case it's going to be app-constants.add-item. It's also going to have the key of item, which matches the item that was passed in.
[01:53] We're just going to copy these guys down here. 2, 3, 4. This one will be remove, with a key of remove. This one will be increase with a key of increase-item. Then finally decrease with a key of decrease-item. Our actions are all now set up and we can't really do anything with them until we have a store.
[02:28] However, if we wanted to get a look at how all this is working we could jump over to our dispatcher and right here, the logout, the action type. We'll jump over to our app component and we'll import app-actions from actions, app-actions. Then here in the on-click, let's just break this out into a new line. On-click equals app-actions.add-item, which is one of the items we just created. We'll go ahead and bind that. Null is OK in this case and we'll go ahead and pass in...this is the item.
[03:13] We'll save that and over here in the browser we should be able to bring up the dev tools and when we click on this guy we can see our action being passed into our dispatcher.
It represents a typo. :) dispatcher takes a single argument called payload. While having action and actionType (or other) fields in that payload can be useful in a larger application it is not used in this series. Expect an update to the dispatcher lesson to resolve any confusion.
In app-actions why is dispatch function called with curly braces?
addItem( item ){ dispatch({ actionType: AppConstants.ADD_ITEM, item }) }, why isn't it simply called with 2 arguments? If using named parameters and passing an object, why doesn't the second parameter have a key as well? like: {actionType: AppConstants.ADD_ITEM, item: item } ?
Following with what Joe mentioned, as of this reply there is a typo in the file app-dispatcher.js. The dispatch() function definition is meant to accept one object (named payload) as an argument (Facebook Flux API guide). This payload object (for this application so far) has 2 properties: actionType and item. In app-actions.js, the curly braces surrounding actionType and item indicate that dispatch() is being passed an object literal (for the payload). The 2nd property "item", is using es6 object property shorthand notation.
To clear this up, go to app-dispatcher.js and replace the exported dispatch function with:
export function dispatch( payload ) { console.log(payload); flux.dispatch( payload ); }
import Dispatcher from 'flux'; const flux = new Dispatcher(); //constructor error for flux 3.0
i had to use below instead.. import Flux from 'flux'; export default new Flux.Dispatcher;
What does the 'action' parameter get passed in the 'flux.dispatcher' function?