如何让React.js组件在Reflux中监听商店

时间:2015-05-29 20:41:47

标签: reactjs refluxjs

我正在使用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)?

1 个答案:

答案 0 :(得分:5)

您的商店不会发出任何东西。您需要致电this.trigger

global.todoListStore = Reflux.createStore({

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

docs