javascript - 与助焊剂 react : is this the dogmatic pattern or are there equal/better options?

Question

我最近学习了如何在 React 中编码以及如何使用 Flux 构建代码。不幸的是，Firebase 不能很好地与 Flux 配合使用，我需要为原型(prototype)设置一个快速且简单的后端。有些人建议完全放弃 Flux，只使用 Firebase，但我不确定当我连接真正的后端时是否几乎需要 Flux。如果有必要，我应该暂时将 React 强制安装到 Flux 中，然后再拔掉它，还是有更好的 Flux 替代品可供我利用？请原谅这个问题的菜鸟性质。 :)

Answer 1

这是我从 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') );

app.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()); }
}

Actions.js

import Reflux from 'reflux';

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

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

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

Api.Store.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); },
};

Basic.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 下。