Puck でのアプリケーションの状態の管理

Puck は React 用のオープンソース ビジュアル エディターであり、次世代のページ ビルダーとノーコード製品を強化します。 GitHub でスターを付けてください! ⭐️

---

パックは急速に成長しており、見るのは素晴らしいです! ?あらゆる背景を持つ開発者が、このオープンソースのビジュアル エディターでできることの限界を押し広げています。しかし、Puck に興味を持つ人が増えるにつれて、Discord コミュニティでは 1 つの質問が上がり続けています。

「Puck のコンポーネント間でデータを渡したり、状態を共有したりするにはどうすればよいですか?」

言い換えると、あるコンポーネントが別のコンポーネントの変更にどのように反応するのでしょうか?たとえば、検索入力を使用して DropZone コンポーネントを作成し、その中にドロップされたリストがその値を読み取れるようにすることができます。

最初は、Puck に組み込まれた魔法を見て、Puck が独自の方法で状態を処理していると思われるかもしれません。しかし重要なのは、Puck は単なる React であり、Puck に渡すコンポーネントも同様です。 つまり、コンポーネント間のデータの管理と共有に通常使用する状態ライブラリやツールを利用できるということです。この記事では、シンプルにして、Context を使用してこの問題を解決する方法を説明します。

始める前に: Puck とその仕組みについて基本的に理解していることを前提とします。初めての方でも大丈夫です。ぜひフォローしてください。ただし、基本を理解するために、最初にスタート ガイドを確認することをお勧めします

プロジェクトのセットアップ

作業を簡単にするために、Puck がプリインストールされ、すぐに使用できる基本的な React プロジェクトを GitHub 上に準備しました。ターミナルで次のコマンドを実行して、クローンを作成してインストールします:

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 ファイルを開き、その内容を以下のコードと入れ替えます。これにより、2 つのコンポーネントをドラッグ アンド ドロップするための基本的な構成で 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 の 2 つの一般的な使用例を説明します。

1. Puck の外部に保存されたデータへのアクセス: まず、 の外部にログイン ユーザーのデータを含むコンテキストを設定します。コンポーネントにアクセスし、Puck コンポーネント内からアクセスします。
2. ネストされたコンポーネントにデータを渡す: 次に、ダッシュボード内で検索クエリ コンテキストを設定します。これにより、ユーザーの検索クエリを取得してコンテキストに保存し、ArticleList コンポーネントに渡すことができます。目標は、ユーザーのクエリに基づいて記事のリストをフィルタリングし、親と子の Puck コンポーネント間でデータを渡す方法を示すことです。

ステップ 1: パックの外部でコンテキストを定義する

Puck でのコンテキストのセットアップは、他の React アプリと同じパターンに従います。コンテキスト プロバイダーを作成して、共有状態を定義および管理し、それを親コンポーネントの周囲にラップし、アプリ内で必要な場所にある状態にアクセスまたは更新します。

まず、ユーザー データの新しいコンテキストを作成します。このコンテキストには、ユーザー オブジェクトとユーザー状態を更新する関数の両方が含まれます。

npm i @measured/puck --save

ステップ 2: Puck の外部にコンテキスト プロバイダーを作成する

次に、Puck エディターをラップする UserProvider コンポーネントを作成します。このプロバイダーはユーザーの状態を管理し、すべての子がそれを利用できるようにします。

簡潔にするために、ダミーのユーザーと useState から返されるセッター関数を使用しています。

// 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 コンポーネントからコンテキストを消費する

ここで、コンテキスト プロバイダー内にドロップされたコンポーネントのコンテキストを読み取ります。この例では、ユーザーが DropZone 経由でダッシュボード内にネストした ArticleList コンポーネント内のコンテキストを使用します。これにより、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 の未来、そしてノーコードのイノベーションはあなたの手の中にあります。今日から構築を始めて、何ができるかを一緒に再定義しましょう! ?