[Flux] 3. 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.

First create an list of actions in js/constants/app-constants.js

module.exports = {
    ADD_ITEM: 'ADD_ITEM',
    REMOVE_ITEM: 'REMOVE_ITEM',
    INCREASE_ITEM: 'INCREASE_ITEM',
    DECREASE_ITEM: 'DECREASE_ITEM'
};

js/actions/app-actions:

var AppConstants = require('../constants/app-constants');
var AppDispatcher = require('../dispatchers/app-dispatcher');

var AppActions = {
    addItem: function (item) {
        AppDispatcher.handleViewAction({
            actionType: AppConstants.ADD_ITEM,
            item: item
        });
    },
    removeItem: function (index) {
        AppDispatcher.handleViewAction({
            actionType: AppConstants.REMOVE_ITEM,
            index: index
        });
    },
    increaseItem: function (index) {
        AppDispatcher.handleViewAction({
            actionType: AppConstants.INCREASE_ITEM,
            index: index
        });
    },
    descreaseItem: function (index) {
        AppDispatcher.handleViewAction({
            actionType: AppConstants.DECREASE_ITEM,
            index: index
        });
    },
};

module.exports = AppActions;

For testing and see how it work, we using it for testing:

In app.js, include the actions module and bind to an click event.

var React = require('react');
var Action = require('../actions/app-actions');

var App = React.createClass({
    handleClick: function () {
        Action.addItem('This is an action to add');
    },
    render: function(){
        return (<h1 onClick={this.handleClick}> My App</h1>);
    }
});

module.exports = App;

Then log out the result in actions file:

    addItem: function (item) {
        console.log(item );  
        AppDispatcher.handleViewAction({
            actionType: AppConstants.ADD_ITEM,
            item: item
        });
    },

In the console, you will see it logs out "This is an action".