reactjs - Redux axios 请求取消

Question

我有一个带有 Redux 操作和 reducer 的 React Native 应用程序。我正在使用 redux-thunk 调度来等待异步调用。我的应用程序中有一个操作:

export const getObjects = (id, page) => {
    return (dispatch) => {
        axios.get(`URL`)
            .then(response => {
                dispatch({ type: OBJECTS, payload: response });
            }).catch(error => {
                throw new Error(`Error: objects -> ${error}`);
            });
    };
};

这工作正常，但有时用户在操作完成请求之前单击后退按钮，我必须取消它。我怎样才能在单独的 Action 中做到这一点？我read this ，但我在 axios 中没有找到任何用于中止的选项。我读到了 axios cancellation ，但它在函数作用域上创建了一个取消方法，我无法返回，因为JS不支持多次返回。

在其他 Redux 操作中取消 axios 请求的最佳方法是什么？

Answer 1

我建议使用 RxJS + Redux Observables 之类的东西，它为您提供可取消的 observables。

这个解决方案需要一点学习，但我相信这是一种处理异步操作调度的更优雅的方式，而 redux-thunk 只是问题的部分解决方案。

我建议观看杰·菲尔普斯的介绍video这可能会帮助您更好地理解我即将提出的解决方案。

redux-observable 史诗使您能够在使用 RxJS Observable 功能时将操作分派(dispatch)到您的商店。正如您在下面所看到的，.takeUntil() 运算符允许您搭载 ajax 可观察对象，并在应用程序中的其他位置发生 MY_STOPPING_ACTION 操作时停止它被调度，例如可以是由 react-router-redux 调度的路由更改操作，例如:

import { Observable } from 'rxjs';

const GET_OBJECTS = 'GET_OBJECTS';
const GET_OBJECTS_SUCCESS = 'GET_OBJECTS_SUCCESS';
const GET_OBJECTS_ERROR = 'GET_OBJECTS_ERROR';
const MY_STOPPING_ACTION = 'MY_STOPPING_ACTION';

function getObjects(id) {
  return {
    type: GET_OBJECTS,
    id,
  };
}

function getObjectsSuccess(data) {
  return {
    type: GET_OBJECTS_SUCCESS,
    data,
  };
}

function getObjectsError(error) {
  return {
    type: GET_OBJECTS_ERROR,
    data,
  };
}

const getObjectsEpic = (action$, store) = action$
  .ofType(GET_OBJECTS)
  .switchMap(action => Observable.ajax({
      url: `http://example.com?id=${action.id}`,
    })
    .map(response => getObjectsSuccess(response))
    .catch(error => getObjectsError(error))         
    .takeUntil(MY_STOPPING_ACTION)
  );