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

在这种情况下，每次我们导航到/ 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 default

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

将多个史诗合并为一个匿名史诗的结果。