Redux Axiosリクエストの取り消し

Question

私はReduxのアクションとレデューサーを持つReact Nativeアプリケーションを持っています。私は、asyncron呼び出しを待つために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}`); 
      }); 
    }; 
}; 

正常に動作していますが、アクションが要求を終えて、私はそれをキャンセルする必要があります前に、時にはユーザーが戻るボタンをクリックしてください。どのように分かれた行動でそれを行うことができますか？私はread thisでしたが、私はアキシャルでアボートのオプションが見つかりませんでした。私はAxys cancellationについて読んでいますが、JSが複数の戻り値をサポートしていないため、関数スコープでcancelメソッドを作成して戻すことができません。

他のReduxアクションでAxiosリクエストをキャンセルする最も良い方法は何ですか？

Answer 1

私はRxJS + Redux Observablesのようなものを使用して、取り消し可能な観測を提供することをお勧めします。

この解決策には少しの学習が必要ですが、問題の部分的な解決策であるredux-thunkと比べて、非同期アクションのディスパッチを処理する方がはるかにエレガントな方法だと思います。

ジェイ・フェルプスの紹介videoをご覧になることをお勧めします。私が提案しようとしているソリューションをよりよく理解するのに役立ちます。

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