React with Flux: is this the dogmatic pattern or are there equal/better options?

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. :)

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.