问题:在 redux-observable 中异步添加史诗到中间件

我正在尝试评估 redux-observable。只是查看文档,我正在尝试进行异步史诗加载。我从文档中创建了一个 jsbin 的分支,它基本上试图添加 BehaviorSubject 东西的异步使用。

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

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

我的问题是我做错了什么?为什么 PONG 动作永远不会被派发?

解答

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

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

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

我不确定这是否已知,但想指出这一点。

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

BehaviorSubjects 将保留发出的 last 值,并在有人订阅时立即提供。由于您的 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);

该文档在示例中说“稍后”,我现在看到的还不够清楚。我将尝试进一步澄清这一点。

如果您将 react-router 与 Webpack 的require.enquire()拆分一起使用,您可能还会发现this other question on async loading of Epics很有用。

如果我能进一步澄清这些,请告诉我🖖