Verwalten des Anwendungsstatus in Puck

Puck ist der visuelle Open-Source-Editor für React, der die nächste Generation von Seitenerstellern und No-Code-Produkten ermöglicht. Geben Sie uns einen Stern auf GitHub! ⭐️

---

Puck ist schnell gewachsen und es war großartig, es zu beobachten! ? Entwickler mit unterschiedlichem Hintergrund erweitern die Möglichkeiten dieses visuellen Open-Source-Editors. Aber da immer mehr Leute sich mit Puck beschäftigen, taucht in unserer Discord-Community immer wieder eine Frage auf:

„Wie kann ich Daten übergeben oder den Status zwischen Komponenten in Puck teilen?“

Mit anderen Worten: Wie sorgt man dafür, dass eine Komponente auf Veränderungen in einer anderen reagiert? Sie könnten beispielsweise eine DropZone-Komponente mit einer Sucheingabe erstellen, sodass alle darin abgelegten Listen ihren Wert lesen können:

Auf den ersten Blick könnten Sie aufgrund der eingebauten Magie von Puck denken, dass er den Zustand auf einzigartige Weise handhabt. Aber hier ist die Sache: Puck ist nur React – und das gilt auch für die Komponenten, die Sie daran übergeben. Das bedeutet, dass Sie sich auf jede Zustandsbibliothek oder jedes Tool verlassen können, das Sie normalerweise zum Verwalten und Teilen von Daten zwischen Komponenten verwenden würden. In diesem Artikel werde ich es einfach halten und Ihnen zeigen, wie Sie dieses Problem mithilfe von Kontext lösen können.

Bevor wir beginnen: Ich gehe davon aus, dass Sie ein grundlegendes Verständnis von Puck und seiner Funktionsweise haben. Wenn Sie neu hier sind, ist das völlig in Ordnung – Sie können gerne mitmachen! Ich würde jedoch empfehlen, zuerst den Leitfaden „Erste Schritte“ zu lesen, um sich mit den Grundlagen vertraut zu machen

Projekt-Setup

Um die Sache zu vereinfachen, habe ich ein einfaches React-Projekt auf GitHub vorbereitet, wobei Puck vorinstalliert und einsatzbereit ist. Klonen und installieren Sie es, indem Sie die folgenden Befehle in Ihrem Terminal ausführen:

git clone https://github.com/FedericoBonel/basic-puck-app
cd ./basic-puck-app
npm install

Arbeiten Sie bereits an einem bestehenden Projekt? Überhaupt kein Problem! Sie können Puck einfach als Abhängigkeit mit NPM installieren:

npm i @measured/puck --save

Und wenn Sie Frameworks wie Next.js oder Remix verwenden, bietet Puck offizielle Rezepte, um den Einrichtungsprozess reibungslos zu gestalten.

Für dieses Tutorial gehe ich davon aus, dass Sie das GitHub-Repo geklont haben, um die Übersichtlichkeit zu gewährleisten. Die Konzepte und Schritte gelten jedoch für jedes Setup – aktualisieren Sie einfach die Dateinamen nach Bedarf, um sie an die Struktur Ihres Projekts anzupassen.

Puck konfigurieren

Wenn Ihr Projekt startklar ist, besteht der nächste Schritt darin, Puck zu konfigurieren. Öffnen Sie die Datei src/App.jsx und tauschen Sie ihren Inhalt mit dem folgenden Code aus. Dadurch wird Puck mit einer Grundkonfiguration zum Ziehen und Ablegen von zwei Komponenten eingerichtet:

• Eine Dashboard-Komponente, die Benutzer begrüßt und eine DropZone zum Verschachteln anderer Komponenten enthält
• Eine ArticleList-Komponente, die eine Liste von Artikeln im Dashboard anzeigt

git clone https://github.com/FedericoBonel/basic-puck-app
cd ./basic-puck-app
npm install

Großartig! Ihre Grundeinrichtung ist nun abgeschlossen. Als Nächstes widmen wir uns dem Hinzufügen des freigegebenen Status zu Ihrem Editor.

Kontext hinzufügen

React Context ist die perfekte Lösung für unser Problem, da es eine einfache Möglichkeit bietet, Daten über alle Ihre Komponenten hinweg zu teilen und zu verwalten – sowohl innerhalb als auch außerhalb des Editors. Es erstellt einen „globalen Status“, auf den Sie bei Bedarf zugreifen können, was es ideal für Szenarien macht, in denen Sie Daten von außerhalb von Puck abrufen müssen – wie das ausgewählte Thema oder den angemeldeten Benutzer – oder Daten zwischen Puck-Komponenten teilen müssen.

In diesem Leitfaden führe ich Sie durch zwei häufige Anwendungsfälle für React Context in Puck:

1. Zugriff auf Daten, die außerhalb von Puck gespeichert sind: Wir beginnen mit der Einrichtung eines Kontexts, der die Daten eines angemeldeten Benutzers außerhalb von enthält. Komponente erstellen und dann über Puck Components darauf zugreifen.
2. Übergabe von Daten an eine verschachtelte Komponente: Als Nächstes richten wir einen Suchabfragekontext im Dashboard ein. Dadurch können wir die Suchabfrage eines Benutzers erfassen, im Kontext speichern und an die ArticleList-Komponente weitergeben. Ziel ist es, die Liste der Artikel basierend auf der Anfrage des Benutzers zu filtern und zu demonstrieren, wie Daten zwischen einer übergeordneten und einer untergeordneten Puck-Komponente übergeben werden.

Schritt 1: Definieren Sie den Kontext außerhalb von Puck

Das Einrichten des Kontexts in Puck erfolgt nach dem gleichen Muster wie in jeder React-App. Sie erstellen einen Kontextanbieter, um Ihren freigegebenen Status zu definieren und zu verwalten, ihn um eine übergeordnete Komponente zu wickeln und auf den Status zuzugreifen oder ihn zu aktualisieren, wo immer dies in Ihrer App erforderlich ist.

Erstellen Sie zunächst einen neuen Kontext für die Benutzerdaten. Dieser Kontext enthält sowohl das Benutzerobjekt als auch eine Funktion zum Aktualisieren des Benutzerstatus.

npm i @measured/puck --save

Schritt 2: Erstellen Sie den Kontextanbieter außerhalb von Puck

Als nächstes erstellen Sie eine UserProvider-Komponente, die Ihren Puck-Editor umschließt. Dieser Anbieter verwaltet den Benutzerstatus und stellt ihn allen Kindern zur Verfügung.

Der Kürze halber verwende ich einen Dummy-Benutzer und die von useState zurückgegebene Setter-Funktion.

// App.jsx
import { Puck, DropZone } from "@measured/puck";
import "@measured/puck/puck.css";

// The configs for your draggable components
// Ideally you would pull these out into their own files
const dashboardConfig = {
  render: () => {
    return (
      <div
       >



<p>Once you’ve updated the file, start the application in development mode, and navigate to http://localhost:5173 to verify everything is working as expected:<br>
</p>

<pre class="brush:php;toolbar:false">npm run dev

Schritt 3: Integrieren Sie den Anbieter mit Puck

Um den Anbieter in Ihren Puck-Editor zu integrieren, umschließen Sie den Editor einfach mit dem UserProvider. Sie können den UserProvider an einer beliebigen Stelle oberhalb des Editors in Ihrem Komponentenbaum platzieren (z. B. in Ihrer Indexdatei), und es funktioniert einwandfrei. Sobald Sie das getan haben, haben alle Ihre Editorkomponenten Zugriff auf den Kontext!

git clone https://github.com/FedericoBonel/basic-puck-app
cd ./basic-puck-app
npm install

Schritt 4: Nutzen Sie den Kontext in den Puck-Komponenten

Jetzt können Sie in jeder Ihrer Puck-Komponenten auf den UserContext zugreifen. Gemäß unserem Anwendungsbeispiel aktualisieren wir die Dashboard-Komponente so, dass sie eine „Willkommen zurück“-Nachricht für angemeldete Benutzer und eine „allgemeine Willkommensnachricht“ für Gäste anzeigt.

npm i @measured/puck --save

Schritt 7: Nutzen Sie den Kontext aus Puck-Komponenten

Jetzt lesen wir den Kontext in den Komponenten, die im Kontextanbieter abgelegt werden. In unserem Fall verbrauchen wir den Kontext in der ArticleList-Komponente, die der Benutzer über die DropZone im Dashboard verschachtelt hat. Dadurch kann die Artikelliste auf Änderungen in der Suchabfrage reagieren und entsprechend aktualisieren.

// App.jsx
import { Puck, DropZone } from "@measured/puck";
import "@measured/puck/puck.css";

// The configs for your draggable components
// Ideally you would pull these out into their own files
const dashboardConfig = {
  render: () => {
    return (
      <div
       >



<p>Once you’ve updated the file, start the application in development mode, and navigate to http://localhost:5173 to verify everything is working as expected:<br>
</p>

<pre class="brush:php;toolbar:false">npm run dev

Wenn Sie jetzt in den Editor gehen, eine Dashboard-Komponente auf die Leinwand ziehen, eine ArticleList darin ablegen und das Feld „initialQuery“ ändern, sehen Sie, dass die Liste die Artikel basierend auf der Abfrage dynamisch filtert. ?

Sie können dieses Setup sogar erweitern, indem Sie mehrere Listenkomponenten mit unterschiedlichem Inhalt denselben Abfragekontext wiederverwenden.

? Und das ist es! Sie haben jetzt einen gemeinsamen Status zwischen verschachtelten Puck-Komponenten. ?

Vor- und Nachteile der Verwendung von React Context

✅ Vorteile:

• Bietet eine robuste Lösung für die Zustandsfreigabe zwischen Komponenten, sowohl innerhalb als auch außerhalb von Puck
• Lässt sich nahtlos in vorhandene React-Muster und -Komponenten integrieren
• Kann mit komplexer Logik und Zuständen umgehen
• Keine externen Abhängigkeiten, da React Context mit React geliefert wird

❌ Nachteile:

• Die Leistung kann sich verschlechtern, wenn Sie den Status oben in einem großen Komponentenbaum häufig aktualisieren, da jeder Abonnent erneut rendern muss
• Beim Verwalten mehrerer Kontextanbieter kann es schwieriger werden, Fehler zu beheben

Wir gehen weiter

Je nach Komplexität Ihres Editors gibt es eine Reihe von Möglichkeiten, wie Sie die Verwaltung des gemeinsamen Status in Puck verbessern können:

• Kontextnutzung optimieren – Wenn Sie Leistungsprobleme oder unnötige erneute Renderings bemerken, sollten Sie erwägen, Ihren Kontext in kleinere, fokussiertere Kontexte aufzuteilen. Dadurch können Komponenten nur die Teile des Zustands abonnieren, die sie benötigen, wodurch erneute Renderings minimiert werden.
• Zustandsbibliotheken integrieren – Wenn Sie über mehrere gemeinsame Zustände und eine komplexere Logik verfügen, können Sie über React Context hinausgehen und Ihre bevorzugte Zustandsbibliothek verwenden. Unabhängig davon, ob es sich um Redux, Zustand oder eine andere Bibliothek handelt, die Ihr Projekt bereits verwendet, können diese die Verwaltung komplexer Zustände vereinfachen und die Rendering-Leistung verbessern.
• Nutzung des serverseitigen Status – Wenn Ihre Anwendung stark auf von einem Server abgerufene Daten angewiesen ist, sollten Sie die Verwendung einer Bibliothek wie TanStack Query oder SWR in Betracht ziehen. Diese Bibliotheken verwalten das Caching, das erneute Abrufen und die Synchronisierung für Sie und reduzieren so den Bedarf an komplexen gemeinsamen clientseitigen Status.

Sind Sie an der Reihe, mit Puck intelligenter zu bauen?

Wenn man die gemeinsame Zustandsverwaltung in Puck auf die nächste Ebene bringt, eröffnet sich eine Welt voller Möglichkeiten für die Erstellung dynamischer, reaktiver Seitenersteller. Ich bin gespannt auf die einzigartigen und leistungsstarken Apps, die Sie mit diesen Strategien erstellen werden.

Wenn dieser Artikel Sie also dazu inspiriert hat, etwas zu bauen, Sie eine Frage zu Puck haben oder einen Beitrag leisten möchten, können Sie sich wie folgt engagieren:

• ? Star Puck auf GitHub, um Ihre Unterstützung zu zeigen und andere zum Entdecken zu inspirieren.
• ? Treten Sie unserer Discord-Community bei, um Kontakte zu knüpfen, zu lernen und zusammenzuarbeiten.
• ? Folgen Sie uns auf X und Bluesky für kleine Einblicke, Updates und Tipps.
• ? Entdecken Sie die Dokumentation für fortgeschrittene Techniken zur Optimierung Ihrer Builds.

Die Zukunft von Puck – und der No-Code-Innovation – liegt in Ihren Händen. Beginnen Sie noch heute mit dem Bauen und lassen Sie uns gemeinsam neu definieren, was möglich ist! ?

Das obige ist der detaillierte Inhalt vonVerwalten des Anwendungsstatus in Puck. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!