Redux 액티비티 요청 취소

나는 Redux 액션 및 리듀서가있는 React Native 애플리케이션을 보유하고 있습니다. 나는 asyncron 호출을 기다리는 데 redux-thunk 디스패치를 사용하고 있습니다. 이 내 응용 프로그램에서 작업입니다 :Redux 액티비티 요청 취소

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에서 중단 옵션을 찾지 못했습니다. 나는 축수 cancellation에 대해 읽었지 만 JS가 다중 반환을 지원하지 않기 때문에 함수 범위에서 취소 메서드를 만들었고 반환 할 수 없습니다.

다른 Redux 작업에서 액시오 요청을 취소하는 가장 좋은 방법은 무엇입니까?

출처

2017-05-15 PumpkinSeed

당신이 원하는 것을하기위한 또 다른 방법은 Axios가 요청을 완료하게하고 다른 액션 (예 : setCanceled)을 전달하는 상태에서'cancelled : true' 플래그를 설정하는 것입니다. 요청이 완료되고 약속이 해결되면 먼저 취소 된 플래그를 확인합니다. 그것이 사실이라면, 당신은 성공 행동을 파견하지 않을 것입니다. 그것은 당신의 사건을 해결합니까? –

취소 가능한 관찰 정보를 제공하는 RxJS + Redux Observables와 같은 것을 사용하는 것이 좋습니다.

이 솔루션을 사용하려면 약간의 학습이 필요하지만, 문제의 부분 솔루션 인 redux-thunk 대 비동기 작업 발송을 처리하는 것이 훨씬 더 우아한 방법이라고 생각합니다.

나는 제이 펠프스 소개 video을 보는 것이 좋습니다. 제가 제안하려고하는 해결책을 더 잘 이해하는 데 도움이 될 수 있습니다.

epic을 사용하면 RxJS Observable 기능을 사용하는 동안 작업을 작업장으로 보낼 수 있습니다. .takeUntil() 운영자가 당신이 ajax 관찰에 피기 백 그리고 만약 다른 응용 프로그램에서 중지 할 수 있습니다 아래 당신이 볼 수 있듯이, 예를 들어 react-router-redux에 의해 파견 된 경로 변경 작업을 예를 들어이 될 수 MY_STOPPING_ACTION가 전달되는 작업 :

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

출처

2018-01-11 21:52:11 Logicgate

Redux 액티비티 요청 취소

답변

관련 문제