API 呼び出し用の Redux Saga フローを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

API 呼び出し用の Redux Saga フローを作成するにはどうすればよいですか?

Susan Sarandon

リリース： 2025-01-20 02:37:13

オリジナル

367 人が閲覧しました

How to make a Redux Saga flow for API calls?

Redux Saga を使用して React/React Native プロジェクトの API ワークフローを簡素化します

この記事は専門家ガイドではありませんが、Redux Saga を活用して React または React Native プロジェクトの副作用を処理する方法を説明します。アプリケーションに多くの API 呼び出しが含まれる場合、Redux Saga はプロセスを簡素化し、コードをより管理しやすくします。

なぜ Redux Saga を選ぶのですか?

Redux Saga は、明確かつ予測可能な方法で副作用 (API 呼び出しなど) を管理するミドルウェアです。 API ロジックをコンポーネントやリデューサーに詰め込む代わりに、これらのタスクを saga に委任できます。 Saga では、ジェネレーターと呼ばれる特別な JavaScript 関数を使用して、同期のように見える非同期コードを作成できます。

フォルダー構造を設定する

物語を掘り下げる前に、プロジェクトを拡張できるように必ず構造化してください。私が従う基本的な構造は次のとおりです:

サービス: API エンドポイントとそれらを呼び出す関数が含まれます。
Reducers: API 応答に基づいて状態の変更を管理します。
サガ: 副作用 (API 呼び出しなど) を処理し、リデューサーとの作業を調整します。

サービス: API エンドポイントを処理します

Services フォルダーには、再利用可能な API 呼び出し関数が含まれています。「パスワード変更」API の例を次に示します:

<code class="language-javascript">// ChangePasswordService.js
import {Constants} from '../../Config';
import Ajax from './base';

const BASE_URL = Constants.IS_DEVELOPING_MODE
  ? Constants.BASE_URL.DEV
  : Constants.BASE_URL.PROD;

export default {
  ChangePassword: async params => {
    return fetch(`${BASE_URL}api/change-password`, {
      method: 'POST',
      body: params,
      headers: {
        Accept: 'multipart/form-data',
      },
    })
      .then(response => Ajax.handleResponse(response))
      .then(data => {
        console.log('Data', data);
        return data;
      });
  },
};</code>

ログイン後にコピー

ここでは、API 呼び出しを行うために ChangePassword 関数を定義します。これは、フェッチを使用して POST リクエストをエンドポイントに送信し、ヘルパー関数 (Ajax.handleResponse) を使用して応答を処理します。

Reducers: ステータスを更新

Reducer はディスパッチされたアクションをリッスンし、それに応じてステータスを更新します。パスワード変更を管理するためのリデューサーは次のとおりです:

<code class="language-javascript">// PasswordChangeSlice.js
import {createSlice} from '@reduxjs/toolkit';

const passwordChangeSlice = createSlice({
  name: 'passwordChange',
  initialState: {
    data: null,
    isChangeSuccess: null,
    error: null,
    message: null,
  },
  reducers: {
    changePassword: state => {
      state.isChangeSuccess = null;
      state.error = null;
      state.message = '';
    },
    changePasswordSuccess: (state, action) => {
      state.data = action.payload;
      state.message = 'Password changed successfully';
      state.isChangeSuccess = true;
    },
    changePasswordFail: (state, action) => {
      state.error = action.payload;
      state.message = 'Something went wrong';
      state.isChangeSuccess = false;
    },
  },
});

export const {changePassword, changePasswordSuccess, changePasswordFail} =
  passwordChangeSlice.actions;

export default passwordChangeSlice.reducer;</code>

ログイン後にコピー

このリデューサーには 3 つのアクションがあります:

changePassword: リクエストの開始時に状態をリセットします。
changePasswordSuccess: 成功データでステータスを更新します。
changePasswordFail: エラー情報を含むステータスを更新します。

サガ: 副作用の管理

ここからが本題です！ Saga は実際の API 呼び出しを処理し、応答に基づいてアクションをディスパッチします。「パスワード変更」API の概要は次のとおりです:

<code class="language-javascript">import {all, call, put, takeEvery} from 'redux-saga/effects';
import API from '../Services/ChangePasswordService';
import {
  changePasswordFail,
  changePasswordSuccess,
} from '../Reducers/PasswordChangeSlice';

function* changePasswordSaga({payload}) {
  try {
    const response = yield call(API.ChangePassword, payload);
    if (response?.data) {
      yield put(changePasswordSuccess(response.data));
    } else if (response?.errors) {
      yield put(changePasswordFail(response.errors));
    }
  } catch (error) {
    yield put(changePasswordFail(error.message));
  }
}

function* passwordSaga() {
  yield all([
    takeEvery('passwordChange/changePassword', changePasswordSaga),
  ]);
}

export default passwordSaga;</code>

ログイン後にコピー

call: API 関数 (API.ChangePassword) を呼び出し、結果を待ちます。
put: ステータスを更新するアクションをディスパッチします。
takeEvery: 特定のアクション (changePassword) をリッスンし、対応するワーカーサーガ (changePasswordSaga) をトリガーします。

API 呼び出しが成功すると、サガは changePasswordSuccess を出力し、失敗した場合は changePasswordFail を出力します。

フック: コンポーネントを接続します

プロセスをトリガーするには、changePassword アクションをディスパッチするカスタムフックを作成します。

<code class="language-javascript">// useChangePasswordActions.js
import {useDispatch, useSelector} from 'react-redux';
import {changePassword} from '../Reducers/PasswordChangeSlice';

export const useChangePasswordActions = () => {
  const dispatch = useDispatch();
  const passwordState = useSelector(state => state?.changePassword);

  const changePasswordCall = params => {
    dispatch(changePassword(params));
  };

  return {
    passwordState,
    changePasswordCall,
  };
};</code>

ログイン後にコピー

仕組み