reflux / refluxjs

A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux
BSD 3-Clause "New" or "Revised" License
5.36k stars 330 forks source link

trigger manually or trigger automatically? #475

Closed ManfredHu closed 7 years ago

ManfredHu commented 8 years ago
//new
define("game.store", function(require, exports, module) {
    var reflux = require('reflux'),
        $ = require("{jquery}");

    var option = {
        ruleShow: 0,
        doubleBet: true,
        btnSpan: false,
        digit: {
            l: -1,
            r: -1,
            lShow: false,
            rShow: false
        }
    };

    module.exports = function(actions, param) {
        var getApi = {
            getRuleShow: function() {
                return option.ruleShow;
            }

        var store = reflux.createStore({
            init: function() {
                this.listenToMany(actions);
            },
            mixins: [getApi],
            getInitialState: function() {
                return option;
            },
            onSetRuleShow: function(opt) {
                option.ruleShow = opt;
                if(option.ruleShow === 2) {
                    setTimeout(function(){
                        option.ruleShow = 0;
                        this.trigger(option);
                    }.bind(this),400)
                }
                this.trigger(option);
            },
            onSetDoubleBet:function(opt){
                option.doubleBet = opt;
            },
            onSetBtnSpan:function(opt){
                option.btnSpan = opt;
            },
            onSetDigit:function(opt){ //更换左右两边显示的数字
                for(var k in option.digit){
                    if(typeof(opt[k]) != 'undefined'){
                        option.digit[k] = opt[k];
                    }
                }
            },
            onSetUpdateStatus: function(){
                this.trigger(option); //update the view manually
            },
        });
        return store;
    }
});

I use

action.setDoubleBet(false);
action.setUpdateStatus();

to update the store and view. But the question is that it seems no improve the performance in my web application than before.what's wrong?

//old
define("game.store", function(require, exports, module) {
    var reflux = require('reflux'),
        $ = require("{jquery}");

    var option = {
        ruleShow: 0,
        doubleBet: true,
        btnSpan: false,
        digit: {
            l: -1,
            r: -1,
            lShow: false,
            rShow: false
        }
    };

    module.exports = function(actions, param) {
        var getApi = {
            getRuleShow: function() {
                return option.ruleShow;
            }

        var store = reflux.createStore({
            init: function() {
                this.listenToMany(actions);
            },
            mixins: [getApi],
            getInitialState: function() {
                return option;
            },
            onSetRuleShow: function(opt) {
                option.ruleShow = opt;
                if(option.ruleShow === 2) {
                    setTimeout(function(){
                        option.ruleShow = 0;
                        this.trigger(option);
                    }.bind(this),400)
                }
                this.trigger(option);
            },
            onSetDoubleBet:function(opt){
                option.doubleBet = opt;
                this.trigger(option);
            },
            onSetBtnSpan:function(opt){
                option.btnSpan = opt;
                this.trigger(option);
            },
            onSetDigit:function(opt){ //更换左右两边显示的数字
                for(var k in option.digit){
                    if(typeof(opt[k]) != 'undefined'){
                        option.digit[k] = opt[k];
                    }
                }
                this.trigger(option);
            }
        });
        return store;
    }
});

Look,it will update the view whenever i change the option in store. By using:

action.setDoubleBet(false);

but it update the view continuously whenever i change the small variable in the store.option

how to solve the problem?

devinivy commented 8 years ago

I think the best thing you can do is control when your store trigger()s, and when your view respects those triggers by re-rendering.