我是Observables和反应式编程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操作(这是我期望的行为)。
但是,我不知道为什么在首次加载应用程序时甚至没有先前的LOGIN_REQUEST操作时都会触发SET_LOADING操作。

我知道问题与startWith运算符有关,因为如果我删除,则不会触发SET_LOADING操作。那么,我在做什么错呢?为什么总是(不仅在执行LOGIN_REQUEST之后)触发此SET_LOADING操作?

谢谢

最佳答案

史诗只是一个可观察到的东西,只要它产生一个动作,它就会被调度。如果您像这样使用startWith,那么您说的是将开始进行订阅的任何人都将立即收到setLoadingAction。相反,只有在您的过滤条件为true时,才应提高loadAction。

遵循以下原则:

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

10-08 08:45