Hör auf, React-Modals per Prop Drilling zu übergeben (Nutze react-call)

DeutschالعربيةEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어PortuguêsРусский中文
BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00React hat ein super interessantes neues Tool bekommen, das die Art und Weise, wie wir über
00:00:05das Rendern interaktiver UI-Elemente wie Modals, Dialoge oder Bestätigungsboxen denken, komplett verändert.
00:00:11Es heißt React Call.
00:00:13Wenn du schon einmal einen komplexen mehrstufigen Formular-Assistenten, ein Bestätigungs-Modal oder einen
00:00:18Element-Picker in React gebaut hast, weißt du bereits, dass das Verwalten von Open-States, das Übergeben von Erfolgs-Callbacks und
00:00:24das Handling von Promises deinen Code in ein absolutes Spaghetti-Chaos verwandeln können.
00:00:28Aber React Call wurde entwickelt, um dieses Problem zu lösen.
00:00:31In diesem Video schauen wir uns React Call an, sehen, wie es funktioniert, und werfen einen Blick
00:00:36auf einige Codebeispiele.
00:00:37Es wird viel Spaß machen, also tauchen wir ein.
00:00:44Was genau ist also React Call?
00:00:47Nun, es ist ein winziges, leichtgewichtiges Dienstprogramm, mit dem du React-Komponenten wie asynchrone
00:00:52Funktionen aufrufen kannst.
00:00:53Denk an die native Browser-API window.confirm.
00:00:57Wenn du sie aufrufst, pausiert dein Code buchstäblich, wartet darauf, dass der Benutzer auf OK oder Abbrechen klickt, und
00:01:03gibt direkt einen booleschen Wert zurück.
00:01:06Es hält deine Geschäftslogik komplett lokal beim Aufrufer.
00:01:09Und React Call bringt genau dieses intuitive mentale Modell direkt in die moderne React-Welt.
00:01:16Anstatt eine separate State-Variable wie isModalOpen zu erstellen, einen onClose- oder einen
00:01:22onSubmit-Prop zu übergeben und komplexe Context-Provider oder Portale einzurichten, kannst du einfach auf
00:01:29die Antwort der Komponente warten.
00:01:30Unter der Haube abstrahiert es das Promise-Management, verarbeitet Typanfragen und Antworten
00:01:36direkt und unterstützt vollständig Hot Module Replacement, damit dein Entwicklungsworkflow schnell bleibt.
00:01:41Und es bringt drei Konzepte mit:
00:01:42Root and Stack, Upsert und Mutation Flow.
00:01:48Das erste große Konzept ist Root and Stack.
00:01:50Bei React Call ist die aufrufbare Komponente, die du erstellst, keine Funktion.
00:01:54Sie fungiert tatsächlich als eigener Mount-Punkt in deinem Anwendungsbaum.
00:01:58Du platzierst die Komponente als Root-Tag an einer beliebigen Stelle, zum Beispiel in deiner App-Datei oder einer übergeordneten
00:02:03Layout-Datei, und sie fungiert als Listener.
00:02:06Wenn du mehrere Aufrufe triggerst, verwaltet React Call sie über einen internen Stack und
00:02:11rendert automatisch jede aktive Instanz.
00:02:14Außerdem kümmert es sich um saubere Beendigungsanimationen beim Schließen und hält die Instanzen isoliert, sodass
00:02:20sie sich nicht gegenseitig stören.
00:02:22Als Nächstes kommt Upsert, das ein absoluter Lebensretter für Singleton-UI-Muster ist.
00:02:27Normalerweise wird bei mehrmaligem Aufruf einer Komponente eine neue Instanz auf den Stack gelegt.
00:02:33Aber was ist, wenn du einen globalen Benachrichtigungs-Toast, ein Lade-Overlay oder einen Fortschrittsanzeiger baust,
00:02:39bei dem du immer nur eine Instanz gleichzeitig auf dem Bildschirm haben möchtest?
00:02:45Nun, anstatt call auszuführen, kannst du upsert ausführen.
00:02:48Wenn bereits eine Instanz aktiv ist, aktualisiert es die bestehende Komponente flüssig mit deinen neuen
00:02:52Daten, anstatt ein Duplikat zu erstellen.
00:02:56Und schließlich haben wir den Mutation Flow.
00:02:58Diese Bibliothek enthält einen eingebauten Hook useMutationFlow, der speziell dafür entwickelt wurde, deine aufrufbare
00:03:04UI direkt mit asynchronen Aktionen zu verknüpfen.
00:03:06Wenn du ein Bestätigungs-Modal hast, das beim Absenden eine schwere Backend-API-Anfrage auslöst, verwaltet der Hook
00:03:12den Pending-State direkt für dich.
00:03:15Er stellt sicher, dass das Modal offen bleibt und einen Lade-Spinner anzeigt, während die asynchrone Funktion läuft, und
00:03:21beendet den Aufruf erst offiziell, wenn das Promise erfolgreich aufgelöst wurde.
00:03:25Es verbindet also deinen UI-State und deine Datenmutationen auf wunderbare Weise.
00:03:29Lass uns jetzt einige praktische Beispiele auf ihrer Website ansehen, weil ich denke, dass sie super
00:03:34selbsterklärend sind.
00:03:36Und ich denke, sie zeigen auch, wie wenig Code du eigentlich schreiben musst, um etwas zum Laufen zu bringen.
00:03:41Zum Beispiel müssen wir im Bestätigungs-Dialog nur ein Callable erstellen.
00:03:48Und dann verpacken wir unsere Komponente als Higher-Order-Komponente mit diesem createCallable-Hook.
00:03:54Und dann können wir die Aufruf- und Funktionen für unsere Button-Clicks übergeben.
00:04:01Und das ist alles, was wir für das aufrufbare Objekt benötigen.
00:04:04Und am Root müssen wir nur die Komponente selbst importieren.
00:04:08Und für den Löschen-Button, da unsere Bestätigungskomponente mit der Higher-Order-Funktion
00:04:14createCallable verpackt ist, können wir sie einfach asynchron in dieser handleClick-Funktion aufrufen.
00:04:21Sehr ordentlich, sehr sauber, nicht viel Boilerplate.
00:04:26Und du musst keine Context-Provider oder State-Variablen oder Redux oder Zustand verwenden.
00:04:31Und wenn du tiefer eintauchen willst, wie viele Anwendungsfälle es gibt, kannst du den Beispielbereich
00:04:36ansehen, und jedes Beispiel bietet auch ein Code-Snippet.
00:04:40Einige davon sind sogar sehr komplex, wie zum Beispiel diejenigen, die mit asynchronen
00:04:46Aktionen im Hintergrund zu tun haben.
00:04:49Du kannst dir also all diese coolen Beispiele ansehen.
00:04:52Ich finde es super cool und super leichtgewichtig.
00:04:55Gut gemacht.
00:04:56Da habt ihr es, Leute.
00:04:57Das ist React Call in aller Kürze.
00:04:59Nun, man könnte sicherlich einen einfachen, benutzerdefinierten Promise-Wrapper oder ein einzelnes Modal selbst programmieren.
00:05:06Ich denke, diese Bibliothek löst all die schwierigen Randfälle wunderbar, wie den Umgang mit mehreren
00:05:11aktiven Instanzen in einem Stack oder das Aktualisieren von Singletons via Upsert und das Synchronisieren von UI-States mit komplexen
00:05:17Backend-Mutationen.
00:05:18Ich denke, es ist ein super schönes, leichtgewichtiges Hilfsmittel für dein Frontend-Toolkit, für eine sauberere,
00:05:24lesbarere React-Architektur.
00:05:26Was denkst du über React Call?
00:05:28Gefällt dir dieses Muster?
00:05:29Wirst du es in deinen Projekten verwenden?
00:05:31Lass es uns in den Kommentaren unten wissen.
00:05:33Und Leute, wenn ihr diese Art von technischen Breakdowns mögt, lasst es mich wissen, indem ihr auf
00:05:37den Like-Button unter dem Video haut.
00:05:39Und vergesst auch nicht, unseren Kanal zu abonnieren.
00:05:42Das war Andrus von BetterStack, und wir sehen uns in den nächsten Videos.
00:05:58du

Key Takeaway

React Call reduziert die Komplexität der UI-Interaktion durch ein asynchrones Aufrufmuster, das lokale Geschäftslogik beibehält und klassisches Prop-Drilling oder globales State-Management für Modale und Dialoge überflüssig macht.

Highlights

  • React Call ermöglicht den Aufruf von React-Komponenten wie asynchrone Funktionen, ähnlich der nativen window.confirm API.

  • Die Bibliothek beseitigt das komplexe State-Management wie isModalOpen-Variablen oder Prop-Drilling für Modale und Bestätigungsboxen.

  • Das Root and Stack-Konzept verwaltet automatisch mehrere aktive Komponenteninstanzen, isoliert diese voneinander und handhabt Beendigungsanimationen.

  • Der Upsert-Befehl aktualisiert bestehende Komponenten wie Lade-Overlays oder Toasts, statt bei jedem Aufruf ein Duplikat zu erzeugen.

  • Der Hook useMutationFlow verknüpft UI-Zustände direkt mit asynchronen Backend-Aktionen und verwaltet automatisch Lade-Spinner während der Ausführung.

  • Die Implementierung erfolgt durch das Verpacken einer Komponente in eine Higher-Order-Komponente mittels createCallable, wodurch Boilerplate-Code wie Context-Provider entfällt.

Timeline

Problematik der UI-Zustandsverwaltung

  • Die Verwaltung interaktiver UI-Elemente wie Modale durch isModalOpen-States und Prop-Callbacks führt häufig zu unübersichtlichem Code.
  • Komplexe Formular-Assistenten oder Bestätigungsboxen erfordern oft fehleranfälliges Promise-Handling und umfangreiches Context-Provider-Management.

Die manuelle Implementierung von Modalen in React erfordert oft eine Kette von Zustandsvariablen und Callbacks, die durch die gesamte Komponentenstruktur gereicht werden müssen. Dieser Prozess, bekannt als Prop-Drilling, verkompliziert die Geschäftslogik und macht den Code schwer wartbar. React Call setzt hier an, um dieses Spaghetti-Chaos durch eine intuitivere Handhabung zu ersetzen.

Funktionsweise und Kernkonzepte

  • Die Bibliothek fungiert als leichtgewichtiges Dienstprogramm, das UI-Komponenten wie asynchrone Funktionen behandelt.
  • Ein Root-Tag im Anwendungsbaum fungiert als Listener und verwaltet alle aufgerufenen Komponenten in einem Stack.
  • Upsert ermöglicht die Aktualisierung von Singleton-Elementen ohne Erzeugung von Dubletten.
  • Der useMutationFlow Hook synchronisiert asynchrone Backend-Aufrufe direkt mit dem UI-Zustand, inklusive Lade-Animationen.

Die Architektur von React Call basiert auf dem mentalen Modell der window.confirm API, bei der die Logik lokal beim Aufrufer verbleibt. Der interne Stack sorgt für die automatische Verwaltung und Isolation mehrerer Instanzen, während Upsert spezifisch für globale UI-Elemente wie Lade-Overlays entwickelt wurde. Die Integration von Datenmutationen über den useMutationFlow Hook sorgt zudem für eine nahtlose Kopplung zwischen API-Antworten und dem sichtbaren Status der Komponente.

Praktische Implementierung

  • Die Einbindung erfolgt durch den createCallable-Hook, der eine Komponente in eine Higher-Order-Komponente umwandelt.
  • Der Aufruf der Komponente erfolgt asynchron direkt in der Event-Handler-Funktion.
  • Es sind weder Redux noch externe State-Bibliotheken oder komplexe Context-Provider erforderlich.

Die Nutzung von React Call beschränkt sich auf den Import der Komponente am Root und das Verpacken der Zielkomponente mit createCallable. Dies reduziert die benötigte Code-Menge erheblich, da die Logik für das Modal direkt im Aufruf-Kontext behandelt wird. Die Bibliothek eignet sich besonders für Entwickler, die bei komplexen Randfällen, wie der Synchronisierung von Backend-Mutationen mit der UI, saubere und wartbare Architektur bevorzugen.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video