这是我从 app.js 开始使用的基本回流模式；

import React  from 'react';

import AppCtrl from './components/app.ctrl.js';
import Actions from './flux/Actions';
import ApiStore from './flux/Api.Store';

window.React = React;

Actions.apiInit();

React.render( <AppCtrl />, document.getElementById('react') );

应用程序.ctrl.js

import React, {Component} from 'react';

import BasicStore from './../flux/Basic.Store';

var AppCtrlSty = {
    height: '100%',
    padding: '0 10px 0 0'
}

class AppCtrlRender extends Component {
    binder(...methods) { methods.forEach( (method) => this[method] = this[method].bind(this) ); }

    render() {
        var data = this.state.Data;
        data = JSON.stringify(data, null, 2);
        var data2 = this.state.Data2;
        data2 = JSON.stringify(data2, null, 2);
        var data3 = this.state.Data3;
        data3 = JSON.stringify(data3, null, 2);
        return (
            <div id='AppCtrlSty' style={AppCtrlSty}>
                React 1.3 ReFlux with WebSocket<br/><br/>
                {data}<br/><br/>
                Data2: {data2}<br/><br/>
                Data3: {data3}<br/><br/>
            </div>
        );
    }
}

function getState() {
    return {
        Data: BasicStore.getData(),
        Data2: BasicStore.getData2(),
        Data3: BasicStore.getData3()
    };
};

export default class AppCtrl extends AppCtrlRender {
    constructor() {
        super();
        this.state = getState();
        this.binder('storeDidChange');
    }

    componentDidMount() { this.unsubscribe = BasicStore.listen(this.storeDidChange); }
    componentWillUnmount() { this.unsubscribe(); }
    storeDidChange() { this.setState(getState()); }
}

动作.js

import Reflux from 'reflux';

var apiActions = [
    'apiInit',
    'apiInitDone',
    'apiSetData'
]

var wsActions = [
    'gotData',
    'gotData2'
]

var actionArray = wsActions.concat(apiActions);
module.exports = Reflux.createActions(actionArray);

应用商店.js

import Reflux from 'reflux';

import Actions from './Actions';
import ApiFct from './../utils/ws.api.js';

function _apiInit() { ApiFct.init(); }
function _apiInitDone() { ApiFct.getData(); }
function _apiSetData(data) { ApiFct.setData(data); }

var ApiStoreObject = {
    listenables: Actions,
    apiInit: _apiInit,
    apiInitDone: _apiInitDone,
    apiSetData: _apiSetData
}
const ApiStore = Reflux.createStore(ApiStoreObject);
export default ApiStore;

ws.api.js。这是您与服务器上的 firebase 交谈的地方。当您从服务器获取数据时，只需触发将数据发送到商店的操作。

import Actions from '../flux/Actions';

module.exports = {
    socket: {},
    init: function() {
        this.socket = new Primus();
        this.socket.on('server:GotData', this.gotData);
        Actions.apiInitDone();
    },
    getData: function() { this.socket.send('client:GetData', {}); },
    gotData: function(data) { Actions.gotData(data); Actions.gotData2(data); },
    setData: function(data) { this.socket.send('client:SetData', data); },
};

基本.Store.js

import Reflux from 'reflux';

import Actions from './Actions';
import AddonStore from './Addon.Store';
import MixinStoreObject from './Mixin.Store';

var _data = {};

function _gotData(data) { _data = data; BasicStore.trigger(); }
function _addonTrigger() { BasicStore.trigger(); }

function BasicStoreInit() { this.listenTo(AddonStore, this.onAddonTrigger); }

var BasicStoreObject = {
    init: BasicStoreInit,
    listenables: Actions,
    mixins: [MixinStoreObject],
    onGotData: _gotData,
    onAddonTrigger: _addonTrigger,
    getData: function() { return _data; },
    getData2: function() { return AddonStore.data2; },
    getData3: function() { return this.data3; }
}
const BasicStore = Reflux.createStore(BasicStoreObject);
export default BasicStore;

完整的模式位于https://github.com/calitek/ReactPatterns下的 React.13/ReFluxWebSocket。