0Pricing
React Academy · Lektion

Optimistische Updates und Cache-Invalidierung

Aktualisieren Sie die UI bei einer Mutation sofort und invalidieren Sie mit Tags zwischengespeicherte Daten.

Optimistische Updates und Cache-Invalidierung ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion erstellen Sie Mutation-Endpoints in RTK Query, aktualisieren die UI mit optimistischen Aktualisierungen sofort und invalidieren veraltete Cache-Einträge mithilfe von Tags.

Mutation-Endpoints

Definieren Sie Mutations mit builder.mutation(). Mutations ändern Serverdaten (POST, PUT, DELETE) und geben einen useMutation-Hook zurück.
export const userApi = createApi({
  /* ... */
  endpoints: (builder) => ({
    updateUser: builder.mutation({
      query: ({ id, ...body }) => ({
        url: '/users/' + id,
        method: 'PUT',
        body,
      }),
    }),
  }),
});

Einen Mutation-Hook verwenden

Destrukturieren Sie [trigger, result] aus dem Mutation-Hook. Rufen Sie trigger() mit dem Mutationsargument auf. result enthält isLoading, isSuccess und isError.
const [updateUser, { isLoading }] = useUpdateUserMutation();

const handleSave = async () => {
  await updateUser({ id: 1, name: 'Alice' });
};

Cache-Tags zur Invalidierung

Tags verknüpfen gecachte Query-Daten mit Mutations. Definieren Sie `providesTags` für Queries und `invalidatesTags` für Mutations. Wenn eine Mutation ausgeführt wird, ruft RTK Query automatisch alle Queries erneut ab, die die invalidierten Tags bereitgestellt haben.
endpoints: (builder) => ({
  getUsers: builder.query({
    query: () => '/users',
    providesTags: ['User'],
  }),
  deleteUser: builder.mutation({
    query: (id) => ({ url: '/users/' + id, method: 'DELETE' }),
    invalidatesTags: ['User'],
  }),
})

Granulare Tag-Invalidierung

Verwenden Sie Tag-Objekte mit id für eine gezielte Invalidierung. Stellen Sie bei getUser den Tag des jeweiligen Benutzers bereit und invalidieren Sie bei updateUser nur den Cache dieses Benutzers.
providesTags: (result, error, id) => [{ type: 'User', id }],
invalidatesTags: (result, error, { id }) => [{ type: 'User', id }]

Optimistische Aktualisierungen mit onQueryStarted

Verwenden Sie onQueryStarted in einer Mutation, um den Cache sofort zu aktualisieren, bevor der Server antwortet, und die Änderung zurückzurollen, falls die Mutation fehlschlägt.
updateUser: builder.mutation({
  query: (user) => ({ url: '/users/' + user.id, method: 'PUT', body: user }),
  async onQueryStarted(user, { dispatch, queryFulfilled }) {
    const patch = dispatch(
      userApi.util.updateQueryData('getUser', user.id, draft => {
        Object.assign(draft, user);
      })
    );
    try { await queryFulfilled; }
    catch { patch.undo(); } // roll back on error
  },
})

Alle Instanzen eines Tag-Typs invalidieren

Wenn Sie `{ type: 'User', id: 'LIST' }` als Tag für Listen-Queries verwenden, können Sie die gesamte Liste invalidieren, ohne einzelne Benutzereinträge zu invalidieren.
providesTags: result =>
  result ? [
    ...result.map(({ id }) => ({ type: 'User', id })),
    { type: 'User', id: 'LIST' },
  ] : [{ type: 'User', id: 'LIST' }]

Cache manuell invalidieren

Invalidieren Sie bestimmte Tags programmatisch mit dispatch(api.util.invalidateTags(['User'])). Das ist nützlich in Event-Handlern außerhalb von Komponenten.
dispatch(userApi.util.invalidateTags(['User']));

Pessimistische vs. optimistische Aktualisierungen

Optimistisch: Cache aktualisieren, bevor der Server antwortet (sofortige UI, bei Fehler zurückrollen). Pessimistisch: auf den Server warten und anschließend aktualisieren (sicherer, aber langsamer). Entscheiden Sie abhängig vom Fehlerrisiko der Mutation.

Wann Tags und wann manuelles erneutes Abrufen?

Verwenden Sie Tags, wenn Sie genau wissen, welche Queries invalidiert werden sollen. Verwenden Sie refetch() aus einem Query-Hook für einmalige manuelle Aktualisierungen. Tags sind für große APIs automatischer und besser skalierbar.

Kurztest

Was bewirkt invalidatesTags bei einem Mutation-Endpoint in RTK Query?

Zusammenfassung

Definieren Sie Mutations mit builder.mutation. Verwenden Sie providesTags für Queries und invalidatesTags für Mutations, um das automatische erneute Abrufen zu ermöglichen. Verwenden Sie onQueryStarted mit updateQueryData für optimistische Aktualisierungen und undo() zum Zurückrollen.

Kurs abgeschlossen

Herzlichen Glückwunsch! Sie haben **Redux Toolkit & RTK Query** abgeschlossen. Sie können jetzt Redux-Slices erstellen, asynchrone Logik mit createAsyncThunk verarbeiten und den Server-State mit Caching und optimistischen Aktualisierungen in RTK Query verwalten.

Häufig gestellte Fragen

Ist die Lektion „Optimistische Updates und Cache-Invalidierung“ kostenlos?

Ja — der vollständige Text von „Optimistische Updates und Cache-Invalidierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Optimistische Updates und Cache-Invalidierung“?

Aktualisieren Sie die UI bei einer Mutation sofort und invalidieren Sie mit Tags zwischengespeicherte Daten. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Optimistische Updates und Cache-Invalidierung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Redux Toolkit Slices und createSlice
  2. Asynchrone Logik mit createAsyncThunk
  3. RTK Query: Endpoints und automatisches Caching
  4. Optimistische Updates und Cache-Invalidierung
← Zurück zu React Academy