React アプリケーションで Redux-Saga を使用してデータをフェッチする方法

Saga とは何か、また、Saga がより堅牢で柔軟なコードを作成するのにどのように役立つかを説明します。

React と Redux は、状態を管理し、動的なユーザーインターフェイスを開発するための人気のある Web 開発ツールです。

情報へのアクセスは、特に非同期イベントを扱う場合には難しく、時間がかかる場合があります。 Redux-Saga は、非同期アクティビティを管理する使いやすいミドルウェアパッケージであり、このプロセスを簡素化できます。

Redux-Saga からデータを取得するアプリケーションを React で構築する方法を学びます。

Redux-Saga を理解する

Redux-Saga は、ブラウザストレージアクセスや非同期 API リクエストなどの副作用の管理とテストを簡単にするミドルウェアパッケージです。ジェネレーター関数を使用すると、非同期コードが同期しているように見えるため、推論とデバッグが容易になります。

Redux-Saga は、特定の Redux アクションを検索し、副作用生成関数である Saga をトリガーすることによって機能します。 Saga は、API からデータを取得するなどの非同期操作を実行し、新しい Redux アクションをディスパッチして状態を更新できます。

Redux-Saga を使用して非同期 API 呼び出しを管理する例を考えてみましょう。まず、データ収集手順を開始する Redux アクションを作成します。

export const FETCH_DATA = 'FETCH_DATA';
export const fetchData = (params) => ({
  type: FETCH_DATA,
  payload: params,
});

アクションのペイロード FETCH_DATA には、API エンドポイントやリクエストパラメーターなどの必須パラメーターが含まれています。

次に、FETCH_DATA アクティビティをリッスンしてデータ収集を行うサーガを定義します。

import { call, put, takeLatest } from 'redux-saga/effects';
import axios from 'axios';
export function* fetchDataSaga(action) {
  try {
    const response = yield call(axios.get, action.payload.endpoint, {
      params: action.payload.params,
    });
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: response.data });
  } catch (error) {
    yield put({ type: 'FETCH_DATA_ERROR', payload: error });
  }
}
export function* watchFetchData() {
  yield takeLatest(FETCH_DATA, fetchDataSaga);
}

この Saga は、call エフェクトを使用して axios ライブラリへの API 呼び出しを行います。次に、フェッチしたデータを、タイプ FETCH_DATA_SUCCESS の新しい Redux アクションペイロードとして送信します。エラーが発生した場合、エラーオブジェクトをペイロードとして、タイプが FETCH_DATA_ERROR である新しい Redux アクションが送信されます。

最後に、redux-saga ミドルウェアを使用して、Saga を Redux ストアに登録する必要があります。

import { applyMiddleware, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchFetchData);

このコードは、watchFetchData サーガを新しいインスタンスミドルウェアに登録することにより、別のredux-saga を作成します。ミドルウェアは、ApplyMiddleware を使用して Redux ストアにセットアップされます。

一般に、Redux-Saga は、React の Redux アプリケーション内で非同期アクティビティを管理するための強力で多用途なアプローチを提供します。 Saga を使用してコードのバグを制御することで、データの取得を合理化し、テスト、保守、更新が容易なコードを生成できます。

React アプリケーションにおける一般的なデータ取得の問題

React のデータ取得を使用する際に開発者がよく遭遇する問題がいくつかあります。以下にいくつかの例を示します。

非同期アクションの管理: これは、ユーザーインターフェイス (UI) を妨げずに非同時操作を追跡するプログラミングインターフェイスによって提供される情報です。複数の API リクエストや他のデータに依存するデータを操作すると、これが困難になる可能性があります。
エラーの処理: API 呼び出しは失敗する可能性があるため、これらのエラーを正しく処理することが重要です。これには、ユーザーにエラーメッセージを提供し、ユーザーがリクエストを再送信できるようにすることが含まれます。
Redux ストアの更新: API から取得した情報を Redux ストアに保存して、他のコンポーネントがアクセスできるようにする必要があります。既存のデータを妨害したり破損したりすることなくストアを更新することが重要です。

React でのデータ取得に Redux-Saga を使用する方法

データの取得に Redux-Saga を使用すると、API 呼び出しを行うロジックと React コンポーネントからの応答を処理するロジックを分離できます。その結果、Saga が非同期データの取得とエラー管理を処理している間、ユーザーはデータのレンダリングとユーザーインタラクションへの対応に集中できます。

Redux ストアで Saga を使用するには、watchFetchData Saga を Redux-Saga ミドルウェアに登録する必要があります。

// src/store.js
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import { watchFetchData } from './sagas/dataSaga';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchFetchData);
export default store;

このコードは、applyMiddleware 関数とredux-saga の createSagaMiddleware メソッドを使用して、sagaMiddleware を Redux ストアに登録します。パッケージ。次に、run メソッドを使用して、watchFetchData サガを実行します。

各コンポーネントが配置されたので、Redux-Saga のセットアップは完了です。 Saga は、React コンポーネントが FETCH_DATA_REQUEST アクションを送信するときに、fetchDataApi 関数を使用してデータをフェッチします。スケジュールされたデータのフェッチが成功すると、フェッチされたデータを使用して別のアクティビティがディスパッチされます。エラーがある場合は、エラーオブジェクトを含む新しいアクションが送信されます。

// src/components/DataComponent.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchDataRequest } from '../actions/dataActions';
const DataComponent = () => {
  const dispatch = useDispatch();
  const { data, isLoading, error } = useSelector((state) => state.data);
  useEffect(() => {
    dispatch(fetchDataRequest({ param1: 'value1', param2: 'value2' }));
  }, [dispatch]);
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};
export default DataComponent;

上の例では、React コンポーネントのuseSelector フックを使用して、Redux ストアからデータ、 isLoading、およびerror の値を取得します。さらに、コンポーネントのマウント時に useEffect() フックを使用して FETCH_DATA_REQUEST アクションをディスパッチします。 データの値、isLoading、およびエラーに応じて、データ、読み込みメッセージ、またはエラーメッセージをレンダリングします。

データの取得に Redux-Saga を活用することで、React アプリケーションでの非同期 API リクエストの管理が大幅に合理化される可能性があります。 API 呼び出しロジックをコンポーネントから分離し、Sagas で非同期フローを管理することで、より保守しやすいモジュール化されたコードを作成できます。

データフェッチに Redux-Saga を使用するためのベストプラクティス

データの取得に Redux-Saga を使用する場合は、次のベストプラクティスに従ってください。

データフェッチ操作ごとに個別の Saga を使用します。すべてのロジックを 1 つのサーガに含めるのではなく、データ取得プロセスごとにサーガを分離することをお勧めします。特定のアクティビティに関連するサーガをすぐに見つけることができるため、コードの保守と変更がより簡単になります。
Redux-Saga の組み込みエラー処理を使用します。 Redux-Saga の try/catch ブロックを使用すると、エラーを自動的に処理できます。これにより、障害を一元的に管理し、統一されたエラーメッセージをユーザーに提供できるようになります。
パフォーマンスを向上させるには、キャンセル可能なサガを使用します。 React コンポーネントを使用すると、多くの API 呼び出しがトリガーされる可能性があります。この API トリガーにより、競合状況や不要なプログラミングインターフェイス呼び出しが発生する可能性があります。新しいリクエストを行うときに進行中の API 呼び出しをキャンセルすることで、これを防ぐことができます。
最新のデータを使用してください。同じデータに対して複数の API リクエストを行う場合、最新のデータが使用されていることを確認することが重要です。 Redux-Saga は最新のエフェクトを使用してこれを実現します。この効果により、最新の API 呼び出しを使用していることが保証され、同じデータに対する保留中の API リクエストがすべてキャンセルされます。
物語には別のファイルを使用してください。 Saga は Redux ストアファイルとは別に保存する必要があります。その結果、Saga の制御とテストが容易になります。

Redux-Saga でデータを取得する

Redux-Saga は、React アプリケーションで非同期タスクを処理するための信頼性が高く柔軟な方法を提供します。 Saga を使用すると、懸念事項を分離する、より堅牢でテスト可能で柔軟なコードを作成できます。

データのフェッチは難しく、エラーが発生しやすい操作ですが、Redux-Saga を使用すると簡単にすることができます。 Redux-Saga は、多くの非同期プロセスを確実かつ予測どおりに管理できるようにすることで、ユーザーエクスペリエンスを向上させます。