リクエストが終了するまでrxjsスロットルフェッチ

Question

私は毎回異なる情報を返す要求を行うObservableを持っています。この観察可能なことは、ユーザがボタンをクリックすることによって呼び出される。情報の要求が返される前にユーザーがこのボタンをクリックしないようにしたいのですが、返されたら、ユーザーがもう一度更新をクリックできるようにします。

これは、いつでもユーザーを停止させることなくリクエストしたものです。

const fetchRepos =() => 
    fetch('https://api.github.com/search/repositories?q=+language:javascript&sort=updated&order=desc') 
    .then(response => response.json()) 

export function fetchReposEpic(action$: any) { 
    return action$.ofType(FETCH_POPULAR_REPOS_REQUEST) 
    .switchMap(fetchRepos) 
    .map(data => ({ 
     type: FETCH_POPULAR_REPOS_SUCCESS, 
     payload: data.items 
    })) 
} 

一つの解決策は、観測後に500ミリ秒のためにユーザを絞ることです、私は唯一の要求は、より悪いまだ、かかる場合がありますどのくらいの時間を推定していますされ

export function fetchReposEpic(action$: any) { 
    return action$.ofType(FETCH_POPULAR_REPOS_REQUEST) 
    .throttleTime(500) 
    .switchMap(fetchRepos) 
    .map(data => ({ 
     type: FETCH_POPULAR_REPOS_SUCCESS, 
     payload: data.items 
    })) 
} 

ここで問題を開始し、要求が終了する場合この時間の前に、ユーザはボタンをクリックすることができ、クリックは無視される。

私が持っているソリューションに最も近いのは、フェッチを約束して絞り込むことです。

export function fetchReposEpic(action$: any) { 
    return action$.ofType(FETCH_POPULAR_REPOS_REQUEST) 
    .throttle(fetchRepos) 
    .map(data => ({ 
     type: FETCH_POPULAR_REPOS_SUCCESS, 
     payload: [] 
    })) 
} 

これは、リクエストが完了するまで待機し、それまでのすべてのアクションを抑制します。問題は、スロットルの戻り値を取得する方法がわからないことです。すべてthrottle examples私はスロットルの返却値が捨てられていることもわかりました。

要約すると、私は観察可能なものが完了するまで待ってからもう一度それを放つ方法が欲しい。あなたのUIがisFetchingReposようReduxの中でいくつかの状態に基づいて、ボタンを無効にするとFETCH_POPULAR_REPOS_SUCCESSがあるとき、あなたの減速がFETCH_POPULAR_REPOS_REQUESTが受信されtrueとfalseにこれを反転するため

Answer 1

ソリューションです。

エラー処理を後で追加する場合は、エラー処理が発生したときにもfalseに戻してください。

ドキュメントのping/pongの例は、実際はほぼ同じものhttps://redux-observable.js.org/docs/basics/Epics.html#a-basic-exampleです。あなたの店舗でその状態を構造化/格納する方法はあなた次第です - IDが関与し、同時リクエストが発生するより複雑なケースでは、状態がリクエスト（またはswitchMapを使用している場合ID）であることを確認する必要があります