zoukankan      html  css  js  c++  java
  • [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".

  • 相关阅读:
    [CF1336C] Kaavi and Magic Spell
    [CF1338C] Perfect Triples
    [CF1353F] Decreasing Heights
    [CF1442B] Identify the Operations
    [CF1354E] Graph Coloring
    [CF1364D] Ehab's Last Corollary
    php-fpm和fastcgi的区别
    phpredis实现互斥锁
    关于lnmp情况下PHP单线程的理解
    客户端断开链接以后 PHP执行过程实测
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4790175.html
Copyright © 2011-2022 走看看