Einfacher State-Management mit UseImmer in React

Der Umgang mit State in React kann manchmal eine Herausforderung darstellen, insbesondere wenn es darum geht, Mutationen und die richtige Handhabung von Referenzen zu verstehen. Wenn du den Setter von useState benutzt, musst du häufig neue Arrays oder Objekte erstellen, um sicherzustellen, dass React deine Änderungen erkennt. Das kann schnell unübersichtlich werden und viel Code erfordern. Eine Alternative stellt useImmer dar, das dir erlaubt, den State auf eine viel intuitivere Weise zu verändern. In dieser Anleitung werden wir Schritt für Schritt durch den Prozess gehen, wie du useImmer anstelle von useState nutzen kannst.

Wichtigste Erkenntnisse

• useImmer ist ein Ersatz für useState, der den Umgang mit mutierbarem State in React erleichtert.
• Mit useImmer kannst du Änderungen direkt an Arrays und Objekten vornehmen, ohne neue Referenzen manuell erstellen zu müssen.
• Mutationen werden automatisch in neue, unveränderliche States umgewandelt, was die Handhabung erheblich vereinfacht.

Schritt-für-Schritt-Anleitung

Installation von useImmer

Zunächst musst du sicherstellen, dass useImmer installiert ist. Dies erfolgt über den Terminal-Befehl:

npm install immer

Nachdem die Installation abgeschlossen ist, solltest du überprüfen, ob das Paket korrekt in deiner package.json-Datei erscheint. Du solltest immer in der Liste der Abhängigkeiten sehen.

Verwendung von useImmer

Jetzt, da useImmer installiert ist, kannst du es in deinem Projekt verwenden. Importiere es einfach in die Datei, in der du den State verwalten möchtest:

import { useImmer } from 'use-immer';

Einstieg in die Nutzung von useImmer

Im Vergleich zu useState bleibt die Struktur deines Codes nahezu gleich. Anstelle von useState benutzt du useImmer, um deinen aktuellen State und eine Funktion zum Ändern des States zu erhalten.

const [videos, setVideos] = useImmer(initialVideos);

In diesem Beispiel ist initialVideos der Startwert für deinen State. Du kannst jetzt setVideos verwenden, um Änderungen an deinem State vorzunehmen.

Mutationen mit useImmer

Mit useImmer hast du die Flexibilität, den State direkt zu mutieren. Das bedeutet, dass du Methoden wie push oder splice nutzen kannst, ohne ein neues Array oder Objekt manuell erstellen zu müssen. Hier ist ein Beispiel, wie du ein neues Video hinzufügen kannst:

setVideos(draft => {
  draft.push(newVideo); // newVideo ist das hinzuzufügende Objekt
});

In diesem Fall wird draft ein veränderbares Abbild deines State sein. Alle Änderungen, die du daran vornimmst, führen automatisch zur Erstellung eines neuen, unveränderlichen States.

Änderungen an bestehenden Einträgen

Wenn du einen bestehenden Eintrag ändern möchtest, ist das mithilfe von useImmer ebenfalls unkompliziert. Du musst lediglich den Eintrag im Array finden und die gewünschten Änderungen vornehmen:

setVideos(draft => {
  const videoToEdit = draft.find(video => video.id === targetId);
  if (videoToEdit) {
    videoToEdit.title = newTitle; // Ändere den Titel
    videoToEdit.source = newSource; // Ändere die Quelle
  }
});

Hier kannst du auf ein spezifisches Video im draft-Array zugreifen und die gewünschten Änderungen vornehmen. Diese Änderungen werden automatisch als neue Referenzen behandelt.

Löschen eines Eintrags

Das Löschen eines Eintrags wird ebenfalls einfacher. Du kannst dafür filter oder splice verwenden, um das gewünschte Element zu entfernen. Hier ist ein Beispiel mit splice:

setVideos(draft => {
  const index = draft.findIndex(video => video.id === targetId);
  if (index !== -1) {
    draft.splice(index, 1); // Video entfernen
  }
});

Das entfernt das Video mit der entsprechenden ID aus dem draft-Array.

Integration in bestehende Projekte

Das Ersetzen von useState durch useImmer kann deinen Code erheblich vereinfachen und lesbarer machen. Du musst lediglich sicherstellen, dass du überall dort, wo du useState verwendet hast, in der Lage bist, useImmer einzuführen.

Es ist wichtig anzumerken, dass die Verwendung von useImmer die Performance nicht negativ beeinflusst. Du solltest jedoch stets darauf achten, dass dein Code klar und gut strukturiert bleibt.

Zusammenfassung

In dieser Anleitung hast du gelernt, wie du useImmer in deinem React-Projekt nutzen kannst, um den Umgang mit State zu vereinfachen. Du kannst jetzt direkten Zugriff auf Mutationen haben, was die Entwicklung effizienter und angenehmer gestaltet. Durch die automatische Umwandlung in unveränderliche States behält React die Kontrolle und sorgt dafür, dass alle Änderungen ordnungsgemäß erkannt werden.