Load data from external API when route change in isomorphic app using Flux and React

Question

I'm recently using Flux Architecture in a isomorphic app with react-router to handle the routes of my application. My question is how load data from a external API when the route change?

Example:

http://myapp.com/#/search/:param1/:param2 => show ResultComponent (load data and set state in ResultComponent)
http://myapp.com/#/detail/:id => show DetailComponent (load data and set state in DetailComponent)

As I understand it, the data must be loaded in Action. But I have not found a concise example about this.

I'm using ES6.

score 1 · Answer 1 · answered Aug 25 '15 at 02:19

Trigger an action.

App.js

    'use strict';

    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') );

ApiStore

    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;

Api

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

Actions

import Reflux from 'reflux';

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

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

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

Load data from external API when route change in isomorphic app using Flux and React

1 Answers1