javascript - 回流:让多个组件访问同一商店

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

关于javascript - 回流:让多个组件访问同一商店，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29404874/