Komplettes Redux-Toolkit (Teil – 4)

Teil 4: Erweiterte Themen in der RTK-Abfrage.

Dieser Teil konzentriert sich auf erweiterte Funktionen und Anwendungsfälle in RTK Query, einschließlich der Anpassung von Abfragen, der Handhabung der Authentifizierung, optimistischer Updates und Leistungsoptimierung.

Teil 4: Fortgeschrittene Themen in der RTK-Abfrage

1. Einführung in erweiterte RTK-Abfragekonzepte

Im vorherigen Teil haben wir die Grundlagen der Verwendung von RTK Query zum Abrufen und Ändern von Daten behandelt. Jetzt werden wir uns mit erweiterten Funktionen befassen, die RTK Query noch leistungsfähiger machen. Mit diesen Funktionen können Sie Abfragen anpassen, die Authentifizierung verwalten, die Leistung optimieren und optimistische Updates für ein reibungsloseres Benutzererlebnis durchführen.

2. Anpassen von baseQuery für die Authentifizierung

Wenn Sie mit APIs arbeiten, die eine Authentifizierung erfordern, müssen Sie die baseQuery so anpassen, dass sie Authentifizierungsheader wie JWT-Tokens oder API-Schlüssel enthält.

Schritt 1: Erstellen Sie eine benutzerdefinierte BaseQuery

Sie können eine benutzerdefinierte baseQuery-Funktion erstellen, die jeder Anfrage Autorisierungsheader hinzufügt.

// src/app/customBaseQuery.js
import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const customBaseQuery = fetchBaseQuery({
  baseUrl: 'https://jsonplaceholder.typicode.com/',
  prepareHeaders: (headers, { getState }) => {
    const token = getState().auth.token; // Assuming auth slice has token
    if (token) {
      headers.set('Authorization', `Bearer ${token}`);
    }
    return headers;
  },
});

export default customBaseQuery;

Erklärung:

• PrepareHeaders: Mit dieser Funktion können Sie Header für jede Anfrage anpassen. Es ruft das Token aus dem Redux-Speicher ab und hängt es an den Autorisierungsheader an.

Schritt 2: Verwenden Sie die benutzerdefinierte baseQuery in createApi

Ändern Sie Ihre postsApi.js-Datei, um die benutzerdefinierte baseQuery zu verwenden:

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

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: customBaseQuery, // Use the custom base query here
  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;

3. Optimistische Updates mit RTK-Abfrage

Optimistische Updates ermöglichen es Ihnen, die Benutzeroberfläche sofort zu aktualisieren, bevor der Server die Mutation bestätigt, und sorgen so für ein reibungsloseres Benutzererlebnis. Wenn der Server einen Fehler zurückgibt, kann die Benutzeroberfläche zum vorherigen Status zurückkehren.

Schritt 1: Optimistische Aktualisierungen in Mutationen implementieren

Sie können optimistische Updates mithilfe der von RTK Query bereitgestellten Lebenszyklusmethode onQueryStarted implementieren.

// src/features/posts/postsApi.js
addPost: builder.mutation({
  query: (newPost) => ({
    url: 'posts',
    method: 'POST',
    body: newPost,
  }),
  invalidatesTags: ['Post'],
  onQueryStarted: async (newPost, { dispatch, queryFulfilled }) => {
    // Optimistic update: immediately add the new post to the cache
    const patchResult = dispatch(
      postsApi.util.updateQueryData('fetchPosts', undefined, (draftPosts) => {
        draftPosts.push({ id: Date.now(), ...newPost }); // Fake ID for optimistic update
      })
    );
    try {
      await queryFulfilled; // Await server response
    } catch {
      patchResult.undo(); // Revert if the mutation fails
    }
  },
}),

Erklärung:

• onQueryStarted: Diese Lebenszyklusmethode wird ausgelöst, wenn eine Mutation beginnt. Es stellt die Parameter „dispatch“ und „queryFulfilled“ bereit, um Cache-Updates zu verwalten.
• postsApi.util.updateQueryData: Mit dieser Dienstprogrammfunktion können Sie zwischengespeicherte Daten optimal aktualisieren.
• patchResult.undo(): Macht das optimistische Update rückgängig, wenn der Server einen Fehler zurückgibt.

4. Umgang mit abhängigen Abfragen

Manchmal müssen Sie möglicherweise abhängige Abfragen durchführen, bei denen eine Abfrage vom Ergebnis einer anderen abhängt. RTK Query stellt den Skip-Parameter bereit, um zu steuern, wann eine Abfrage ausgeführt wird.

Beispiel: Beitragsdetails basierend auf der ausgewählten Beitrags-ID abrufen

// src/features/posts/PostDetails.js
import React from 'react';
import { useFetchPostQuery } from './postsApi';

const PostDetails = ({ postId }) => {
  const { data: post, error, isLoading } = useFetchPostQuery(postId, { skip: !postId });

  if (!postId) return <p>Select a post to view details.</p>;
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading post details.</p>;

  return (
    <div>
      <h3>{post.title}</h3>
      <p>{post.body}</p>
    </div>
  );
};

export default PostDetails;

Erklärung:

• useFetchPostQuery: Ein Abfrage-Hook, der postId als Argument verwendet. Wenn postId nicht angegeben wird, wird die Abfrage mit { skip: !postId } übersprungen.

5. Abfrage und Echtzeitdaten mit RTK-Abfrage

RTK Query unterstützt Abfragen, um die Daten in einem bestimmten Intervall aktuell zu halten. Dies ist nützlich für die Datensynchronisierung in Echtzeit.

Schritt 1: Verwenden Sie Polling in Abfragen

Sie können die Abfrage für jede Abfrage mit der Option pollingInterval aktivieren.

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

const PostsList = () => {
  const { data: posts, error, isLoading } = useFetchPostsQuery(undefined, {
    pollingInterval: 30000, // Poll every 30 seconds
  });

  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:

• pollingInterval: Diese Option gibt das Intervall (in Millisekunden) an, in dem die Abfrage den Server nach neuen Daten abfragen soll.

6. Leistungsoptimierung mit selectFromResult

RTK Query bietet die Option „selectFromResult“ für erweiterte Leistungsoptimierungen, indem es Ihnen ermöglicht, bestimmte Daten aus dem Abfrageergebnis auszuwählen.

Schritt 1: Verwenden von selectFromResult zum Optimieren von erneuten Renderings

Die Option „selectFromResult“ kann verwendet werden, um unnötige erneute Renderings zu verhindern, wenn nur eine Teilmenge des Abfrageergebnisses benötigt wird.

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

const PostTitleList = () => {
  const { data: posts } = useFetchPostsQuery(undefined, {
    selectFromResult: ({ data }) => ({ titles: data?.map((post) => post.title) }),
  });

  return (
    <section>
      <h2>Post Titles</h2>
      <ul>
        {posts?.map((title, index) => (
          <li key={index}>{title}</li>
        ))}
      </ul>
    </section>
  );
};

export default PostTitleList;

Erklärung:

• selectFromResult: Mit dieser Option können Sie nur die Titel aus den abgerufenen Beiträgen auswählen und so unnötige erneute Renderings verhindern, wenn sich andere Daten im Abfrageergebnis ändern.

7. Fazit und nächste Schritte

In diesem Teil haben wir fortgeschrittene Themen in RTK Query untersucht, wie z. B. das Anpassen von baseQuery für die Authentifizierung, die Handhabung optimistischer Aktualisierungen, die Verwaltung abhängiger Abfragen, die Verwendung von Polling für die Datensynchronisierung in Echtzeit und die Optimierung der Leistung mit selectFromResult. Der umfangreiche Funktionsumfang von RTK Query macht es zu einem leistungsstarken Tool für das Abrufen und Zwischenspeichern von Daten in modernen Redux-Anwendungen.

Im nächsten Teil besprechen wir Teststrategien für Redux Toolkit und RTK Query und behandeln Unit-Tests, Integrationstests und Best Practices zur Gewährleistung von robustem und wartbarem Code.

Bleiben Sie dran für Teil 5: Teststrategien für Redux Toolkit und RTK-Abfrage!

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