如何让 React.js 组件监听 Reflux 中的商店
How to Make React.js component listen to a store in Reflux
我正在使用 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)?
您的商店没有排放任何东西。您需要致电 this.trigger
:
global.todoListStore = Reflux.createStore({
listenables: [TodoActions],
onCostChange: function(){
this.trigger('test1');
}
});
我正在使用 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)?
您的商店没有排放任何东西。您需要致电 this.trigger
:
global.todoListStore = Reflux.createStore({
listenables: [TodoActions],
onCostChange: function(){
this.trigger('test1');
}
});