当 axios 处理网络请求时如何使用 redux-observable

Question

我想在我的项目中使用 redux-observable，因为 if 的动作可以是 canceld.But 官方给出了使用 rxjs 的 ajax 的例子，我想使用 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;
  }
};

我想用 axios 替换 fetchAjax

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

Answer 1

我不明白使用 axios 的附加价值，因为来自 rxjs 的 ajax 会简化您的代码（它已经在使用 observables）。但是，如果您真的想要，那绝对是可能的。在下面的示例中，我假设您正在使用负载由 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)),
  ))
);

另外：请记住，取消将阻止更新 redux 存储，但不会取消处理 axios 请求。

当 axios 处理网络请求时如何使用 redux-observable

how to use redux-observerable when the network requset handle by axios

react-native

axios

redux-observable