Загрузить данные из внешнего API при изменении маршрута в изоморфном приложении с использованием Flux и React

Question

Недавно я использовал Flux Architecture в изоморфном приложении с react-router для обработки маршрутов моего приложения. Мой вопрос заключается в том, как загружать данные из внешнего API при изменении маршрута?

Пример:

• http://myapp.com/#/search/:param1/:param2 => показать ResultComponent (данные нагрузки и установить состояние, в ResultComponent)
• http://myapp.com/#/detail/:id => показать DetailComponent (данные нагрузки и установки состояния в DetailComponent)

Как Я понимаю, данные должны быть загружены в Action. Но я не нашел краткий пример об этом.

Я использую ES6.

Answer 1

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

Действия

import Reflux from 'reflux'; 

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

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

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