Wie erstelle ich einen Redux Saga-Flow für API-Aufrufe?

Verwenden Sie Redux Saga, um den API-Workflow in React/React Native-Projekten zu vereinfachen

Bei diesem Artikel handelt es sich nicht um einen Leitfaden für Experten, sondern er soll erklären, wie Sie Redux Saga nutzen können, um Nebenwirkungen in Ihren React- oder React Native-Projekten zu bewältigen. Wenn Ihre Anwendung viele API-Aufrufe umfasst, kann Redux Saga den Prozess vereinfachen und den Code besser verwaltbar machen.

Warum Redux Saga wählen?

Redux Saga ist eine Middleware, die Nebenwirkungen (wie API-Aufrufe) auf klare und vorhersehbare Weise verwaltet. Anstatt die API-Logik in Komponenten oder Reduzierer zu stopfen, können Sie diese Aufgaben an Saga delegieren. Mit Saga können Sie mithilfe spezieller JavaScript-Funktionen, sogenannter Generatoren, asynchronen Code schreiben, der synchron aussieht.

Ordnerstruktur festlegen

Bevor Sie sich mit der Saga befassen, sollten Sie Ihr Projekt so strukturieren, dass es skalierbar ist. Hier ist die Grundstruktur, der ich folge:

• Dienste: Enthält API-Endpunkte und die Funktionen, die sie aufrufen.
• Reduzierer: Verwalten Sie Statusänderungen basierend auf API-Antworten.
• Sagas: Behandeln Sie Nebenwirkungen (wie API-Aufrufe) und koordinieren Sie die Arbeit mit Reduzierern.

1. Dienste: API-Endpunkte verarbeiten

Der Ordner „Dienste“ enthält wiederverwendbare API-Aufruffunktionen. Hier ist ein Beispiel für die API „Passwort ändern“:

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

Hier definieren wir eine ChangePassword-Funktion, um API-Aufrufe durchzuführen. Es verwendet fetch, um eine POST-Anfrage an den Endpunkt zu senden, und eine Hilfsfunktion (Ajax.handleResponse), um die Antwort zu verarbeiten.

2. Reduzierstücke: Aktualisierungsstatus

Reduzierer warten auf ausgelöste Aktionen und aktualisieren den Status entsprechend. Hier ist ein Reduzierer zum Verwalten von Passwortänderungen:

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

Dieser Reduzierer hat drei Aktionen:

• changePassword: Status zurücksetzen, wenn die Anfrage beginnt.
• changePasswordSuccess: Status mit Erfolgsdaten aktualisieren.
• changePasswordFail: Status mit Fehlerinformationen aktualisieren.

3. Sagas: Umgang mit Nebenwirkungen

Jetzt zur Sache! Die Saga verarbeitet die tatsächlichen API-Aufrufe und löst Aktionen basierend auf den Antworten aus. Hier ist eine Saga für die API „Passwort ändern“:

<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: Rufen Sie die API-Funktion (API.ChangePassword) auf und warten Sie auf das Ergebnis.
• put: Versenden Sie Aktionen, um den Status zu aktualisieren.
• takeEvery: Hören Sie sich eine bestimmte Aktion an (changePassword) und lösen Sie die entsprechende Arbeitersaga aus (changePasswordSaga).

Wenn der API-Aufruf erfolgreich ist, wird die Saga changePasswordSuccess ausgeben; wenn er fehlschlägt, wird changePasswordFail ausgegeben.

4. Haken: Komponenten verbinden

Um den Prozess auszulösen, erstellen wir einen benutzerdefinierten Hook, um die changePassword-Aktion auszulösen:

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

Wie es funktioniert

• Aktionsverteilung: Die -Komponente ruft changePasswordCall im benutzerdefinierten Hook auf.
• Reduzierer: changePassword Aktion aktualisiert den Status, um anzuzeigen, dass die Anfrage in Bearbeitung ist.
• Saga:Beobachter-Saga hört changePassword zu und löst Arbeiter-Saga aus.
• API-Aufrufe: Die Worker-Saga ruft die ChangePassword-API auf und verarbeitet die Antwort.
• Statusaktualisierung: Die Saga verteilt die Erfolgs- oder Misserfolgsaktion und aktualisiert den Status über den Reduzierer.

Zusammenfassung

Dieses Setup organisiert Ihren API-Workflow in klare und überschaubare Schritte:

• Dienste verarbeiten die API-Logik.
• Aktualisierungsstatus der Reduzierstücke.
• Sagas kümmern sich um Nebenwirkungen und halten alles zusammen.

Denken Sie daran, dass dies nur eine Möglichkeit ist, Ihr Projekt zu organisieren. Wenn Sie weitere Erfahrungen oder Ideen haben, können Sie uns gerne Ihre Strategien kommentieren. Ich werde in zukünftigen Artikeln mehr über Saga behandeln, wenn ich dazulerne und mich verbessere.

Viel Spaß beim Programmieren! ?

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Redux Saga-Flow für API-Aufrufe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!