How can I force reflux actions to fire in a simple test program?

Question

I'm trying to learn how Reflux actions and stores work so I wrote a small test program. When I run the application, the code that calls

toggleGem();

(which causes the Reflux Action to fire) does not immediately run. These action events are queued as can be shown by the output of the program below.

The output is:

myObj=lastUpdate=undefined
myObj=lastUpdate=undefined
myObj=lastUpdate=undefined
ENTER: gemStore.handleToggleGem: isGemActivated:false
MyObj.onGemChange: newVal=true
EXIT:  gemStore.handleToggleGem: isGemActivated:true
ENTER: gemStore.handleToggleGem: isGemActivated:true
MyObj.onGemChange: newVal=false
EXIT:  gemStore.handleToggleGem: isGemActivated:false

Notice that the console output

ENTER: gemStore.handleToggleGem: isGemActivated:false

doesn't appear until the program is exiting. This (to me) means that the action events are bundled and fired/run later by some "housekeeping" that Reflux is doing.

Is there a function I can call to tell Reflux to fire the action events that have been queued?

To recreate this example, simply save the code to RefluxTest.js and run these commands:

mkdir RefluxTest
npm init
npm install --save reflux
npm install --save react
node RefluxTest.js

Thanks.

NOTE: I know that this is not representative of how Reflux would normally be used because it is outside of the browser but I was curious if anyone had an answer.

Based on code from http://spoike.ghost.io/deconstructing-reactjss-flux/

// Code for file RefluxTest.js
// KWS: Learning how Reflux works outside of the browser

var React = require("react/addons");
var TestUtils = React.addons.TestUtils;
var Reflux = require("reflux");

// Creating action
var toggleGem = Reflux.createAction();

// Creates a DataStore
var gemStore = Reflux.createStore({

    // Initial setup
    init: function() {
        this.isGemActivated = false;

        // Register statusUpdate action
        this.listenTo(toggleGem, this.handleToggleGem);
    },

    // Callback
    handleToggleGem: function() {
        console.log('ENTER: gemStore.handleToggleGem: isGemActivated:' + this.isGemActivated);
        this.isGemActivated = !this.isGemActivated;

        // Pass on to listeners through
        // the DataStore.trigger function
        this.trigger(this.isGemActivated);
        console.log('EXIT:  gemStore.handleToggleGem: isGemActivated:' + this.isGemActivated);
    }

});

function MyObj() {
    gemStore.listen(this.onGemChange);
    this.lastUpdate = undefined;
}

MyObj.prototype.toString = function() {
    return "lastUpdate=" + this.lastUpdate;
}

MyObj.prototype.onGemChange = function(newVal){
    console.log("MyObj.onGemChange: newVal=" + newVal);
    this.lastUpdate = newVal;
}

var myObj = new MyObj();
console.log("myObj=" + myObj);

toggleGem();
console.log("myObj=" + myObj);

toggleGem();
console.log("myObj=" + myObj);

NOTE: I created a browser based example of this program, and the same behavior occurs. The RefluxAction's are not called until the logical "main" exits. In the browser case this means the Main.jsx calls **React.render(
, document.getElementById("app"))** the javascript file finishes and then the ReactActions are called. — PatS, Jul 10 '15 at 16:28

score 0 · Answer 1 · answered Jul 10 '15 at 17:25

I began to debug and step into the Reflux code and the first statement checks to see if the "sync" flag is set, so I tried setting it, and it worked!

So by changing the code to add toggleGem.sync = true as shown below

// Creating action
var toggleGem = Reflux.createAction();
toggleGem.sync = true;                 // THIS LINE WAS ADDED

The sample program works as expected.

NOTE: After the sync problem originally asked was fixed, I also noticed a bug/problem that was related to Javascript "this". Below is the additional change needed:

function MyObj() {
    gemStore.listen(this.onGemChange, this);
    this.lastUpdate = undefined;
}

If this was not passed in the gemStore.listen call, then the code would not work properly.

How can I force reflux actions to fire in a simple test program?

1 Answers1