Question

我有一个带Redux动作和Reducer的React Native应用程序。我使用redux-thunk dispatch来等待asyncron调用。我的申请中有一个动作：

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

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

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

Answer 1

我建议使用像RxJS + Redux Observables这样的东西来为你提供可取消的可观察量。

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

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

使用redux-observable史诗可以在使用RxJS Observable功能时向您的商店发送操作。如下所示，.takeUntil()运算符允许您搭载到ajax observable并在应用程序的其他位置停止它，并调度操作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)
  );

Redux axios请求取消

1 个答案: