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

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 呼び出しなど) を処理し、リデューサーとの作業を調整します。

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

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

// 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;
      });
  },
};

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

2. Reducers: ステータスを更新

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

// 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;

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

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

3. サガ: 副作用の管理

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

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;

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

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

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

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

// 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,
  };
};

仕組み

• アクションの配布: コンポーネントはカスタム フックで changePasswordCall を呼び出します。
• Reducer: changePassword アクションはステータスを更新して、リクエストが進行中であることを示します。
• サーガ: ウォッチャー サーガは changePassword をリッスンし、ワーカー サーガをトリガーします。
• API 呼び出し: ワーカー サガは ChangePassword API を呼び出し、応答を処理します。
• ステータス更新: サガは成功または失敗のアクションを配布し、リデューサーを通じてステータスを更新します。

概要

この設定により、API ワークフローが明確で管理しやすいステップに整理されます:

• サービスは API ロジックを処理します。
• Reducer のステータスが更新されます。
• サガは副作用を処理し、すべてをつなぎ合わせます。

これはプロジェクトを整理する方法の 1 つにすぎないことを覚えておいてください。より多くの経験やアイデアをお持ちの場合は、お気軽に戦略についてコメントしてください。サーガについては、学び改善しながら今後の記事で詳しく取り上げていきます。

プログラミングを楽しんでください! ?

以上がAPI 呼び出し用の Redux Saga フローを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。