javascript - 与助焊剂 react :这是教条式的模式还是有相同/更好的选择？

最近，我学习了如何在React中进行编码以及如何使用Flux构建代码。不幸的是，Firebase在Flux中不能很好地发挥作用，我需要为原型建立一个快速简便的后端。有些人建议完全放弃Flux，而只使用Firebase，但是我不确定在连接真正的后端时是否几乎需要Flux。如有必要，我是否应该现在就强制将React安装到助焊剂中，然后再拔掉它，还是我应该利用Flux更好的替代品？原谅这个问题的新手性质。 :)

最佳答案

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

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

关于javascript - 与助焊剂 react :这是教条式的模式还是有相同/更好的选择？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32335680/