[Flux] 3. Actions

时间：2015-09-08 00:01:55 阅读：181 评论：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年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行