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

一種解決方案是在Observable開始后將用戶限制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: []
    }))
}

這將等到請求完成並將在此之前限制所有其他操作。 問題是我不知道如何獲得油門的返回值。 我能找到的所有油門示例也顯示油門的返回值被丟棄。

總而言之，我希望有一種方法可以等到observable完成再關閉之前。

Answer 1

解決方案是讓你的UI根據redux中的某些狀態禁用按鈕，比如isFetchingRepos ，你的reducer會在收到FETCH_POPULAR_REPOS_REQUEST時將其翻轉為true當FETCH_POPULAR_REPOS_REQUEST為false時FETCH_POPULAR_REPOS_SUCCESS false 。

如果稍后添加錯誤處理，請確保在看到錯誤操作時將其重新設置為false 。

文檔中的ping / pong示例實際上與https://redux-observable.js.org/docs/basics/Epics.html#a-basic-example大致相同。 如何在您的商店中構建/存儲該狀態取決於您 - 對於涉及ID並且可能發生並發請求的更復雜情況，您需要確保狀態是按請求（或者如果使用switchMap則為ID）