在 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 的未来以及无代码创新都掌握在您的手中。从今天开始构建，让我们一起重新定义一切可能！ ？

以上是在 Puck 中管理应用程序状态的详细内容。更多信息请关注PHP中文网其他相关文章！