非同期の結果とReactとReduxの組み合わせ

Question

私は最初のReact/Reduxアプリケーションで作業しています。

デフォルトのパラメータを使用して、ページの読み込み時にサーバーからアプリケーションデータ（非常に多く）が非同期に読み込まれます。その後、クライアント側でさらにフィルタリングされます。初期データロードのためのパラメータとフィルタの両方は、ユーザによって変更されてもよい。

ユーザーがパラメータを返す前に、データを読み込んだときに失効したデータが返される可能性があります。もう1つは、慣用的なRedux方式で一連のイベントを管理することです。

私は以前のコールバックを手動でキャンセルできると確信していますが、私は本当により緊急の方法を探しています。

通常、RXを使用してこの種の問題を解決します。これはここで賢明だろうか？その場合、私のRXコードはどこに座るべきですか？ご提案のための

おかげ

Answer 1

Redux-Observable,というライブラリを発見しました。これにより、Reduxイベントをイベントストリームとして表示し、結果として複雑な非同期操作を実行できます。それは完全に法案に適合します。

This videoは私はあなたの答えのために

Answer 2

最も信頼性の高いソリューションは、これまでredux-sagaライブラリーの使用です。これは、表現力豊かで、試験が容易なdeclarative way（rxjsソリューションではない）の副作用を処理します。

import { takeLatest } from 'redux-saga/effects' 

function* watchFetchData() { 
    yield takeLatest('FETCH_REQUESTED', fetchData) 
} 

export function* fetchData(action) { 
    try { 
     const data = yield call(Api.fetchUser, action.payload.url) 
     yield put({type: "FETCH_SUCCEEDED", data}) 
    } catch (error) { 
     yield put({type: "FETCH_FAILED", error}) 
    } 
} 

'FETCH_REQUESTED'は、アクションの作成者から送信されたアクションタイプである：あなたの状況で

は、最新の要求が処理されていることを確認しますtakeLatest()効果を、使用する必要があります。 takeLatest()は最新のアクションのみを処理し、最新のフェッチ要求からのみ結果を取得します。

axiosのようなフェッチライブラリを使用する場合は、不要なajaxリクエストがforce the cancellationになります。

さらに詳しい情報saga helpersについては、