web-dev-qa-db-ja.com

redux-thunkを使用した以前の非同期アクションのキャンセル

Redux-thunkミドルウェアを使用してAjaxリクエストを作成および処理するReact/Reduxアプリを構築しています。私はかなり頻繁に発生する特定のサンクを持っています。以前に開始したAjaxリクエストをキャンセルしてから、新しいサンクを発生させます。これは可能ですか？

reactjsreduxredux-thunk
13
Steven Musumeche

1つのアプローチは、ランダムなIDを与え、結果を処理する前にそのステータスをチェックすることにより、それらのリクエストをキャンセル済みとしてマークすることです。

これを行う方法は、最初のディスパッチ（サンク内）でこの呼び出しにランダムなIDを割り当て、結果を処理する前にレデューサーでチェックすることです。

_const actionId = Math.random();
dispatch({type: AJAX_LOAD_CONST, id:actionId })
_

すべてのご依頼をキャンセルしたい場合

dispatch({type:HANDLE_AJAX_RESPONSE, id:actionId, results: json })

結果を処理したいときは、あなたのIDを送信することを忘れないでください

そして減速機には次のようなものがあります：

_function reducer(state = initialState, action) {
  switch (action.type) {
    case actions.AJAX_LOAD_CONST:
      return Object.assign({}, state, { ajax: state.ajax.concat(action.id) });
    case actions.CANCEL_ALL_AJAX:
      return Object.assign({}, state, { ajax: [] });
    case actions.HANDLE_AJAX_RESPONSE:
      if (state.ajax.includes(action.id) {
        //return state reduced with action.results here
      }
      return state;
  }
}
_

XMLHttpRequestまたはそのラッパー（JQuery？）のいずれかを使用する場合は、リクエスト自体を保存してrequest.abort（）を呼び出すこともできます。新しいフェッチAPIを使用する場合、プロミスにはこの動作が欠けているため、この贅沢はありません。

11
mrras

Jquery ajaxを使用している場合は、アクションの作成者にpromiseを返させることができます。promiseはディスパッチ関数によって返され、それを中止することができます。次に例を示します。

アクションクリエーター

function doSomething() {
  return (dispatch) => {
    return $.ajax(...).done(...).fail(...);
  }
}

あなたのコンポーネント

  componentDidMount(){
    this.previousPromise = this.props.dispatch(doSomething());
  }

  somefnct() {
    this.previousPromise.abort();
  }
4
Mohamed Ramrami

私は最近、同じ問題に直面しました。この問題では、保留中または古くなった非同期reduxアクションをキャンセルする必要がありました。 reduxアクションのキャンセルミドルウェアを作成することで解決しました。

Reduxには、ミドルウェアの概念があります。したがって、リクエストを送信すると、ミドルウェアのリストが表示されます。 APIが応答を返すと、その応答はReduxストアに到達し、最終的にUIに到達する前に、いくつかのミドルウェアを通過します。

次に、キャンセルミドルウェアを作成したとします。 api要求は、開始時にこのミドルウェアを通過し、api応答は、apiが応答するときにこのミドルウェアを通過します。

Reduxの各APIリクエストはアクションに関連付けられており、各アクションにはタイプとペイロードがあります。

ミドルウェアを作成します。これは、API要求が行われるたびに、関連付けられているアクションタイプを格納します。それとともに、このアクションを破棄するかどうかを示すフラグを格納します。同様のタイプのアクションが再度発生した場合は、このフラグをtrueにして、このアクションを破棄するように指示します。このAPI要求の破棄フラグがtrueに設定されているため、API応答が前のアクションに対して来た場合、ミドルウェアからの応答としてnullを送信します。

このアプローチの詳細については、このブログを参照してください。

https://tech.treebo.com/redux-middlewares-an-approach-to-cancel-redux-actions-7e08b51b83ce

1
Sumit Gupta