javascript - startWith 运算符 Rxjs 未按预期工作

Question

我是 Observables 和响应式(Reactive)编程 rxjs 的新手，我已将 redux-observable 库添加到我的 React/redux 应用程序中以开始使用它。

我为登录过程创建了一个史诗，基本上我想要的是，一旦触发 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 操作(这是我期望的行为)。 但是，我不知道为什么在首次加载应用程序时会触发 SET_LOADING 操作，甚至没有之前的 LOGIN_REQUEST 操作。

我知道问题与 startWith 运算符有关，因为如果我删除 ，则不会触发 SET_LOADING 操作。那么，我做错了什么？为什么总是触发此 SET_LOADING 操作，而不是仅在 LOGIN_REQUEST 操作之后触发？

谢谢

Answer 1

Epic 只是一个可观察的对象，每当它产生一个 Action 时，它就会被调度。如果你像这样使用 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)));
};