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

在这种情况下，每次我们导航到/ 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 || ''}`))
.mergeMap(epic =>
epic(action$, store)
);


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