Komplettes Redux Toolkit – Async Logic mit (Teil -2)

1. Einführung in Async Logic im Redux Toolkit

Der Umgang mit asynchroner Logik in Redux erfordert häufig eine Menge Boilerplate-Code, z. B. das Erstellen von Aktionstypen, Aktionserstellern und Reduzierern, um verschiedene Zustände (Laden, Erfolg, Fehler) zu verarbeiten. Redux Toolkit vereinfacht dies mit createAsyncThunk, das es Ihnen ermöglicht, mit minimalem Setup einen „Thunk“ für asynchrone Vorgänge zu definieren.

createAsyncThunk:

• Generiert automatisch ausstehende, erfüllte und abgelehnte Aktionstypen.
• Erleichtert den Umgang mit Nebenwirkungen wie API-Anfragen.
• Lässt sich nahtlos in Slices integrieren, die mit createSlice erstellt wurden.

2. Verwenden von createAsyncThunk für API-Aufrufe

Lassen Sie uns durch die Erstellung eines asynchronen Thunk gehen, um Daten von einer öffentlichen API abzurufen und verschiedene Ladezustände zu verwalten.

Schritt 1: Einrichten eines einfachen API-Dienstes
Wir verwenden eine kostenlose öffentliche API, um dieses Beispiel zu demonstrieren. Nehmen wir an, wir haben einen API-Endpunkt, der eine Liste von Beiträgen zurückgibt.

Schritt 2: Erstellen eines Async Thunk
Erstellen Sie zunächst eine neue Slice-Datei mit dem Namen postsSlice.js im Verzeichnis „features/posts“. Wir verwenden createAsyncThunk, um Beiträge asynchron abzurufen.

// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk to fetch posts from an API
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data; // This will be the 'fulfilled' action payload
});

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    posts: [],
    status: 'idle', // idle | loading | succeeded | failed
    error: null,
  },
  reducers: {
    // Optional: add reducers for synchronous actions
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default postsSlice.reducer;

Erklärung:

createAsyncThunk: Diese Funktion benötigt zwei Argumente: einen String-Aktionstyp und eine asynchrone Funktion. In der asynchronen Funktion erfolgt der API-Aufruf. Wenn das Versprechen aufgelöst wird, werden die Daten zurückgegeben und automatisch als Nutzlast der erfüllten Aktion versendet.

extraReducers: Dies wird verwendet, um von createAsyncThunk generierte Aktionen zu verarbeiten. Wir verwalten drei Zustände: ausstehend, erfüllt und abgelehnt.

3. Thunks in Komponenten integrieren

Jetzt verwenden wir den fetchPosts-Thunk in einer React-Komponente und zeigen die Daten an.

Schritt 1: Erstellen Sie eine PostsList-Komponente
Erstellen Sie eine PostsList.js-Komponente im Verzeichnis „features/posts“:

// src/features/posts/PostsList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts } from './postsSlice';

const PostsList = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts.posts);
  const status = useSelector((state) => state.posts.status);
  const error = useSelector((state) => state.posts.error);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchPosts());
    }
  }, [status, dispatch]);

  let content;

  if (status === 'loading') {
    content = <p>Loading...</p>;
  } else if (status === 'succeeded') {
    content = (
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    );
  } else if (status === 'failed') {
    content = <p>{error}</p>;
  }

  return (
    <section>
      <h2>Posts</h2>
      {content}
    </section>
  );
};

export default PostsList;

Erklärung:

Der useEffect-Hook sendet fetchPosts, wenn die Komponente gemountet wird, aber nur, wenn der aktuelle Status „idle“ ist.
Der Status wird überprüft, um zu bestimmen, welcher Inhalt gerendert werden soll (Lade-Spinner, Liste der Beiträge oder Fehlermeldung).

Schritt 2: PostsList zur App hinzufügen

Aktualisieren Sie die Hauptdatei App.js, um die PostsList-Komponente einzuschließen:

// src/App.js
import React from 'react';
import PostsList from './features/posts/PostsList';

function App() {
  return (
    <div className="App">
      <PostsList />
    </div>
  );
}

export default App;

4. Best Practices für Async Thunks

Vermeiden Sie schwere Logik in Komponenten: Halten Sie Komponenten sauber, indem Sie Thunks zur Verarbeitung asynchroner Logik versenden.
Zentralisieren Sie die Fehlerbehandlung: Behandeln Sie Fehler in Ihrem Slice, anstatt die Logik in jeder Komponente zu wiederholen.
Daten normalisieren: Erwägen Sie die Normalisierung der Zustandsform mithilfe von Bibliotheken wie normalizr, um komplexe Datenstrukturen effizient zu verwalten.
Selektoren merken: Verwenden Sie createSelector aus reselect, um Selektoren für eine bessere Leistung zu merken.

5. Fazit und nächste Schritte
In diesem Teil haben wir untersucht, wie man mit createAsyncThunk mit asynchroner Logik im Redux Toolkit umgeht. Wir haben gelernt, wie man einen asynchronen Thunk erstellt, verschiedene Zustände verarbeitet und ihn in einer Komponente verwendet. Im nächsten Teil befassen wir uns mit RTK Query – einem leistungsstarken Tool zum Abrufen und Zwischenspeichern von Daten, das die Redux-Entwicklung weiter vereinfacht.

_
Seien Sie gespannt auf Teil 3: Einführung in RTK Query!_

Das obige ist der detaillierte Inhalt vonKomplettes Redux Toolkit – Async Logic mit (Teil -2). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!