如何使React.js组件侦听Reflux中的商店 [英] How to Make React.js component listen to a store in Reflux

问题描述

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

I am building an app using React.js and Reflux and I am having trouble getting a component to listen to a store.

首先，我已成功将商店链接到一个事件，该事件如下所示:

First of all, I have successfully linked my store with an event, which looks like this:

组件发送操作以存储:

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)与它的存储连接，并触发Alert('test1')，但是我没有成功使CalcApp监听todoListStore并触发了Alert('test2') .

I am able to connect the first component (CalcRow) with it's store, and trigger the alert('test1'), but I have not succeeded in making CalcApp listen to the todoListStore and have it fire alert('test2').

我已经阅读了官方的回流文档，但是由于CalcApp确实存在某些缺失不按预期方式收听todoListStore.

I have read the official Reflux docs, but there appears to be something I am missing because CalcApp does not listen to the todoListStore as expected.

有人对我如何使它(CalcApp)收听Reflux商店(todoListStore)有任何见解吗?

Does anyone have any insight into how I can make this (CalcApp) listen to the Reflux store (todoListStore)?

推荐答案

您的商店没有发出任何东西.您需要致电this.trigger:

Your store doesn't emit anything. You need to call this.trigger:

global.todoListStore = Reflux.createStore({

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

文档

这篇关于如何使React.js组件侦听Reflux中的商店的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！