Zustandsverwaltung mit RxJS und React

Einführung

Das Erstellen großer Web-Apps kann schwierig sein, insbesondere wenn Sie viele verschiedene Informationen im Auge behalten müssen. Aber keine Sorge, RxJS ist hier, um Ihnen zu helfen! Es ist wie ein wirklich cooles Tool, mit dem Sie alle Ihre Daten an einem Ort verwalten können.

Mit RxJS können Sie sogenannte „Datenströme“ erstellen, die verschiedene Teile Ihrer App verwenden können. Es ist wie ein großer Fluss, der durch Ihre App fließt und alles miteinander verbunden und synchron hält.

In diesem Artikel zeigen wir Ihnen, wie Sie mit RxJS Web-Apps erstellen, die wirklich einfach zu verwalten sind und hervorragend funktionieren. Am Ende des Artikels erfahren Sie, wie Sie mit RxJS alle Ihre Daten verwalten und noch größere und bessere Web-Apps erstellen können!

Warum RxJS für State Management?

Hey, sind Sie manchmal verwirrt, wenn Sie eine große Web-App erstellen und viele verschiedene Informationen im Auge behalten müssen? Hier kommt RxJS ins Spiel! Es ist wie eine wirklich coole Bibliothek, die Ihnen hilft, alle Ihre Daten an einem Ort zu verwalten.

Mit RxJS können Sie Datenströme erstellen, die verschiedene Teile Ihrer App nutzen können. Es ist wie ein Fluss, der durch Ihre App fließt und alles miteinander verbunden und synchron hält.

RxJS hilft Ihnen auch dabei, Ihre App in kleinere Teile zu zerlegen, was so ist, als ob Sie in Ihrem Haus verschiedene Räume für verschiedene Dinge hätten. Auf diese Weise ist es einfacher, alles organisiert zu halten und zu finden, was Sie brauchen.

Insgesamt ist RxJS ein großartiges Tool zum Verwalten von Daten in großen Web-Apps. Egal, ob Sie eine einfache oder eine wirklich große App erstellen, RxJS kann Ihnen dabei helfen, alles unter Kontrolle zu behalten!

Ein Beispiel für eine To-Do-Liste

Der einfachste Weg, eine neue Technologie oder einen neuen Proof of Concept anzuwenden, besteht darin, eine To-Do-Liste zu erstellen.

Der Laden:

const subject = new Subject();

const initialState: Task[] = [];

let state = initialState;

export const todoStore = {
  init: () => {
    subject.next(state);
  },
  subscribe: (setState: any) => {
    subject.subscribe(setState);
  },
  addTask: (content: string) => {
    const task = {
      content,
      id: uid(),
      isDone: false,
    };
    state = [...state, task];
    subject.next(state);
  },
  removeTask: (id: string) => {
    const tasks = state.filter((task) => task.id !== id);
    state = tasks;
    subject.next(state);
  },
  completeTask: (id: string) => {
    const tasks = state.map((task) => {
      if (task.id === id) {
        task.isDone = !task.isDone;
      }
      return task;
    });
    state = tasks;
    subject.next(state);
  },
  initialState,
};

Dieser Code definiert einen einfachen Speicher zum Verwalten einer To-Do-Liste mit RxJS. Der Store wird mithilfe eines Betreffs implementiert und bietet Methoden zum Hinzufügen, Entfernen und Abschließen von Aufgaben.

Die Init-Funktion initialisiert den Speicher, indem sie den aktuellen Status mit subject.next(state) im Subjekt veröffentlicht. Diese Funktion wird normalerweise beim ersten Laden der App aufgerufen, um sicherzustellen, dass der Store auf dem neuesten Stand ist.

Mit der Abonnementfunktion können Komponenten Änderungen im Store abonnieren. Wenn der Store aktualisiert wird, wird die an subscribe übergebene setState-Funktion mit dem aktualisierten Status aufgerufen. Diese Funktion wird normalerweise von Komponenten verwendet, die den aktuellen Status des Geschäfts anzeigen müssen.

Insgesamt sind init und subscribe zwei wichtige Funktionen in diesem Code, die es Entwicklern ermöglichen, den Status einer To-Do-Liste mithilfe von RxJS zu verwalten.

Verwendung:

Es ist sehr einfach, diese Art der Zustandsverwaltung zu implementieren. Führen Sie dies einfach auf höchster Ebene aus:

const [tasks, setTasks] = useState<Task[]>([]);

  useEffect(() => {
    todoStore.subscribe(setTasks);
    todoStore.init();
  });

Dieser Code verwendet React-Hooks, um einen Shop zu abonnieren und zu initialisieren, der eine To-Do-Liste mithilfe von RxJS verwaltet.

Der useState-Hook erstellt eine Statusvariable namens „tasks“ und eine Funktion namens „setTasks“ zum Aktualisieren dieses Status. Das an useState übergebene Argument [] legt den Anfangswert von Aufgaben auf ein leeres Array fest.

Der useEffect-Hook wird verwendet, um den todoStore zu abonnieren und zu initialisieren. Die todoStore.subscribe(setTasks)-Zeile abonniert die setTasks-Funktion für Änderungen im Store. Dies bedeutet, dass bei jeder Aktualisierung des Stores setTasks mit dem aktualisierten Status aufgerufen wird und die Aufgaben entsprechend aktualisiert werden.

Die Funktion todoStore.init() initialisiert den Speicher, indem sie den aktuellen Status mit subject.next(state) im Subjekt veröffentlicht.

Abschluss

Das ist es also! Wir haben gelernt, wie man mit RxJS und React eine To-Do-Listen-Anwendung erstellt. Wir haben RxJS verwendet, um den Status der Anwendung zu verwalten, und React, um dem Benutzer den aktuellen Status anzuzeigen.

Wir haben gesehen, wie RxJS einen leistungsstarken Satz an Tools für die Zustandsverwaltung bereitstellt, einschließlich Observablen, Operatoren und Subjekten. Und wir haben auch gelernt, wie man React-Hooks wie useState und useEffect verwendet, um den Anwendungsstatus in Echtzeit zu aktualisieren.

Durch die gemeinsame Verwendung von RxJS und React haben wir eine coole App entwickelt, die einfach zu verwenden und zu warten ist. Und wir haben einige wirklich wertvolle Fähigkeiten erlernt, die wir nutzen können, um in Zukunft noch mehr tolle Webanwendungen zu erstellen!

Wenn Sie der Meinung sind, dass der Artikel zu unklar ist, schauen Sie sich Folgendes an:

• Quellcode: https://github.com/starneit/rxjs-state-poc
• Demo: https://rxjs-poc.web.app/

Das obige ist der detaillierte Inhalt vonZustandsverwaltung mit RxJS und React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!