redux-observable：一旦至少觸發另一個動作，映射到一個動作

我有一個SPA正在從服務器加載一些全局/共享數據（我們稱之爲APP_LOAD_OK）和頁面特定數據（DASHBOARD_LOAD_OK）。我想顯示一個加載動畫，直到APP_LOAD_OK和DASHBOARD_LOAD_OK都被分派。redux-observable：一旦至少觸發另一個動作，映射到一個動作

現在我有一個在RxJS中表達這個問題。我需要的是在每個DASHBOARD_LOAD_OK後觸發一個動作，只要至少有至少一個APP_LOAD_OK。這樣的事情：

action$ 
    .ofType(DASHBOARD_LOAD_OK) 
    .waitUntil(action$.ofType(APP_LOAD_OK).first()) 
    .mapTo(...)

有誰知道，我可以如何表達它在有效的RxJS？

來源

2017-01-23 davido

我想避免實現一個新的操作符，因爲我認爲我的RxJS知識不夠好，但結果比我想象的要容易。如果有人有更好的解決方案，我會保持開放。您可以在下面找到代碼。

Observable.prototype.waitUntil = function(trigger) { 
    const source = this; 
    let buffer = []; 
    let completed = false; 

    return Observable.create(observer => { 
    trigger.subscribe(
     undefined, 
     undefined, 
    () => { 
     buffer.forEach(data => observer.next(data)); 
     buffer = undefined; 
     completed = true; 
     }); 

    source.subscribe(
     data => { 
     if (completed) { 
      observer.next(data); 
     } else { 
      buffer.push(data); 
     } 
     }, 
     observer.error.bind(observer), 
     observer.complete.bind(observer) 
    ); 
    }); 
};

來源

2017-01-23 12:32:05 davido

在這個實現中有幾個危險，你應該知道：a）你沒有清理你創建的訂閱（x2），做一個好的操作符，你應該返回你在'create'中創建的訂閱，b）'緩衝區'和'完成'創建*每個調用*不*每個訂閱*，這是共享狀態，這對於冷觀察者來說是沒有代價的（提示嘗試訂閱這個流不止一次，你可能會看到一些奇怪的行爲）。 – paulpdaniels

你是對的，非常感謝你清理它。 :)沒有多少考慮，我只是很高興我終於有了一些解決方案。（如果我有更多時間，我可能會稍後再編輯它，或者如果你願意，可以自由地這麼做） – davido

如果你想第一APP_LOAD_OK後收到的每DASHBOARD_LOAD_OK您可以簡單地使用skipUntil：

action$ .ofType(DASHBOARD_LOAD_OK) 
    .skipUntil(action$.ofType(APP_LOAD_OK).Take(1)) 
    .mapTo(...)

這只是開始第一APP_LOAD_OK後發射DASHBOARD_LOAD_OK動作，所有動作之前被忽略。

來源

2017-01-23 14:01:59

我也考慮過這個解決方案。問題是，最初（在頁面加載時），兩個異步「任務」同時啓動，因此它們可以按任意順序完成。這意味着有時加載動畫永遠不會完成（如果DASHBOARD_LOAD_OK第一次到達）。 – davido

如果你只需要它們都發射一次，那麼你可以使用'Rx.Observable.zip（action $ .ofType（DASHBOARD_LOAD_OK），action $ .ofType（APP_LOAD_OK））。take（1）.Map/** /）' –

您可以使用withLatestFrom，因爲它將等待兩個光源在發射前至少發射一次。如果使用DASHBOARD_LOAD_OK作爲主要來源：

action$.ofType(DASHBOARD_LOAD_OK) 
    .withLatestFrom(action$.ofType(APP_LOAD_OK) /*Optionally*/.take(1)) 
    .mapTo(/*...*/);

這可以讓你保持發射在DASHBOARD_LOAD_OK觸發一次以上的情況。

來源

2017-01-23 18:07:56 paulpdaniels

redux-observable：一旦至少觸發另一個動作，映射到一個動作

回答

相關問題