使用Redux-Observable調度延遲的第二個動作，同時保留第一個動作

我試圖創建一個將採取動作的史詩，然後調度兩個不同的動作，第二個動作延遲兩秒。一堆的嘗試後，這是最好的，我可以這樣做：使用Redux-Observable調度延遲的第二個動作，同時保留第一個動作

const succeedEpic = action$ => 
    action$.filter(action => action.type === 'FETCH_WILL_SUCCEED') 
    .mapTo({ type: 'FETCH_REQUEST' }) 
    .merge(Observable.of({ type: 'FETCH_SUCCESS' }).delay(2000))

不幸的是，它似乎是：

Observable.of({ type: 'FETCH_SUCCESS' }).delay(2000)

立即跑在我的應用程序被加載（而不是在事件歸結父流）。我注意到這一點，因爲我的應用程序加載完成後兩秒鐘，減速器會收到FETCH_SUCCESS操作。我甚至附加一個console.log證實這一點：

const succeedEpic = action$ => 
    action$.filter(action => action.type === 'FETCH_WILL_SUCCEED') 
    .mapTo({ type: 'FETCH_REQUEST' }) 
    .merge(Observable.of({ type: 'FETCH_SUCCESS' }) 
      .do(() => console.log('this has begun')) 
      .delay(2000) 
     )

「這已經開始」被記錄到控制檯應用程序被啓動的時刻。

我懷疑這與Redux-Observable如何自動爲您訂閱有關。

期望的行爲是，我將：

點擊一個按鈕，調度FETCH_WILL_SUCCEED事件。
立即分派一個FETCH_REQUEST事件。
之後兩秒鐘，調度一個FETCH_SUCCESS事件。

來源

2017-02-19 adrianmc

有可能是一個更優雅的解決方案，但爲什麼不只是使用2史詩，並結合他們？

第一個分派讀取請求：

const onFetchWillSucceed = action$ => action$.ofType('FETCH_WILL_SUCCEED') 
    .mapTo({ type: 'FETCH_REQUEST' })

第二個等待2秒，並調度的成功：

const onFetchRequest = action$ => action$.ofType('FETCH_REQUEST') 
    .delay(2000) 
    .mapTo({ type: 'FETCH_SUCCESS' })

而在最後他們只是結合成1史詩

const both = combineEpics(onFetchWillSucceed, onFetchRequest)

來源

2017-02-19 14:32:40

這是行不通的，因爲我的下一步是創建一個「取指會失敗」的史詩，它也分派FETCH_REQUEST，但後續操作是FETCH_FAIL而不是FETCH_SUCCESS。 – adrianmc

事實證明，我需要將我的兩個事件都包含在mergeMap之內。感謝RxJS Gitter頻道的@dorus提供了這個答案。

這是我的工作結果：

const succeedEpic = action$ => 
    action$.filter(action => action.type === 'FETCH_WILL_SUCCEED') 
    .mergeMapTo(Observable.of({ type: 'FETCH_REQUEST' }) 
     .concat(Observable.of({ type: 'FETCH_SUCCESS' }) 
     .delay(1000)))

merge應該代替concat工作爲好，但我想concat可以更好的語義意義。

來源

2017-02-19 19:42:39 adrianmc

使用Redux-Observable調度延遲的第二個動作，同時保留第一個動作

回答

相關問題