Comment créer un flux Redux Saga pour les appels API ?

Utilisez Redux Saga pour simplifier le flux de travail des API dans les projets React/React Native

Cet article n'est pas un guide expert, mais il tentera d'expliquer comment exploiter Redux Saga pour gérer les effets secondaires dans vos projets React ou React Native. Si votre application implique de nombreux appels API, Redux Saga peut simplifier le processus et rendre le code plus gérable.

Pourquoi choisir Redux Saga ?

Redux Saga est un middleware qui gère les effets secondaires (tels que les appels API) de manière claire et prévisible. Au lieu de bourrer la logique API dans des composants ou des réducteurs, vous pouvez déléguer ces tâches à saga. Saga vous permet d'écrire du code asynchrone qui semble synchrone, à l'aide de fonctions JavaScript spéciales appelées générateurs.

Définir la structure des dossiers

Avant de vous lancer dans la saga, assurez-vous de structurer votre projet pour qu'il puisse évoluer. Voici la structure de base que je suis :

• Services : Contient les points de terminaison de l'API et les fonctions qui les appellent.
• Réducteurs : Gérez les changements d'état en fonction des réponses de l'API.
• Sagas : Gérez les effets secondaires (comme les appels d'API) et coordonnez le travail avec les réducteurs.

1. Services : gérer les points de terminaison de l'API

Le dossier Services contient des fonctions d'appel d'API réutilisables. Voici un exemple de l'API « Changer le mot de passe » :

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

Ici, nous définissons une fonction ChangePassword pour effectuer des appels API. Il utilise fetch pour envoyer une requête POST au point de terminaison et une fonction d'assistance (Ajax.handleResponse) pour gérer la réponse.

2. Réducteurs : état de mise à jour

Les réducteurs écoutent les actions envoyées et mettent à jour le statut en conséquence. Voici un réducteur pour gérer les changements de mot de passe :

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

Ce réducteur a trois actions :

• changePassword : Réinitialiser l'état au démarrage de la requête.
• changePasswordSuccess : Mettre à jour le statut avec les données de réussite.
• changePasswordFail : Mettre à jour l'état avec les informations d'erreur.

3. Sagas : Gérer les effets secondaires

Maintenant, passons au point ! La Saga gère les appels API réels et distribue des actions en fonction des réponses. Voici une saga pour l'API « Changer le mot de passe » :

<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 : Appelez la fonction API (API.ChangePassword) et attendez le résultat.
• put : envoi d'actions pour mettre à jour le statut.
• takeEvery : Écoutez une action spécifique (changePassword) et déclenchez la saga des ouvriers correspondante (changePasswordSaga).

Si l'appel API réussit, la saga émettra changePasswordSuccess s'il échoue, changePasswordFail sera émis.

4. Crochets : connecter les composants

Pour déclencher le processus, nous créons un hook personnalisé pour envoyer l'action 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>

Comment ça marche

• Distribution d'actions : le composant appelle changePasswordCall dans le hook personnalisé.
• Réducteur : changePassword l'action met à jour le statut pour indiquer que la demande est en cours.
• Saga : la saga des observateurs écoute changePassword et déclenche la saga des travailleurs.
• Appels API : La saga des travailleurs appelle l'API ChangePassword et gère la réponse.
• Mise à jour du statut : La saga distribue l'action de réussite ou d'échec et met à jour le statut via le réducteur.

Résumé

Cette configuration organise votre flux de travail API en étapes claires et gérables :

• Les services gèrent la logique API.
• Statut de mise à jour des réducteurs.
• Les sagas gèrent les effets secondaires et collent le tout ensemble.

N'oubliez pas que ce n'est qu'une façon d'organiser votre projet. Si vous avez plus d'expérience ou d'idées, n'hésitez pas à commenter vos stratégies. J'en parlerai davantage sur la saga dans les prochains articles à mesure que j'apprends et m'améliore.

Bonne programmation ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!