2

The following code works. It does an ajax request and then call 2 actions, on at a time:

export const loadThingsEpic = action$ => {

  return action$.ofType(LOAD_THINGS)
    .mergeMap(({things}) => {
      const requestURL = `${AppConfig.serverUrl()}/data/things`;
      return ajax.getJSON(requestURL)).map(response => {
        return finishLoadingThings(response);
      }).map(() => {
        return sendNotification('success');
      });
    })
    .catch(e => {
      return concat(of(finishLoadingThings({ things: {} })),
                    of(sendNotification('error')));

    });   
}}

But this code does not:

export const loadThingsEpic = action$ => {

  return action$.ofType(LOAD_THINGS)
    .mergeMap(({things}) => {
      const requestURL = `${AppConfig.serverUrl()}/data/things`;
      return ajax.getJSON(requestURL).switchMap(response => {
        return concat(of(finishLoadingThings(response)),
                      of(sendNotification('success')));
      });
    })
    .catch(e => {
      return concat(of(finishLoadingThings({ things: {} })),
                    of(sendNotification('error')));
    });   
}

I've replace the map by a switchMap to merge 2 actions together (as seen in many other post). It works in the catch if an exception is thrown. I'm wondering whats wrong with the code. I'm guessing it's because I can't seem to really grasp when to use: map, swicthMap and mergeMap.

sendNotification and finishLoadingthings returns action object:

export function finishLoadingThings(data: any) {
  return {
    type: FINISH_LOADING_THINGS,
    data,
  };
}

Thanks!

3
  • Just noticed that the first code seems to work, but the first action is never received by a reducer... I'm very so confused...
    – ThePainnn
    Nov 20, 2017 at 4:07
  • I think I can help. Can you simplify the examples or provide the definitions of the various functions used? Want to make sure it’s clear what they all do and return.
    – jayphelps
    Nov 20, 2017 at 4:19
  • I simplified the example. Thanks!
    – ThePainnn
    Nov 20, 2017 at 13:27

2 Answers 2

2

The code provided as-is appears to work as intended: https://jsbin.com/becapin/edit?js,console I do not receive a "invalid object where stream expected" error when the ajax succeeds or fails.

Are you sure the error is coming from this code?


On a separate note, you might be happy to hear that Observable.of supports an arbitrary number of arguments, each one will be emitted after the other. So instead of this:

.switchMap(response => {
  return concat(of(finishLoadingThings(response)),
                of(sendNotification('success')));
});

You can just do this:

.switchMap(response => {
  return of(
    finishLoadingThings(response),
    sendNotification('success')
  );
});

This would not have caused a bug though, it's just cleaner.

1
  • After cleaning up my epic, it seem to work out of the box. Thanks for the tips, this really help! RxJS is a bit hard to get started with, but I really think it will pay off when the app grows.
    – ThePainnn
    Nov 22, 2017 at 2:07
1

I manage to fix my problem, by doing the switchMap at the same level than the mergeMap. Like this:

export const loadThingsEpic = action$ => {

  return action$.ofType(LOAD_THINGS)
    .mergeMap(({things}) => {
      const requestURL = `${AppConfig.serverUrl()}/data/things`;
      return ajax.getJSON(requestURL).switchMap(response => {
        return of(response);
      });
    })
    .switchMap((res) => {
       return concat(of(finishLoadingThings(res.value)),
                      of(sendNotification('success')));
    })
    .catch(e => {
      return concat(of(finishLoadingThings({ things: {} })),
                    of(sendNotification('error')));
    });   
}

Don't quite get it yet.

3
  • placing the catch on the top-level is not the same as inside the mergeMap. It's very likely you won't want that behavior--the epic stops listening for future LOAD_THINGS when there's an error.
    – jayphelps
    Nov 20, 2017 at 22:46
  • Yes I noticed that. Same thing with takeUntil at the top level: as soon as the action type is receive the epic just stop.
    – ThePainnn
    Nov 22, 2017 at 2:09
  • To better understand why, try to learn more about how Observable chains actually work. You'll really level-up once you do: medium.com/@benlesh/…
    – jayphelps
    Nov 22, 2017 at 2:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.