Ao usar o redux-observable com o react-router, faria sentido adicionar de forma assíncrona novos épicos, de acordo com as instruções na documentaçãoaqui dentro dos ganchos onEnter do react-router durante mudanças de rota?

./epics/index.js

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { combineEpics } from 'redux-observable';

import { epic1 } from './epic1'
import { epic2 } from './epic2'

export const epic$ = new BehaviorSubject(combineEpics(epic1, epic2));
export const rootEpic = (action$, store) =>
    epic$.mergeMap(epic =>
        epic(action$, store)
    );

export {
    rootEpic
};

... routes / SomePath / index.js

import { epic$ } from './../../../../epics/index'
import { epic3 } from './../../../../epics/epic3'

module.exports = {
    path: 'some-path',
    getComponent( location, cb ) {
        require.ensure( [], ( require ) => {
            cb( null, require( './components/SomePath' ) )
        } )
    },
    onEnter() {
        epic$.next(epic3)

    }
}

Muito novo para Rxjs e redux-observable. Isso parece funcionar, mas se pergunta: 1. Nesse caso, o epic3 seria adicionado novamente ao rootEpic toda vez que navegássemos para / some-path? 2. Se eu quisesse console.log quais épicas foram adicionadas ao rootEpic, como eu faria isso?

Editado em resposta a @JayPhelps

Posso solicitar esclarecimentos sobre alguns pontos?

O registerEpic fn funciona muito bem. Eu estava usando o operador .distinct () para resolver o problema de registro épico duplicado da seguinte maneira:

export const epic$ = new BehaviorSubject(combineEpics(epic1, epic2)).distinct()

Essa é uma maneira igualmente válida / boa de lidar com o registro épico preguiçoso e, se não, você poderia explicar o porquê?

Estou usando o create-react-app que requer import.ensure e ES6 (são maneiras diferentes de importar, certo?) E, basicamente, copiei e coleiExemplo de aplicativos enormes do react-router que teve orequire.ensure código, mas em qualquer outro lugar, estou usando instruções de importação na parte superior do arquivo.

Portanto, importar os épicos e o registerEpic fn na parte superior parece funcionar, enquanto colocar os caminhos dentro do primeiro argumento require.ensure também parece funcionar. Isso atrapalha as coisas se eu usar as instruções require.ensure AND import? Se eu usar o require.ensure para carregar TUDO o que a rota precisar, isso significa que eu removo todas as instruções de importação dentro dos componentes aninhados (sem rota) do componente dessa rota?

import { epic3 } from './../../epics/epic3'
import { epic4 } from './../../epics/epic4'
import { registerEpic } from './../../epics/index'

module.exports = {
    path: 'my-path',
    getComponent( location, done ) {
        require.ensure( [], ( require ) => {
           registerEpic(addYoutubeEpic)
            registerEpic(linkYourSiteEpic)
            done( null, require( './components/Edit' ) )
        } )
    }
}

Em relação ao registro de epopeias no fn 'getComponent' para carregamento assíncrono - eu pensei que era realmente desejável ter carregamento síncrono aqui, para que o componente da rota não seja renderizado até que a epopéia seja registrada. O que acontece se o usuário tentar fazer algo na rota, como buscar informações detalhadas ou enviar um formulário, que exija que o épico seja registrado e o épico ainda não esteja registrado?

Existe algum outro lugar fora das declarações module.export do react-router que seriam apropriadas para registrar épicos com preguiça? Como muitas rotas no meu projeto não exigem login, o login nem sempre aciona uma alteração de rota. No entanto, existem vários épicos que devem ser registrados após o usuário efetuar login. Atualmente, estou fazendo isso de uma maneira realmente estúpida e provavelmente errada, definindo uma variável de token no meu authReducer, mas tudo o que faz é chamar uma função que registra os novos épicos:

'./../reducers/authReducer.js'

import { greatEpic } from './../epics/fetchFollowListEpic'
import { usefulEpic } from './../epics/fetchMyCollectionsEpic'
// and a few more 
import { registerEpic } from './../epics/index'

const addEpics = () => {
    registerEpic(greatEpic)
     registerEpic(usefulEpic)
     ...etc
}

export default function reducer( state = {
    loggingIn: false,   
    loggedIn: false,
    error: '',
}, action ) {
    switch ( action.type ) {
        case "LOGIN_SEQUENCE_DONE": {
            return {
                ...state,
                aid: setAuthToken(action.payload),
                loginFailed: false,
                addEpics: addEpics(),
            }

        }

Eu imaginaria que o loginEpic seria um lugar melhor para registrar os épicos, em vez do redutor. (Eu encontreiseu exemplo de login no github pode parecer familiar). Isso está correto ou estou totalmente fora da base? Eu sei que .concat () é síncrono e sei que redux é síncrono - não tenho certeza se registerEpics () é síncrono, mas usar o redutor para registrar os épicos SEEMS para funcionar corretamente - isso significa que registerEpics é síncrono? Ou significa apenas que as coisas estão disparando tão rapidamente que não importa? Ou funciona apenas devido a alguns mal-entendidos essenciais que tenho sobre instruções de importação e como o webpack lida com a divisão de código que tenho que pesquisar mais?

./../epics/loginEpic

export const loginEpic = action$ =>
    action$.ofType("LOGIN")
        .mergeMap(action =>

            Observable.fromPromise(axios.post('webapi/login', action.payload))
                .flatMap(payload =>
                    // Concat multiple observables so they fire sequentially
                    Observable.concat(
                        // after LOGIN_FULILLED
                        Observable.of({ type: "LOGIN_FULFILLED", payload: payload.data.aid }),                   
                        // ****This is where I think I should be registering the epics right after logging in. "ANOTHER_ACTION" below depends upon one of these epics****     
                        Observable.of({type: "ANOTHER_ACTION", payload: 'webapi/following'}),
                        Observable.of({type: "LOGIN_SEQUENCE_DONE"}),
                    )
                )
                .startWith({ type: "LOGIN_PENDING" })
                .takeUntil(action$.ofType("LOGIN_CANCELLED"))
                .catch(error => Observable.of({
                    type: "LOGIN_REJECTED",
                    payload: error,
                    error: true
                }))
        );