startWith運算符Rxjs無法按預期工作

Question

我是Observables和反應式編程rxjs的新手，我已經在我的react / redux應用程序中添加了redux-observable庫以開始使用它。

我為登錄過程創建了一個史詩，基本上我想要的是，一旦觸發了LOGIN_REQUEST操作，我首先啟動SET_LOADING操作，以在操作未完成時向用戶顯示一個旋轉的轉輪，然后我向服務器發出休息請求以獲取用戶。

這是我寫的代碼：

  const loginEpic = (action$) => {
  console.log('EPIC LOGIN EXECUTED');
  return action$.filter(action => action.type === LOGIN_REQUEST)
        .mergeMap(action => ajax.post(getUrl(constants.LOGIN),
            action.payload))
        .map(response => setUser(response.response))
        .takeUntil(action$.ofType(LOGIN_REQUEST_CANCELLED));
        .startWith(setLoading(true));
};

觸發LOGIN_REQUEST后，我正在使用運算符startWith啟動SET_LOADING操作（這是我期望的行為）。 但是，我不知道為什么在首次加載應用程序時甚至沒有先前的LOGIN_REQUEST操作時都會觸發SET_LOADING操作。

我知道問題與startWith運算符有關，因為如果我刪除，則不會觸發SET_LOADING操作。 那么，我在做什么錯呢？ 為什么總是（不僅在執行LOGIN_REQUEST之后）觸發此SET_LOADING操作？

謝謝

Answer 1

史詩只是一個可觀察到的東西，只要它產生一個動作，它就會被調度。 如果您像這樣使用startWith，那么您說的是將開始進行訂閱的任何人都將立即收到setLoadingAction。 相反，只有在您的過濾器為true時，才應提高loadingAction。

遵循以下原則：

 const loginEpic = (action$) => {
  console.log('EPIC LOGIN EXECUTED');
  return action$.filter(action => action.type === LOGIN_REQUEST)
        .mergeMap(action => Observable.merge(
              Observable.of(setLoading(true)), 
              Observable.fromPromise(ajax.post(getUrl(constants.LOGIN),
                   action.payload))
        .map(response => setUser(response.response))
        .takeUntil(action$.ofType(LOGIN_REQUEST_CANCELLED)));
};