Javascript 回流：让多个组件访问同一个存储

tl；dr：每次向GraphStore添加新图形时，它的UUID都会更改。这让我假设每个图都在创建自己独特的GraphStore。我希望他们都共享一个商店

我有一个React仪表板组件，它包含多个图形组件

从仪表板向我的图形组件传递id props。然后使用该id在GraphStore中存储的graphs数组中查找数据。然而，在我看来，每个图形都在创建自己的GraphStore，而不是共享相同的（期望的行为）。我如何让他们都使用相同的GraphStore

我曾考虑从仪表板中传入正确的GraphStore，但不可能让每个图形都侦听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}; 

---

每次组件订阅存储时（组件的初始数据），回流存储上的

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
        };
    }
});

---

每次组件订阅存储时（组件的初始数据），回流存储上的

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
        };
    }
});

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
        };
    }
});