[Flux] 3. Actions

时间：2015-09-08 00:01:37 阅读：375 评论：0 收藏：0 [点我收藏+]

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".

[Flux] 3. Actions

原文：http://www.cnblogs.com/Answer1215/p/4790175.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)