Komplettes Redux-Toolkit (Teil -

Teil 3: Einführung in die RTK-Abfrage

In diesem Teil behandeln wir die RTK-Abfrage

1. Was ist RTK-Abfrage?

Obwohl das Redux Toolkit leistungsstarke Tools zur Verwaltung von Status und asynchroner Logik bereitstellt, ist für das Abrufen und Zwischenspeichern von Daten dennoch umfangreicher Boilerplate-Code erforderlich. RTK Query, eingeführt in Redux Toolkit v1.6, zielt darauf ab, dieses Problem zu lösen, indem es eine Reihe leistungsstarker Tools für das effiziente Abrufen und Zwischenspeichern von Daten mit minimalem Setup bereitstellt.

Hauptfunktionen von RTK Query:

• Datenabruf und Zwischenspeicherung: Verwaltet automatisch Zwischenspeicherung, Ungültigmachung und erneutes Abrufen.
• Optimistische Updates und Echtzeit-Synchronisierung: Optimistische Updates und Echtzeit-Datensynchronisierung einfach verwalten.
• Deklarative und einfache API: Intuitives API-Design mit minimalem Boilerplate-Code.
• In Redux Toolkit integriert: Basiert auf Redux Toolkit und ermöglicht eine nahtlose Integration.

2. RTK-Abfrage einrichten

Um mit RTK Query zu beginnen, müssen wir einen API-Dienst definieren, der angibt, wie Daten abgerufen werden und welche Endpunkte verfügbar sind. Lassen Sie uns ein Beispiel mit einer einfachen Posts-API erstellen.

Schritt 1: Definieren Sie einen API-Dienst

Erstellen Sie eine neue Datei mit dem Namen postsApi.js im Verzeichnis „features/posts“. Diese Datei definiert die API-Endpunkte zum Abrufen und Ändern von Beiträgen.

// src/features/posts/postsApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// Define an API service using RTK Query
export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
    }),
  }),
});

// Export hooks for usage in functional components
export const { useFetchPostsQuery, useAddPostMutation } = postsApi;

Erklärung:

• createApi: Diese Funktion wird verwendet, um einen API-Dienst zu definieren. Es generiert einen API-Slice und verwaltet automatisch den Store, Reduzierer und Aktionen für Sie.
• baseQuery: Eine Funktion, die die Basis-URL für Ihre API definiert. fetchBaseQuery ist ein leichter Wrapper um die Standard-Abruf-API.
• Endpunkte: Eine Funktion, die die Endpunkte für die API definiert. Wir definieren hier zwei Endpunkte: fetchPosts zum Abfragen von Daten und addPost zum Erstellen eines neuen Beitrags.

Schritt 2: API-Dienst in den Redux Store integrieren

Fügen Sie den postsApi-Reducer zum Store hinzu und konfigurieren Sie die Middleware, um Caching und Invalidierung zu ermöglichen.

Store.js aktualisieren, um postsApi zu integrieren:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import { postsApi } from '../features/posts/postsApi';

const store = configureStore({
  reducer: {
    // Add the generated reducer as a specific top-level slice
    [postsApi.reducerPath]: postsApi.reducer,
  },
  // Adding the api middleware enables caching, invalidation, polling, and other features of RTK Query
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(postsApi.middleware),
});

export default store;

3. Verwenden der RTK-Abfrage in Komponenten

RTK Query generiert benutzerdefinierte Hooks basierend auf den im API-Dienst definierten Endpunkten. Diese Hooks werden verwendet, um Datenabrufe und Mutationen durchzuführen und das Caching automatisch zu verwalten.

Schritt 1: Daten mit useFetchPostsQuery abrufen

Erstellen Sie eine PostsList.js-Komponente, um die Liste der Beiträge abzurufen und anzuzeigen.

// src/features/posts/PostsList.js
import React from 'react';
import { useFetchPostsQuery } from './postsApi';

const PostsList = () => {
  const { data: posts, error, isLoading } = useFetchPostsQuery();

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>An error occurred: {error.message}</p>;

  return (
    <section>
      <h2>Posts</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </section>
  );
};

export default PostsList;

Erklärung:

• useFetchPostsQuery: Ein benutzerdefinierter Hook, der von RTK Query für den fetchPosts-Endpunkt generiert wird. Es gibt ein Objekt zurück, das die abgerufenen Daten (data), den Ladestatus (isLoading) und den Fehlerstatus (error) enthält.
• Die Komponente rendert bedingt Lade-, Fehler- oder Datenzustände basierend auf der Hook-Ausgabe.

Schritt 2: Daten mit useAddPostMutation hinzufügen

Erstellen Sie eine AddPostForm.js-Komponente, um neue Beiträge mithilfe der addPost-Mutation hinzuzufügen.

// src/features/posts/AddPostForm.js
import React, { useState } from 'react';
import { useAddPostMutation } from './postsApi';

const AddPostForm = () => {
  const [addPost, { isLoading }] = useAddPostMutation();
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (title && content) {
      await addPost({ title, body: content }).unwrap();
      setTitle('');
      setContent('');
    }
  };

  return (
    <section>
      <h2>Add a New Post</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Post Title"
        />
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="Post Content"
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Adding...' : 'Add Post'}
        </button>
      </form>
    </section>
  );
};

export default AddPostForm;

Erklärung:

• useAddPostMutation: Ein von RTK Query generierter benutzerdefinierter Hook für die addPost-Mutation. Es bietet eine Funktion (addPost) zum Auslösen der Mutation und einen Ladezustand (isLoading).
• unwrap(): Ermöglicht uns, die aufgelöste oder abgelehnte Nutzlast aus der Mutation auszupacken, um Nebenwirkungen nach der Anfrage zu bewältigen.

4. Umgang mit Cache, Fehlern und optimistischen Updates

RTK Query verarbeitet automatisch Caching und Fehlerzustände und macht den Cache ungültig, wenn Mutationen auftreten. Sie können das Verhalten mit Tags und anderen Konfigurationen weiter anpassen.

Schritt 1: ProvidesTags und invalidatesTags verwenden

Ändern Sie die postsApi, um Tags für die Cache-Ungültigmachung zu verwenden:

// src/features/posts/postsApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  tagTypes: ['Post'],
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
      providesTags: (result) =>
        result ? result.map(({ id }) => ({ type: 'Post', id })) : ['Post'],
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
      invalidatesTags: ['Post'],
    }),
  }),
});

export const { useFetchPostsQuery, useAddPostMutation } = postsApi;

Erklärung:

• BietetTags: Dies wird verwendet, um die von der fetchPosts-Abfrage abgerufenen Daten zu kennzeichnen. Es hilft dabei, den Cache effizient zu entwerten, wenn neue Daten hinzugefügt werden.
• invalidatesTags: Dies wird in der addPost-Mutation verwendet, um den Cache ungültig zu machen und die aktualisierten Daten erneut abzurufen.

5. Fazit und nächste Schritte

In diesem Teil haben wir untersucht, wie man RTK Query zum Abrufen und Zwischenspeichern von Daten in Redux-Anwendungen verwendet. Wir haben das Einrichten eines API-Dienstes, das Definieren von Endpunkten und die Verwendung generierter Hooks zum Abfragen und Ändern von Daten behandelt. RTK Query vereinfacht den Datenabruf und die Statusverwaltung mit minimalem Code und macht es zu einem leistungsstarken Tool für moderne Redux-Anwendungen.

Im nächsten Teil befassen wir uns mit Erweiterten Themen in RTK-Abfragen, wie z. B. dem Anpassen von Abfragen, der Verwendung von baseQuery, der Handhabung der Authentifizierung und der Optimierung der Leistung.

Bleiben Sie dran für Teil 4: Erweiterte Themen in der RTK-Abfrage!

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