How to use rxjs ajax operator instead of axios in my react project?

Question

I am new to rxjs and want to know how to handle this use case.

This is axios promise, how to convert it so that it uses rxjs's ajax operator

export const onLogin = ({ username, password }) =>
  axios({
    method: "post",
    url: O_TOKEN_URL,
    data: querystring.stringify({
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
      grant_type: "password",
      username,
      password
    }),
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });

This is my action,

export const onSubmit = payload => ({
  type: FETCH_USER,
  payload // payload contains username & password
});

This is my epic for now,

export const loginEpic = action$ =>
  action$
    .ofType(FETCH_USER)
    // somehow import onLogin from above and resolve it
    // then, dispatch FETCH_USER_FULFILLED
    .do(
        payload => console.log(payload.username, payload.password)
        // i am able to console these username and password
    )
    .mapTo(() => null);

I want to resolve onLogin function somehow, when FETCH_USER is dispatched, using rxjs's ajax operator.
And, I want onLogin function, which returns promise/observable, to be set up in different file so that I can keep track of all the ajax requests

These are the packages,

"redux-observable": "^0.18.0",
"rxjs": "^5.5.10",

Could you also point me to a documentation that covers this and various use case for post, put ... requests? I couldn't find any.

score 7 · Accepted Answer · answered Apr 21 '18 at 21:40

The ajax config object is fairly similar to what you already have. I'm assuming the data property for the axios request is the request body.

import {ajax} from 'rxjs/observable/dom/ajax';

export const onLogin = ({ username, password }) =>
  ajax({
    method: "POST",
    url: O_TOKEN_URL,
    body: JSON.stringify({
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
      grant_type: "password",
      username,
      password
    }),
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });

Your epic would look something like this:

export const loginEpic = action$ =>
  action$
    .ofType(FETCH_USER)
    .mergeMap(action =>
      onLogin(action.payload)
        // map will be called when the request succeeded
        //   so we dispatch the success action here.
        .map((ajaxResponse) => fetchUserFulfilled())
        // catch will be called if the request failed
        //   so we dispatch the error action here.
        // Note that you must return an observable from this function.
        // For more advanced cases, you can also apply retry logic here. 
        .catch((ajaxError, source$) => Observable.of(fetchUserFailed()))
    );

Where fetchUserFulfilled and fetchUserFailed are action creator functions.

There does not seem to be much documentation of the RxJS 5 ajax method yet. Here are the links to the official v5 docs for the AjaxRequest, AjaxResponse and AjaxError. The AjaxError object in particular has 0 information so far (at the time of this answer) so you will need to rely on the source code if you need to use this object for more than a trigger to tell the user that something went wrong. The ajax source code is here.

How to use rxjs ajax operator instead of axios in my react project?

1 Answers1