在Redux-observable中將史詩異步添加到中間件

Question

我正在嘗試評估redux-observable。 只是查看文檔，我正在嘗試使異步史詩加載過程繼續進行。 我從文檔創建了一個jsbin的fork，它基本上試圖添加BehaviorSubject東西的異步用法。

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

在該“ PING PONG”示例中，我添加了一個“ OTHER”操作，然后使用BehaviorSubject.next（如文檔中所述）添加該史詩。 但是，當我運行該示例時，發生的是觸發了PING動作，隨后是無盡的“ OTHER”動作流，但從未觸發PONG動作。 為了看到這一點，我添加了reduxLogger。 由於jsbin控制台無法正確呈現它，因此請在開發工具控制台中查看它。

我的問題是我做錯了什么？ 為什么永遠不會派出PONG動作？

Answer 1

您的otherEpic是無限的“循環”（隨着時間的流逝）

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

這部史詩具有行為“收到所有的任何行動時，等待1000毫秒，然后發出型的另一個動作OTHER ”。 並且由於您的Epics發出的動作像其他任何動作一樣經過正常的store.dispatch周期，這意味着在收到第一個PING之后，它將在1000ms之后發出OTHER ，然后由同一史詩再次遞歸接收，請等待再發射1000毫秒並發射另一個 OTHER ，直到永遠重復一次。

我不確定是否知道這一點，但想指出。

您可以在rootEpic開始運行/對其進行預訂之前，將next()插入epic$的BehaviorSubject中。

BehaviorSubjects將保留最后發出的值，並在有人訂閱時立即提供。 由於您的rootEpic尚未被中間件調用和預訂，因此您將替換初始值，因此僅發出otherEpic並通過epic$.mergeMap東西運行。

在具有異步/捆綁拆分的實際應用程序中，何時調用epic$.next(newEpic)應該始終在中間件訂閱了rootEpic並收到您提供給BehaviorSubject的初始事件之后。

這是工作原理的演示： http : //jsbin.com/zaniviz/edit?js，輸出

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);

文檔在示例中說“稍后再說”，我現在還不太清楚。 我將嘗試進一步澄清。

---

如果您使用帶有Webpack的require.enquire()拆分的react-router，則可能還會發現關於Epics的異步加載的另一個問題很有用。

讓我知道是否可以進一步澄清這些問題🖖