Redux Toolkit: Thunk-Funktionen erstellen

Was ist ein Thunk?

In der Programmierung bezieht sich das Wort thunk auf den Teil des Codes, der verzögerte Arbeit ausführt, wie z. B. asynchrone Funktionen in JavaScript.

Ein Redux-Store allein verarbeitet keine asynchrone Logik. Es weiß nur, wie man:

1. Aktionen synchron versenden.
2. Status über Reduzierer aktualisieren.
3. Benachrichtigen Sie die Benutzeroberfläche über Statusänderungen.

Aber Moment, wenn das der Fall ist, wie können wir dann APIs aufrufen und den Status basierend auf ihren Antworten aktualisieren, was normalerweise Zeit braucht? Wie gehen wir damit um?

Hier kommen die Thunk-Funktionen ins Spiel.

Was ist eine Thunk-Funktion?

Eine Thunk-Funktion ist eine Funktion, die zur Verarbeitung asynchroner Logik erstellt wurde, beispielsweise zum Aufrufen einer API. Es sind zwei Argumente „dispatch“ und „getState“ erforderlich, um Aktionen zu versenden und bei Bedarf Zugriff auf den aktuellen Status zu haben.

const getAllUsers = () => {
  return async (dispatch, getState) => {
    dispatch(fetingAllUsers());
    try {
      const users = await getUsers();
      dispatch(userUpdated(users));
    } catch (err) {
      dispatch(logError(err))
    }
  }
}

Die zurückgegebene Funktion ist die Thunk-Funktion und getAllUsers wird in diesem Beispiel als Thunk-Aktionsersteller bezeichnet und würde wie folgt versendet:

dispatch(getAllUsers())

Bei Bedarf kann ein Thunk-Aktionsersteller mit Argumenten zur Verwendung in der Thunk-Funktion versendet werden.

Erstellen von Thunks mit createAsyncThunk

Redux Toolkit bietet die createAsyncThunk-API zum einfachen Generieren von Thunks:

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUserById = createAsyncThunk(
  'user/fetchUserById',
  async (userId) => {
    const user = await someHttpRequest(userId);
    return user;
  }
);

fetchUserById ist die hier erstellte Thunk-Funktion. createAsyncThunk akzeptiert zwei Argumente:

• Das erste Argument ist ein Zeichenfolgenpräfix, das für die generierten Aktionstypen verwendet wird (z. B. user/fetchUserById/pending, user/fetchUserById/fulfilled oder user/fetchUserById/rejected).
• Das zweite Argument ist eine „Payload-Creator“-Funktion. Es sollte ein Promise mit den erforderlichen Daten oder einen Fehler zurückgeben.

Warum createAsyncThunk verwenden?

createAsyncThunk ermöglicht Ihnen nicht nur die Erstellung von Thunk-Funktionen für API-Aufrufe, sondern sendet auch automatisch Aktionen aus, um den Status von API-Anfragen zu verfolgen:

• ausstehend: Die Anfrage ist in Bearbeitung.
• erfüllt: Die Anfrage war erfolgreich.
• abgelehnt: Die Anfrage ist fehlgeschlagen.

Das ist wirklich nützlich. Beispielsweise können wir einen Loader in der Benutzeroberfläche anzeigen, wenn der Status „Ausstehend“ ist, und den Benutzer darüber informieren, dass etwas passiert.

Verwendung von Thunks im Slice

Da wir nun den fetchUserById-Thunk erstellt haben, können wir das Feld extraReducers in unserem userSlice verwenden, um Statusstatusänderungen zu verarbeiten:

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  user: null,
  status: 'idle', // 'idle' | 'pending' | 'succeeded' | 'failed'
  error: null,
};

export const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    usernameUpdated: (state, action) => {
      state.user.username = action.payload;
    },
    emailUpdated: (state, action) => {
      state.user.email = action.payload;
    },
    userDataCleared: (state) => {
      state.user = null;
      state.status = 'idle';
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state) => {
        state.status = 'pending';
      })
      .addCase(fetchUserById.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.user = action.payload;
      })
      .addCase(fetchUserById.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message || 'Something went wrong.';
      });
  },
});

export const { usernameUpdated, emailUpdated, userDataCleared } = userSlice.actions;

// Selector for the status to use in the application's components
export const selectStatus = (state) => state.user.status;

createAsyncThunk-Bedingungen

Was ist, wenn wir einige Bedingungen überprüfen möchten, bevor wir die API aufrufen? Wenn der Status beispielsweise bereits „Ausstehend“ lautet, möchten wir ihn nicht zweimal aufrufen. In diesem Fall können wir das dritte Argument verwenden, das createAsyncThunk akzeptiert, um Bedingungen zu schreiben.

const getAllUsers = () => {
  return async (dispatch, getState) => {
    dispatch(fetingAllUsers());
    try {
      const users = await getUsers();
      dispatch(userUpdated(users));
    } catch (err) {
      dispatch(logError(err))
    }
  }
}

Um zu erfahren, wie Sie Typescript mit den Thunk-Funktionen verwenden, lesen Sie bitte Type Checking Redux Thunks.

Das obige ist der detaillierte Inhalt vonRedux Toolkit: Thunk-Funktionen erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!