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}`);
            });
    };
};

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

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

Answer 1

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

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

我建议观看 Jay Phelps 的介绍视频，这可能会帮助您更好地理解我即将提出的解决方案。

史诗redux-observable使您能够在使用 RxJS Observable 功能时将操作分派到您的商店。正如您在下面看到的，.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)
  );