как использовать redux-наблюдаемый, когда сетевые реквизиты обрабатываются axios

Question

Я хочу использовать redux-наблюдаемый для моего проекта, потому что действие if может быть отменено. Но официальный пример дает пример, который использует ajax из rxjs, я хочу использовать axios в качестве сетевой библиотеки, как это реализовать.

пример кода:

const FETCH_USER = 'FETCH_USER';
const FETCH_USER_FULFILLED = 'FETCH_USER_FULFILLED';
const FETCH_USER_REJECTED = 'FETCH_USER_REJECTED';
const FETCH_USER_CANCELLED = 'FETCH_USER_CANCELLED';

const fetchUser = id => ({ type: FETCH_USER, payload: id });
const fetchUserFulfilled = payload => ({ type: FETCH_USER_FULFILLED, payload });
const cancelFetchUser = () => ({ type: FETCH_USER_CANCELLED });

const fakeAjax = url => of({
  id: url.substring(url.lastIndexOf('/') + 1),
  firstName: 'Bilbo',
  lastName: 'Baggins'
}).pipe(delay(1000));

const fetchUserEpic = action$ => action$.pipe(
  ofType(FETCH_USER),
  mergeMap(action => fakeAjax(`/api/users/${action.payload}`).pipe(
    map(response => fetchUserFulfilled(response)),
    takeUntil(action$.pipe(
      filter(action => action.type === FETCH_USER_CANCELLED)
    ))
  ))
);

const users = (state = {}, action) => {
  switch (action.type) {
    case FETCH_USER:
        return {};

    case FETCH_USER_FULFILLED:
      return {
        ...state,
        [action.payload.id]: action.payload
      };

    default:
      return state;
  }
};

const isFetchingUser = (state = false, action) => {
  switch (action.type) {
    case FETCH_USER:
      return true;

    case FETCH_USER_FULFILLED:
    case FETCH_USER_CANCELLED:
      return false;

    default:
      return state;
  }
};

Я хочу заменить fetchAjax использовать axios

const fakeAjax = url,params =>{ return axios({
        method: 'post',
        url: url,
        data: params
    });
}

Answer 1

Я не понимаю добавленной ценности использования axios, поскольку ajax из rxjs упростит ваш код (он уже использует наблюдаемые). Однако, если вы действительно хотите, это определенно возможно. В приведенном ниже примере я предполагаю, что вы используете действия, в которых полезная нагрузка состоит из URL-адреса и данных запроса.

const fetchUserEpic = action$ => action$.pipe(
  ofType(FETCH_USER),
  mergeMap(action => from(axios({method: 'get', action.payload.url, data: action.payload.data})).pipe(
    map(response => fetchUserFulfilled(response)),
    takeUntil(action$.ofType(FETCH_USER_CANCELLED)),
  ))
);

Также: имейте в виду, что отмена будет препятствовать обновлению хранилища редуксов, но не отменяет обработку запроса axios.