懒惰地在react-router onEnter挂钩中添加新的史诗是一种有效的做法吗？

Question

当使用终极版，可观察到有反应的路由器，这将是有意义的异步的文档中添加新的史诗按照指示在这里中路由变化中的OnEnter反应路由器的钩子？

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

    }
}

对Rxjs来说是非常新的东西，可以进行redux观察。这似乎可行，但是奇怪：1.在这种情况下，每次我们导航到/ some-
path时，会再次将epic3添加到rootEpic吗？2.如果我要console.log将哪些史诗添加到rootEpic中，我该怎么做？

编辑以回应@JayPhelps

我可以要求澄清几点吗？

1. registerEpic fn很棒。我一直在使用.distinct（）运算符来解决重复的史诗注册问题，如下所示：

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

这是否是处理惰性史诗注册的同等有效/好方法，如果不是，您能否解释一下原因？

1. 我正在使用具有require.ensure和ES6导入的create-react-app（它们是不同的导入方式吗？），基本上，我复制粘贴了react-router的巨大应用示例，该示例具有require.ensure代码，但是无处不在否则，我在文件顶部使用import语句。

因此，将史诗和顶部的registerEpic
fn导入似乎可行，同时将路径放入require.ensure第一个参数似乎也可行。如果我使用require.ensure和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' ) )
            } )
        }
    }

1. 关于在“ getComponent” fn中注册史诗以进行异步加载-我认为在这里进行同步加载实际上是可取的，这样直到史诗被注册后路由组件才呈现。如果用户尝试在路线上执行某些操作（例如获取一些详细信息或提交表单），而该操作要求该史诗已被注册而该史诗尚未被注册，该怎么办？

2. 在react-router 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将是注册史诗的最佳场所，而不是reducer。（我在github上找到了您的登录示例，因此看起来很熟悉）。是正确的，还是我完全不在基地？我知道.concat（）是同步的，并且我知道redux是同步的-
我不确定registerEpics（）是否是同步的，但是使用reducer注册史诗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

在这种情况下，每次我们导航到/ some-path时，会再次将epic3添加到rootEpic吗？

如果您使用的反应路由器和做代码分裂，你居然要添加您的内部必要的史诗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'));
        });
      }
    };

在哪里/曾经/这个/是/epics/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)
      );

我创建了一个注册功能，以确保您不添加已经添加的史诗。getComponent 每当 您输入该路由时，react-router都会调用
一次 ，因此这一点很重要，因此您不会有两个正在运行的同一史诗实例。

但是请注意，当涉及到之类的东西时，我的代码做出了一些错误的假设require('path/to/epics/epic3').epic3。您的epic3实际上是作为命名属性导出的吗？我以为是这样，但是我注意到您正在执行此操作done(null,require('./components/SomePath'))，如果您使用export defaultES2015 /
ES6模块导出该组件，我的直觉告诉我可能无法正常工作。如果是这样，则实际上是在require('./components/SomePath').default--note
.default！因此，虽然我的代码是一般性想法，但您应该特别注意require路径，导出的属性等。您说它似乎可以正常工作，所以也许您的设置有所不同（或者我只是错了，呵呵）

1. 如果我想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);
      }
    };

但是您也可以.do()在epic$主题上使用RxJS 运算符更具体地执行此操作：

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

但是，这将<anonymous>是第一次记录，因为通过的第一个是combineEpics(...epicRegistry)将多个史诗合并为一个匿名史诗的结果。