startWith运算符Rxjs无法按预期工作

Question

I'm new to Observables and reactive programming rxjs, I have added the library redux-observable to my react/redux application to start playing with it.

I have created an epic for the login process, basically what I want is, once the LOGIN_REQUEST action has been fired, first of all I launch the SET_LOADING action, to display a spinning wheel to the user while the operation is not done, and then I make a rest request to the server to fetch the user.

This is the code I wrote:

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

I'm using the operator startWith to launch the SET_LOADING action as soon the LOGIN_REQUEST is fired (this is the behaviour I would expect). However, I don't know why the SET_LOADING action is being fired when the application is first loaded, without even a previous LOGIN_REQUEST action.

I know the problem is related to the startWith operator because if I remove , then the SET_LOADING action is not fired. So, what am I doing wrong? Why this SET_LOADING action is being fired always, and not only after a LOGIN_REQUEST action?

Thanks

Answer 1

Epic is just an observable and whenever it produces an action it will be dispatched. If you use startWith like this then you're saying that whoever will start subscription will immediately receive setLoadingAction. Instead you should raise loadingAction only if your filter is true.

Something along these lines:

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