React-Redux Drop HTTPリクエスト

Question

特定のHTTP要求が進行中である間、キャンセルボタンを表示しているReact-Reduxアプリケーションを構築しています。要求が正常に実行されると、UIに結果が表示され、ユーザーがキャンセルボタンを押すと、UIには何か違うものが表示されます。

今すぐ私のリクエストを開始し、リクエストが完了したらReduxストアを更新するために、次の機能を使用しています。

export function doFetch(url) { 
    return dispatch => { 
     fetch(url) 
      .then((json) => dispatch({type: types.MY_SUCCESS_ACTION}, json)) 
      .catch((error) => dispatch({type: types.MY_FAILURE_ACTION, error})); 
    } 
} 

今、上記のコードでは使用がキャンセルボタンをクリックした場合を処理しません。今やES7はcancelable promisesでいくつかの仕事をしていますが、これは私のユースケースに合っている可能性があります。なぜなら、ユーザーがキャンセルボタンを押したときにキャンセルできるリクエストの約束を参照するからです。

どうしたらいいですか？ユーザーがキャンセルボタンを押すと、現在のHTTPリクエストを破棄するアクションをディスパッチできるように、何らかの方法が必要です。

ソリューション

import Bluebird from 'bluebird'; 
Bluebird.config({ 
    cancellation: true 
}); 
fetch.promise = Bluebird; 
let curReqPromises = [];  

function doFetch(url) { 
     return dispatch => { 
      curReqPromises.push(bluebirdRequest(url) 
       .then((json) => dispatch({type: types.MY_SUCCESS_ACTION}, json)) 
       .catch((error) => dispatch({type: types.MY_FAILURE_ACTION, error})); 
     } 
    } 

    function bluebirdRequest(url) { 
     return new Bluebird((resolve, reject, onCancel) => { 
      makeFetch(url) 
       .then((json) => resolve(json)) 
       .catch((error) => reject(json)); 

      onCancel(() => { 
       console.log('I was cancelled'); 
      }); 
     }); 
    } 

Answer 1

約束は解約にする方法はいくつかあります。

1. 使用rxjs
2. 使用bluebird

あなたがそれらのいずれかを実行中に興味がないなら、あなたは取り消しアクションを作成し、その結果を無視して、手動でキャンセルのケア状態がcancelledのときにフェッチします。約束が解決したら、状態をnotCancelledにリセットできますが、フェッチからの状態の突然変異は避けてください。それは乱雑で、rxjsやbluebirdのセールスポイントの1つです。どちらもキャンセルが組み込まれています。