Reflux：让多个组件访问同一个 Store

Question

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

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

我的图表组件从仪表板传递了一个 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};

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

Answer 1

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

Reflux：让多个组件访问同一个 Store

Reflux: having multiple components access the same Store

javascript

datastore

reactjs

refluxjs