Каким образом должна выполняться маршрутизация потока?

Question

Я довольно новичок в реактиве и еще более новый для потока, и у меня возникают проблемы с поиском информации о Google о том, как обрабатывать маршрутизацию и поток.

Я использую стек Meteor, а маршрутизатор (FlowRouter) имеет обязательный API для перехода по маршрутам с использованием FlowRouter.go('routeName, params).

Должен ли я создать компонент Link, который запускает действие, и создатель действия вызывает этот метод FlowRouter.go?

Также у него есть реактивный API для параметров, поэтому я могу посмотреть его и вызвать действие, если что-то изменится (так что магазины могут обновляться).

Answer 1

Подход, который я взял с недавним проектом при экспериментировании с Flux, состоял в том, чтобы сделать слой маршрутизации только другим магазином. Я создал папку, содержащую файл компонентов React View, Router Store и Router. Я Обеспечивая Источник Ниже:

Реагировать Просмотр файла:

var React = require('react'); 
var storeMixin = require('project/shared/helpers/storeMixin'); 
var RouterStore = require('../RouterStore'); 


module.exports = React.createClass({ 
    mixins: [storeMixin(RouterStore)], 

    getInitialState: function() { 
     return {RouterStore: RouterStore}; 
    }, 

    getComponentClass: function (route) { 


     switch (route) { 

      case 'help': 
       return require('project/app/components/Help'); 
default: 
       return require('project/FrontPage/FrontPage'); 
     } 


    }, 

    render: function() { 
     var props = { 
      route: this.state.RouterStore.get('route'), 
      routeParams: this.state.RouterStore.get('params') 
     }; 

     var Component = this.getComponentClass(props.route); 
     return <Component {...props} />; 
    } 
}); 

The Store File:

var Backbone = require('backbone'); 
var Store = require('project/shared/libs/Store'); 
var conf = require('./settings'); 
var constants = require('./constants'); 


class RouterModel extends Store.Model { 
    constructor() { 
     this.defaults = { 
      route: conf.ROUTE_DEFAULT, 
      params: [] 
     }; 
     super(); 
    } 

    initialize() { 

     this._router = new AppRouter(this, conf.ROUTE_ROUTES); 

    } 

    handleDispatch(payload) { 
     switch (payload.actionType) { 
      case constants.ROUTE_NAVIGATE: 
       this._router.navigate(payload.fragment, { 
        trigger: payload.trigger, 
        replace: payload.replace 
       }); 
       break; 
     } 
    } 
} 


class AppRouter extends Backbone.Router { 
    initialize(store, routes) { 
     this.store = store; 

     var route, key; 
     for (key in routes) { 
      if (routes.hasOwnProperty(key)) { 
       route = routes[key]; 
       this.route(key, route, function(/* route, args... */) { 
        this.emitRouteAction.apply(this, arguments); 
       }.bind(this, route)); 
      } 
     } 

     // catch all non-matching urls 
     Backbone.history.handlers.push({ 
      route: /(.*)/, 
      callback: function() { 
       store.set({ 
        route: constants.ROUTE_DEFAULT, 
        params: [] 
       }); 
      } 
     }); 

     Backbone.$(document).on("ready", function() { 
      Backbone.history.start(); 
     }); 
    } 

    emitRouteAction(/* route, args... */) { 
     this.store.set({ 
      route: arguments[0], 
      params: [].slice.call(arguments, 1) 
     }); 
    } 
} 

module.exports = new RouterModel(); 

В Действия Файл:

var constants = require('./constants'); 
var dispatch = require('project/shared/helpers/dispatch'); 
var _ = require('underscore'); 


module.exports = { 
    navigate: function(fragment, trigger, replace) { 
     dispatch(constants.ROUTE_NAVIGATE, { 
      fragment: fragment, 
      trigger: _.isUndefined(trigger) ? true : trigger, 
      replace: _.isUndefined(replace) ? true : replace 
     }); 
    } 
};