如何让 React.js 组件监听 Reflux 中的存储答案

【问题标题】：How to Make React.js component listen to a store in Reflux如何让 React.js 组件监听 Reflux 中的存储
【发布时间】：2015-08-12 20:36:23
【问题描述】：

我正在使用 React.js 和 Reflux 构建一个应用程序，但我无法让一个组件来监听商店。

首先，我已经成功地将我的商店与一个活动关联起来，如下所示：

组件发送动作到存储：

var CalcRow = React.createClass({
  handleChange: function(){
        // links to action in store.js
        TodoActions.costChange();
  },
  render: function() {
        return(// redacted)
    }
});

行动：

global.TodoActions = Reflux.createActions([
    "costChange"  // called by individual cost item input    
]);

接收操作的商店：

global.todoListStore = Reflux.createStore({

    listenables: [TodoActions],
    onCostChange: function(){
        alert('test1');
    }
});

订阅/监听商店的组件

var CalcApp = React.createClass({
    mixins: [Reflux.listenTo(todoListStore,"onStatusChange")],
    onStatusChange: function() {
        alert('test2');
    },
        getInitialState: function(){
            return{
                      cat1: this.props.cat1
                  };
         },
  render: function() {
    return (// redacted)
  }
});

我能够将第一个组件 (CalcRow) 与其存储连接，并触发警报('test1')，但我没有成功让 CalcApp 监听 todoListStore 并让它触发警报('test2') .

我已经阅读了官方的Reflux docs，但我似乎缺少一些东西，因为 CalcApp 没有按预期收听 todoListStore。

有没有人知道如何让这个 (CalcApp) 收听 Reflux 商店 (todoListStore)？

【问题讨论】：

标签： reactjs refluxjs

【解决方案1】：

您的商店不会发出任何东西。您需要拨打this.trigger：

global.todoListStore = Reflux.createStore({

    listenables: [TodoActions],
    onCostChange: function(){
        this.trigger('test1');
    }
});

docs

【讨论】：