在 Puck 中管理應用程式狀態

Puck 是 React 的開源視覺化編輯器，為下一代頁面建立器和無程式碼產品提供支援。在 GitHub 上給我們一顆星！ ⭐️

---

Puck 正在迅速成長，觀看起來真是太棒了！ ？來自不同背景的開發人員正在突破這個開源視覺化編輯器的功能界限。但隨著越來越多的人投入 Puck，我們的 Discord 社群中不斷出現一個問題：

「如何在 Puck 中的元件之間傳遞資料或共享狀態？」

換句話說：如何讓一個元件對另一個元件的變化做出反應？例如，您可以建立一個帶有搜尋輸入的 DropZone 元件，以便放置在其中的任何清單都可以讀取其值：

首先，Puck 的內建魔法可能會讓您認為它以獨特的方式處理狀態。但事情是這樣的：Puck 只是 React，您傳遞給它的元件也是如此。 這表示您可以依賴通常用來在元件之間管理和共用資料的任何狀態庫或工具。在這篇文章中，我將簡單地教你如何使用 Context 來解決這個問題。

在我們開始之前：我假設您已經對 Puck 及其工作原理有了基本的了解。如果您是新來的，那也完全沒問題—歡迎您跟隨！但我建議先查看入門指南以熟悉基礎知識

項目設定

為了讓事情變得簡單，我在 GitHub 上準備了一個基本的 React 項目，並預先安裝了 Puck 並準備就緒。透過在終端機中執行以下命令來克隆並安裝它：

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

已經在處理現有項目？完全沒問題！您可以簡單地使用 NPM 將 Puck 安裝為依賴項：

npm i @measured/puck --save

如果您使用 Next.js 或 Remix 等框架，Puck 會提供官方配方，讓設定過程變得無縫。

對於本教程，我假設您已經克隆了 GitHub 存儲庫以使事情簡單明了。也就是說，這些概念和步驟將適用於任何設定 - 只需根據需要更新檔案名稱以適合您的專案結構。

配置冰球

專案準備就緒後，下一步是設定 Puck。打開 src/App.jsx 檔案並將其內容與以下程式碼交換。這將為 Puck 設定一個用於拖放兩個組件的基本配置：

• 一個向使用者致意的儀表板元件，並包含一個用於嵌套其他元件的 DropZone
• 一個 ArticleList 元件，用於在儀表板中顯示文章列表

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

太棒了！您的基本設定現已完成。接下來，讓我們深入研究在編輯器中新增共享狀態。

新增上下文

React Context 是解決我們問題的完美解決方案，因為它提供了一種在所有元件（編輯器內部和外部）之間共用和管理資料的簡單方法。它創建了一個您可以在需要時訪問的“全局狀態”，非常適合需要從 Puck 外部提取資料（例如所選主題或登入使用者）或在 Puck 元件之間共享資料的場景。

在本指南中，我將引導您了解 Puck 中 React Context 的兩個常見用例：

1. 存取 Puck 外部儲存的資料：我們首先在 之外設定一個包含登入使用者資料的上下文。組件，然後從 Puck 組件存取它。
2. 將資料傳遞給巢狀元件：接下來，我們將在儀表板中設定搜尋查詢上下文。這將使我們能夠捕獲用戶的搜尋查詢，將其儲存在上下文中，並將其傳遞給 ArticleList 元件。目標是根據使用者的查詢過濾文章列表，示範如何在父 Puck 元件和子 Puck 元件之間傳遞資料。

第 1 步：定義 Puck 外部的上下文

在 Puck 中設定上下文遵循與任何 React 應用程式相同的模式。您建立一個 Context 提供者來定義和管理您的共用狀態，將其包裝在父元件中，並在應用程式中需要的地方存取或更新狀態。

首先為使用者資料建立一個新的上下文。該上下文將包含使用者物件和更新使用者狀態的函數。

npm i @measured/puck --save

第 2 步：在 Puck 外部建立上下文提供者

接下來，建立一個 UserProvider 元件來包裝您的 Puck 編輯器。該提供者將管理用戶狀態並將其提供給所有孩子。

為了簡潔起見，我使用了一個虛擬使用者和 useState 傳回的 setter 函數。

// 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

第 3 步：將提供者與 Puck 集成

要將提供者與 Puck 編輯器集成，只需使用 UserProvider 包裝編輯器即可。您可以將 UserProvider 放置在元件樹中編輯器上方的任何位置（例如索引檔案中），並且它會正常運作。完成此操作後，所有編輯器元件都將可以存取上下文！

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

步驟 4：使用 Puck 元件中的上下文

現在您可以在任何 Puck 元件中存取 UserContext。按照我們的用例範例，讓我們更新儀表板元件，以便它為登入使用者顯示「歡迎回來」訊息，為訪客顯示「通用歡迎」訊息。

npm i @measured/puck --save

第 7 步：使用 Puck 元件中的上下文

現在，我們將讀取放置在上下文提供者中的元件中的上下文。在我們的範例中，我們將使用 ArticleList 元件中的上下文，使用者透過 DropZone 將其嵌套在儀表板中。這允許 ArticleList 回應搜尋查詢中的變更並相應更新。

// 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

如果您現在進入編輯器，將儀表板組件拖到畫布上，將 ArticleList 放入其中，然後修改 initialQuery 字段，您將看到列表根據查詢動態過濾文章。 ？

您甚至可以透過讓具有不同內容的多個清單元件重複使用相同的查詢上下文來擴充此設定。

？就是這樣！現在，您可以在嵌套的 Puck 元件之間共用狀態。 ？

使用 React Context 的優點和缺點

✅ 優點：

• 提供了一個強大的解決方案，用於在 Puck 內部和外部的組件之間共享狀態
• 與現有的 React 模式和元件無縫整合
• 可以處理複雜的邏輯和狀態
• 零外部依賴，因為 React Context 隨 React 一起提供

❌缺點：

• 如果經常更新大型元件樹頂部的狀態，效能可能會下降，因為每個訂閱者都需要重新渲染
• 管理多個上下文提供者時，事情可能會變得更難除錯

更進一步

根據編輯器的複雜程度，您可以透過多種方法來改善 Puck 中共享狀態的管理：

• 最佳化上下文使用 -如果您發現效能問題或不必要的重新渲染，請考慮將上下文拆分為更小、更集中的上下文。這允許元件僅訂閱它們需要的狀態部分，從而最大限度地減少重新渲染。
• 合併狀態庫 -如果您有多個共享狀態和更複雜的邏輯，您可以超越 React Context 並使用您最喜歡的狀態庫。無論是 Redux、Zustand 還是您的專案已在使用的其他程式庫，這些都可以簡化複雜狀態的管理並提高渲染效能。
• 利用伺服器端狀態 -如果您的應用程式嚴重依賴從伺服器取得的數據，請考慮使用 TanStack Query 或 SWR 等函式庫。這些程式庫為您管理快取、重新取得和同步，從而減少對複雜的共用用戶端狀態的需求。

輪到您與 Puck 一起打造更聰明的產品了嗎？

將 Puck 中的共享狀態管理提升到一個新的水平，為構建動態、反應式頁面構建器打開了一個充滿可能性的世界。我很高興看到您將使用這些策略建立獨特而強大的應用程式。

所以，如果這篇文章激勵了您建立一些東西，您對 Puck 有疑問或您想做出貢獻，那麼您可以透過以下方式參與其中：

• ？ GitHub 上的 Star Puck 以表達您的支持並激勵其他人探索。
• ？加入我們的 Discord 社群 進行聯繫、學習和協作。
• ？在 X 和 Bluesky 上關注我們，以了解先睹為快、更新內容和提示。
• ？探索文件以獲取增強您的構建的高級技術。

Puck 的未來以及無程式碼創新都掌握在您的手中。從今天開始構建，讓我們一起重新定義一切可能！ ？