In diesem Artikel wird erläutert, wie Daten zwischen Komponenten in React global gesendet werden, sogar in verschiedenen Browser-Registerkarten.

Geschichte

Stellen Sie sich vor Sie haben eine Liste mit Elementen, beispielsweise Benutzern.

Jeder Benutzer kann zur Änderung in einem modalen Fenster geöffnet werden.

Sie haben keine Abonnements für das Backend, was bedeutet, dass die Liste der Benutzer nicht automatisch mit dem Backend synchronisiert wird, wenn sich ein Benutzer ändert.

Sobald also das Profil eines Benutzers aktualisiert wird, möchten Sie die Liste der Benutzer im modalen Fenster automatisch aktualisieren (auch in allen anderen Registerkarten Ihrer Website).

Was werden wir tun, um Daten in diesen unabhängigen Komponenten und Registerkarten zu synchronisieren?

Lösung

Das modale Fenster und die Benutzerliste sollten in der Lage sein, Ereignisse und Daten auszutauschen.

Wenn also eine Aktion im modalen Fenster ausgeführt wird, sollte das Ereignis an alle Komponenten gesendet werden, die auf diese Art von Aktion warten (z. B. die Liste der Benutzer), damit diese beispielsweise auf dieses Ereignis reagieren können Daten synchronisieren.

Lassen Sie uns eine solche Kommunikation zwischen den Komponenten „UserList“ und „UserProfileModal“ einrichten, indem wir ein kleines Paket use-app-events verwenden:

const UserProfileModal = () => {
  // retrieve a user ID from URL, for example
  const { userId } = useParams();

  // 1. Create an instance of useAppEvents
  const { notifyEventListeners } = useAppEvents();

  const submitUpdate = async () => {
    // send a request to BE here, await the response...

    // 2. Send an event containing the updated user ID to
    // all other components that are listening for it
    notifyEventListeners('user-update', userId);
  };

  return Save changes;
};

? Modales Fenster

? Die Liste der Benutzer

const UserList = () => {
  const [users, setUsers] = useState([]);

  // 1. Create an instance of useAppEvents
  const { listenForEvents } = useAppEvents();

  // 2. Listen and wait for the 'user-update' event to happen in the app
  listenForEvents('user-update', (userId) => {
    // 3. React to the occurred event by loading the refreshed
    // list of users from BE here...
  });

  return users.map((user) => (
    // render users here...
  ));
};

use-app-events ist ein kleines Open-Source-Paket ohne Abhängigkeiten und Risiken, es wird außerdem aktiv gepflegt und ist sicher zu verwenden.

An diesem Punkt werden durch die Aktualisierung des Benutzerprofils in UserProfileModal automatisch alle Listener wie UserList benachrichtigt, was eine Aktualisierung der Benutzerliste in UserList auslöst, was zu einer besseren UX führt.

Es spielt keine Rolle, wo UserList und UserProfileModal im Komponentenbaum platziert sind, sie können weiterhin Daten untereinander senden, sogar in verschiedenen Browser-Registerkarten.

Abschluss

Wenn Sie mühelos eine globale Kommunikation zum Datenaustausch zwischen Komponenten einrichten müssen, nutzen Sie das Paket use-app-events.

Es bietet eine benutzerfreundliche API, umfangreiche Dokumentation und strenge Typisierung, um sicherzustellen, dass Sie die beste Entwicklererfahrung haben.