[英]Reflux: having multiple components access the same Store
tl; dr :每次我向其添加新Graph時,GraphStore的UUID都會更改。 這使我假設每個圖都在創建自己的唯一GraphStore。 我希望他們所有人共享一個商店。
我有一個包含多個Graph組件的React Dashboard組件。
我的Graph組件從儀表板傳遞了一個id道具。 然后使用該id在GraphStore中存儲的graphs數組中查找數據。 但是,在我看來,每個Graph都在創建自己的GraphStore,而不是共享相同的(期望的行為)。 如何使它們全部使用相同的GraphStore?
我曾考慮過從儀表板傳遞正確的GraphStore,但是我不可能讓每個Graph都監聽GraphStore中的更改。
我很高興不使用Reflux.connectFilter,但這似乎很完美。
我的代碼(至少是關鍵部分):
儀表板
var React = require('react');
var Graph = require('./graph').Graph;
var GraphActions = require('./graphActions').GraphActions;
var UUID = require('uuid');
var Dashboard = React.createClass({
...
render: function() {
var graphs = [];
for(var i = 0; i < 10; ++i) {
var id = UUID.v4();
GraphActions.createGraph(id);
graphs.push(
<Graph id={id} />
);
}
}
});
module.exports = {Dashboard: Dashboard};
圖形
var React = require('react');
var GraphStore = require('./graphStore').GraphStore;
var Graph = React.createClass({
mixins: [Reflux.connectFilter(GraphStore, "graph", function(){
return graphs.filter(function(graph) {
return graph.id === this.props.id;
}.bind(this))[0];
})],
propTypes: {
id: React.PropTypes.string
},
render: function() {
// Needed because the AJAX call in GraphStore might not have completed yet
if(typeof this.state.graph == "undefined") {
return (<div>Graph loading...</div>);
}
return (<div>Data: {this.state.graph.data}</div>);
}
});
module.exports = {Graph: Graph};
GraphStore
var Reflux = require('reflux');
var jQuery = require('jquery');
var GraphActions = require('./graphActions').GraphActions;
var UUID = require('uuid');
var GraphStore = Reflux.createStore({
listenables: [GraphActions],
onCreateGraph: function(graphId) {
console.log("GraphStore " + this.id + " is adding new graph " + graphId);
jQuery.ajax({
...
success: this.addGraph
});
},
addGraph: function(data) {
this.graphs.push(
{
id: graphId,
data: data
}
);
this.trigger({graphs: this.graphs});
},
getInitialState: function() {
this.graphs = [];
// Here I give the store a UUID so I can identify it later
this.id = UUID.v4();
return {
graphs: this.graphs
};
}
});
每當組件訂閱商店時,Reflux Store上的getInitialState
觸發(這是該組件的初始數據)。
如果您只需要在商店上運行一次 ,請使用init
:
var GraphStore = Reflux.createStore({
listenables: [GraphActions],
init: function() {
this.graphs = [];
// Here I give the store a UUID so I can identify it later
this.id = UUID.v4();
},
getInitialState: function() {
return {
graphs: this.graphs
};
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.