1

tl;dr：每次我向 GraphStore 添加新的 Graph 时，它的 UUID 都会发生变化。这让我假设每个 Graph 都在创建自己独特的 GraphStore。我希望他们都共享一个商店。

我有一个包含多个 Graph 组件的 React Dashboard 组件。

我的 Graph 组件从仪表板传递了一个 id 道具。使用该 ID，然后它会在存储在 GraphStore 中的图形数组中查找数据。但是，在我看来，每个 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};

图形存储

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

1 回答 1

5

getInitialState每次组件订阅商店时， Reflux Store 都会触发（它是组件的初始数据）。

如果您需要在商店中只运行一次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
        };
    }
});
于 2015-04-02T08:28:59.007 回答