javascript - 在redux-observable中异步添加epic到中间件

Question

我正在尝试评估 redux-observable。只是浏览文档，我正在尝试让异步史诗加载事情继续下去。我从文档中创建了 jsbin 的一个分支，它基本上尝试添加BehaviourSubject 内容的异步使用。

http://jsbin.com/bazoqemiqu/edit?html,js,output

在“PING PONG”示例中，我添加了“OTHER”操作，然后使用BehaviorSubject.next(如文档中所述)添加该史诗。但是，当我运行该示例时，会发生 PING 操作被触发，然后是无穷无尽的“其他”操作，但从未触发 PONG 操作。为了看到这一点，我添加了 reduxLogger。在开发工具控制台中查看它，因为 jsbin 控制台无法正确呈现它。

我的问题是我做错了什么？为什么 PONG 操作永远不会被调度？

Answer 1

您的otherEpic是一个无限“循环”(随着时间的推移)

const otherEpic$ = action$ => 
  action$
    .delay(1000)
    .mapTo({ type: OTHER });

此史诗的行为是“当收到任何操作时，等待 1000 毫秒，然后发出另一个 OTHER 类型的操作”。由于您的 Epics 发出的操作像任何其他操作一样经历正常的 store.dispatch 周期，这意味着在收到第一个 PING 后，它将发出一个 OTHER 1000 毫秒后，将再次被同一史诗递归接收，再等待 1000 毫秒并发出另一个 OTHER，永远重复。

我不确定这是否为人所知，但想指出这一点。

在 rootEpic 开始运行/订阅之前，您 next() 进入 epic$ 的BehaviorSubject。

BehaviorSubjects 将保留发出的最后值，并在有人订阅时立即提供该值。由于您的 rootEpic 尚未被中间件调用和订阅，因此您将替换 initial 值，因此仅发出 otherEpic 并通过 epic$.mergeMap 的东西。

在具有异步/捆绑拆分的实际应用程序中，当您调用 epic$.next(newEpic) 时，应该始终在中间件订阅了您的 rootEpic 之后，并且收到了您提供给 BehaviorSubject 的初始史诗。

这是该工作的演示:http://jsbin.com/zaniviz/edit?js,output

const epic$ = new BehaviorSubject(combineEpics(epic1, epic2, ...etc));
const rootEpic = (action$, store) =>
  epic$.mergeMap(epic => {console.log(epic)
    return epic(action$, store)
  });

const otherEpic = action$ =>
  action$.ofType(PONG)
    .delay(1000)
    .mapTo({ type: OTHER });

const epicMiddleware = createEpicMiddleware(rootEpic);
const store = createStore(rootReducer,
  applyMiddleware(loggerMiddleware, epicMiddleware)
);

// any time AFTER the epicMiddleware
// has received the rootEpic
epic$.next(otherEpic);

文档在示例中说“稍后”，但我现在发现这还不够清楚。我将尝试进一步澄清这一点。

<小时/>

您还可以找到this other question on async loading of Epics如果您将 React-router 与 Webpack 的 require.enquire() 拆分一起使用，则非常有用。

如果我可以进一步澄清其中任何一个，请告诉我🖖