与Flux的反应：这是教条式的模式，还是有平等/更好的选择？ [英] React with Flux: is this the dogmatic pattern or are there equal/better options?

问题描述

最近我学习了如何在React中编写代码，以及如何使用Flux构建代码。不幸的是，Firebase与Flux的配合不佳，我需要为原型设置一个快速简单的后端。有些人建议放弃使用Flux，只使用Firebase，但是我不确定当我连接真正的后端时Flux几乎是必需的。如果有必要的话，我现在应该只是强制适应React，拔掉它，还是有更好的方法替代Flux，我应该利用这个优势？原谅这个问题的noob性质。 ：）

解决方案

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

  import从react反应; 
 
从'./components/app.ctrl.js'导入AppCtrl; 
从'./flux/Actions'中导入动作; 
从'./flux/Api.Store'导入ApiStore; 
 
 window.React = React; 
 
 Actions.apiInit（）; 
 
 React.render（< AppCtrl /> ;, document.getElementById（'react'））; 
  

app.ctrl.js

 从'react'导入React，{Component}; 
 
从'./../flux/Basic.Store'导入BasicStore; 
 
 var AppCtrlSty = {
 height：'100％'，
 padding：'0 10px 0 0'
} 
 $ b $ class AppCtrlRender （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> 
）; 
 
 
 
函数getState（）{
返回{
 Data：BasicStore.getData（），
 Data2：BasicStore.getData2 （），
 Data3：BasicStore.getData3（）
}; 
}; 
 
导出默认类AppCtrl扩展AppCtrlRender {
构造函数（）{
 super（）; 
 this.state = getState（）; 
 this.binder（'storeDidChange'）; 
} 
 
 componentDidMount（）{this.unsubscribe = BasicStore.listen（this.storeDidChange）; } 
 componentWillUnmount（）{this.unsubscribe（）; } 
 storeDidChange（）{this.setState（getState（））; } 
} 
  

Actions.js

 导入从回流回流; 
 
 var apiActions = [
'apiInit'，
'apiInitDone'，
'apiSetData'
] 
 
 var wsActions = [
'gotData'，
'gotData2'
] 
 
 var actionArray = wsActions.concat（apiActions）; 
 module.exports = Reflux.createActions（actionArray）; 
  

Api.Store.js

<$ p $进口回流的回流;

从'./Actions'中导入动作;
从'./../utils/ws.api.js'导入ApiFct;

函数_apiInit（）{ApiFct.init（）; }
函数_apiInitDone（）{ApiFct.getData（）; }
函数_apiSetData（data）{ApiFct.setData（data）; }

var ApiStoreObject = {
listenables：Actions，
apiInit：_apiInit，
apiInitDone：_apiInitDone，
apiSetData：_apiSetData

const ApiStore = Reflux.createStore（ApiStoreObject）;
导出默认的ApiStore;

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

  import从../通量/操作; 
 
 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（数据）; }，
 setData：function（data）{this.socket.send（'client：SetData'，data）; }，
}; 
  

Basic.Store.js

<$ p $进口回流的回流;

从'./Actions'中导入动作;
从'./Addon.Store'导入AddonStore;
从'./Mixin.Store'中导入MixinStoreObject;

var _data = {};

函数_gotData（data）{_data = data; BasicStore.trigger（）; }
函数_addonTrigger（）{BasicStore.trigger（）; }

函数BasicStoreInit（）{this.listenTo（AddonStore，this.onAddonTrigger）; }

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）;
导出默认的BasicStore;

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

I've recently learned how to code in React and how to structure the code using Flux. Unfortunately Firebase doesn't play to well with Flux and I need to set up a quick and easy back-end up for a prototype. Some suggest to forgo Flux altogether and to just use Firebase but I'm not sure if Flux will be almost necessary down the road when I hook up a real backend. If it is necessary, should I just force fit React into flux for now and unplug it later, or are there better alternatives to Flux out that I should be taking advantage of? Forgive the noob nature of this question. :)

解决方案

Here is the basic reflux pattern I use starting with 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. This is where you talk to firebase on the server. When you get data from the server just trigger the action to send the data to the store.

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;

The complete pattern is at https://github.com/calitek/ReactPatterns under React.13/ReFluxWebSocket.

这篇关于与Flux的反应：这是教条式的模式，还是有平等/更好的选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！