Question

我试图了解Reflux动作和商店如何运作，所以我写了一个小测试程序。当我运行应用程序时，调用

的代码

toggleGem();

（导致Reflux Action触发）不会立即运行。这些操作事件排队，可以通过以下程序的输出显示。

输出结果为：

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

请注意控制台输出

ENTER: gemStore.handleToggleGem: isGemActivated:false

在程序退出之前不会出现。这（对我而言）意味着行动事件被一些＆＃34;内务管理＆＃34;捆绑并解雇/运行。 Reflux正在做的事。

我可以打电话告诉Reflux解雇排队的动作事件吗？

要重新创建此示例，只需将代码保存到RefluxTest.js并运行以下命令：

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

感谢。

注意：我知道这并不代表Reflux如何正常使用，因为它在浏览器之外，但我很好奇是否有人有答案。

基于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);

Answer 1

我开始调试并进入Reflux代码并且第一个语句检查是否设置了“sync”标志，所以我尝试设置它，它工作了！

所以通过更改代码来添加 toggleGem.sync = true ，如下所示

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

示例程序按预期工作。

注意：在最初询问的同步问题修复后，我还注意到与Javascript“this”相关的错误/问题。以下是所需的额外更改：

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

如果这个未在 gemStore.listen 调用中传递，则代码将无法正常运行。

如何在一个简单的测试程序中强制回击动作？

1 个答案: