Is it good practice to lazily add new epics inside the onEnter reactive router?

Question

When using a reduction observable with a reactive router, would it be advisable to add new epics asynchronously in accordance with the instructions in the documentation here inside onEnter intercepts the reactive router while changing the route?

./epos/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)

    }
}

Very new to Rxjs and reduction-observable. This seems to work, but interestingly: 1. In this case, will epic3 be added to rootEpic again every time we go to / some -path? 2. If I wanted console.log, which epics were added to rootEpic, how would I do it?

---

Edited in response to @JayPhelps

?

• registerEpic fn . .distinct() epic :

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

/ , , , ?

2. create-response-app, require.ensure, ES6 ( ?), , - , require.ensure, .

, registerEpic fn , , , , -, require.ensure. , require.ensure AND import ? require.ensure , , ( ) ?

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

3. 'getComponent' fn - , , , . , - , , , , , ?

4. module.export, ? , . , , . - , , , authReducer, , , :

   './../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(),
               }
   
           }
   

, loginEpic , . ( github, ). , ? , .concat() , , redux - , registerEpics() , SEEMS - , registerEpics ? , , ? - - , , webpack , ?

./../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
                }))
        );

Answer 1

epic3 rootEpic , /some -path?

, getComponent, onEnter. , getComponent , , , , .. require.ensure(), webpack , , !

, , :

/SomePath/index.js

import { registerEpic } from 'where/ever/this/is/epics/index.js';

export default {
  path: 'some-path',

  getComponent(location, done) {
    require.ensure(['./components/SomePath', 'path/to/epics/epic3'], require => {
      // this is where you register epics, reducers, etc
      // that are part of this separate bundle
      const epic = require('path/to/epics/epic3').epic3;
      registerEpic(epic);

      done(null, require('./components/SomePath'));
    });
  }
};

/////index.js

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

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

const epicRegistry = [epic1, epic2];
const epic$ = new BehaviorSubject(combineEpics(...epicRegistry));

export const registerEpic = (epic) => {
  // don't add an epic that is already registered/running
  if (epicRegistry.indexOf(epic) === -1) {
    epicRegistry.push(epic);
    epic$.next(epic);
  }
};

// your root epic needs to use `mergeMap` on the epic$ so any
// new epics are composed with the others
export const rootEpic = (action$, store) =>
  epic$.mergeMap(epic =>
    epic(action$, store)
  );

, , , ; response-router getComponent , , , .

, , - , , require('path/to/epics/epic3').epic3. epic3 ? , , , done(null, require('./components/SomePath')), , , , export default ES2015/ES6. , require('./components/SomePath').default - .default! , , , .. , , , , ( )

---

2. console.log, rootEpic, ?

registerEpic:

export const registerEpic = (epic) => {
  // don't add an epic that is already registered/running
  if (epicRegistry.indexOf(epic) === -1) {
    epicRegistry.push(epic);
    console.log(`new epic added: ${epic.name}`);
    epic$.next(epic);
  }
};

, RxJS .do() epic$:

export const rootEpic = (action$, store) =>
  epic$
    .do(epic => console.log(`new epic added: ${epic.name || '<anonymous>'}`))
    .mergeMap(epic =>
      epic(action$, store)
    );

, log <anonymous> , , , combineEpics(...epicRegistry), .