reactjs - 使用 Flux 和 React 在同构应用程序中更改路由时从外部 API 加载数据

Question

我最近在一个带有react-router的同构应用程序中使用 Flux Architecture来处理我的应用程序的路由。我的问题是当路由改变时如何从外部 API 加载数据？

例子：

• http://myapp.com/#/search/:param1/:param2 => 显示 ResultComponent（在 ResultComponent 中加载数据并设置状态）
• http://myapp.com/#/detail/:id => 显示 DetailComponent（加载数据并在 DetailComponent 中设置状态）

据我了解，数据必须在 Action 中加载。但是我还没有找到一个简洁的例子。

我正在使用 ES6。

Answer 1

触发一个动作。

应用程序.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);