Menguruskan keadaan aplikasi dalam Puck

Puck ialah editor visual sumber terbuka untuk React, memperkasakan generasi pembina halaman dan produk tanpa kod generasi seterusnya. Beri kami bintang di GitHub! ⭐️

---

Puck telah berkembang pesat, dan ia sangat menarik untuk ditonton! ? Pembangun dari semua latar belakang menolak sempadan perkara yang boleh dilakukan oleh editor visual sumber terbuka ini. Tetapi apabila lebih ramai orang menyelami Puck, satu soalan terus timbul dalam komuniti Discord kami:

“Bagaimana saya boleh menghantar data atau berkongsi keadaan antara komponen dalam Puck?”

Dalam erti kata lain: bagaimana anda membuat satu komponen bertindak balas terhadap perubahan yang lain? Sebagai contoh, anda mungkin mencipta komponen DropZone dengan input carian, supaya mana-mana senarai yang tercicir di dalamnya boleh membaca nilainya:

Pada mulanya, keajaiban terbina dalam Puck mungkin membuatkan anda berfikir ia mengendalikan keadaan dengan cara yang unik. Tetapi inilah perkaranya: Puck hanyalah React—dan begitu juga komponen yang anda masukkan ke dalamnya. Ini bermakna anda boleh bergantung pada mana-mana pustaka negeri atau alat yang biasanya anda gunakan untuk mengurus dan berkongsi data antara komponen. Untuk artikel ini, saya akan ringkaskan dan mengajar anda cara menyelesaikan masalah ini dengan menggunakan Konteks.

Sebelum kita bermula: Saya akan menganggap anda mempunyai pemahaman asas tentang Puck dan cara ia berfungsi. Jika anda baru di sini, itu tidak mengapa-anda dialu-alukan untuk mengikuti! Tetapi saya akan mengesyorkan menyemak panduan permulaan terlebih dahulu untuk membiasakan diri dengan asas

Persediaan Projek

Untuk memudahkan urusan, saya telah menyediakan projek React asas pada GitHub dengan Puck diprapasang dan sedia untuk digunakan. Klon dan pasangkannya dengan menjalankan arahan berikut dalam terminal anda:

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

Sudah mengerjakan projek sedia ada? Tiada masalah langsung! Anda hanya boleh memasang Puck sebagai pergantungan dengan NPM:

npm i @measured/puck --save

Dan jika anda menggunakan rangka kerja seperti Next.js atau Remix, Puck menawarkan resipi rasmi untuk menjadikan proses persediaan lancar.

Untuk tutorial ini, saya akan menganggap anda telah mengklon repo GitHub untuk memastikan perkara itu mudah. Walau bagaimanapun, konsep dan langkah akan digunakan pada sebarang persediaan—hanya kemas kini nama fail mengikut keperluan agar sesuai dengan struktur projek anda.

Mengkonfigurasi Puck

Dengan projek anda sedia untuk digunakan, langkah seterusnya ialah mengkonfigurasi Puck. Buka fail src/App.jsx dan tukar kandungannya dengan kod di bawah. Ini akan menyediakan Puck dengan konfigurasi asas untuk menyeret dan menjatuhkan dua komponen:

• Komponen Papan Pemuka yang menyambut pengguna dan mengandungi DropZone untuk meletakkan komponen lain
• Komponen Senarai Artikel yang memaparkan senarai artikel di dalam Papan Pemuka

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

Hebat! Persediaan asas anda kini selesai. Seterusnya, mari kita mendalami cara menambahkan keadaan kongsi pada editor anda.

Menambah Konteks

Konteks React ialah penyelesaian yang sempurna untuk masalah kami kerana ia menawarkan cara mudah untuk berkongsi dan mengurus data merentas semua komponen anda—baik di dalam mahupun di luar editor. Ia mewujudkan "keadaan global" yang boleh anda akses bila-bila masa diperlukan, menjadikannya sesuai untuk senario di mana anda perlu menarik masuk data dari luar Puck—seperti tema yang dipilih atau pengguna log masuk—atau berkongsi data antara komponen Puck.

Dalam panduan ini, saya akan membimbing anda melalui dua kes penggunaan biasa untuk React Context dalam Puck:

1. Mengakses data yang disimpan di luar Puck: Kami akan mulakan dengan menyediakan konteks yang mengandungi data pengguna log masuk di luar komponen, dan kemudian aksesnya dari dalam komponen Puck.
2. Menyalurkan data kepada komponen bersarang: Seterusnya, kami akan menyediakan konteks pertanyaan carian dalam Papan Pemuka. Ini akan membolehkan kami menangkap pertanyaan carian pengguna, menyimpannya dalam konteks dan menyampaikannya kepada komponen Senarai Artikel. Matlamatnya adalah untuk menapis senarai artikel berdasarkan pertanyaan pengguna, menunjukkan cara menghantar data antara komponen Puck ibu bapa dan anak.

Langkah 1: Tentukan Konteks di luar Puck

Menyediakan konteks dalam Puck mengikut corak yang sama seperti mana-mana apl React. Anda membuat penyedia Konteks untuk mentakrif dan mengurus keadaan kongsi anda, membungkusnya dengan komponen induk dan mengakses atau mengemas kini keadaan di mana-mana sahaja ia diperlukan dalam apl anda.

Mulakan dengan mencipta Konteks baharu untuk data pengguna. Konteks ini akan merangkumi kedua-dua objek pengguna dan fungsi untuk mengemas kini keadaan pengguna.

npm i @measured/puck --save

Langkah 2: Buat Penyedia Konteks di luar Puck

Seterusnya, buat komponen UserProvider yang akan membalut editor Puck anda. Penyedia ini akan mengurus keadaan pengguna dan menyediakannya kepada semua kanak-kanak.

Demi ringkasnya, saya menggunakan pengguna tiruan dan fungsi setter dikembalikan oleh 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

Langkah 3: Integrasikan Pembekal dengan Puck

Untuk menyepadukan penyedia dengan editor Puck anda, hanya bungkus editor dengan UserProvider. Anda boleh meletakkan UserProvider di mana-mana sahaja di atas editor dalam pepohon komponen anda (seperti dalam fail indeks anda), dan ia akan berfungsi dengan baik. Sebaik sahaja anda melakukannya, semua komponen editor anda akan mempunyai akses kepada konteks!

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

Langkah 4: Gunakan Konteks dalam Komponen Puck

Kini anda boleh mengakses UserContext dalam mana-mana komponen Puck anda. Mengikuti contoh kes penggunaan kami, mari kemas kini komponen Papan Pemuka supaya ia memaparkan mesej "selamat kembali" untuk pengguna log masuk dan mesej "sambutan generik" untuk tetamu.

npm i @measured/puck --save

Langkah 7: Gunakan Konteks daripada komponen Puck

Sekarang, kita akan membaca konteks dalam komponen yang digugurkan dalam penyedia konteks. Dalam kes kami, kami akan menggunakan konteks dalam komponen Senarai Artikel, yang pengguna telah bersarang di dalam Papan Pemuka melalui DropZone. Ini membolehkan Senarai Artikel membalas perubahan dalam pertanyaan carian dan mengemas kini dengan sewajarnya.

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

Jika anda kini menuju ke editor, seret komponen Papan Pemuka ke atas kanvas, lepaskan Senarai Artikel di dalamnya dan ubah suai medan initialQuery, anda akan melihat senarai menapis artikel secara dinamik berdasarkan pertanyaan. ?

Anda juga boleh mengembangkan persediaan ini dengan mempunyai berbilang komponen senarai dengan kandungan berbeza menggunakan semula konteks pertanyaan yang sama.

? Dan itu sahaja! Anda kini telah berkongsi keadaan antara komponen Puck bersarang. ?

Kebaikan & Keburukan menggunakan React Context

✅ Kelebihan:

• Menyediakan penyelesaian yang mantap untuk berkongsi keadaan merentas komponen, di dalam dan di luar Puck
• Bersepadu dengan lancar dengan corak dan komponen React sedia ada
• Boleh mengendalikan logik dan keadaan yang kompleks
• Sifar kebergantungan luaran kerana React Context disertakan dengan React

❌ Keburukan:

• Prestasi boleh merosot jika anda kerap mengemas kini keadaan di bahagian atas pokok komponen yang besar, kerana setiap pelanggan perlu memaparkan semula
• Apabila mengurus berbilang penyedia konteks, perkara boleh menjadi lebih sukar untuk dinyahpepijat

Membawanya lebih jauh

Terdapat banyak cara untuk anda meningkatkan pengurusan keadaan kongsi dalam Puck bergantung pada kerumitan editor anda:

• Optimumkan penggunaan konteks - Jika anda melihat isu prestasi atau pemaparan semula yang tidak perlu, pertimbangkan untuk membahagikan konteks anda kepada konteks yang lebih kecil dan lebih fokus. Ini membolehkan komponen melanggan hanya bahagian negeri yang mereka perlukan, meminimumkan pemaparan semula.
• Sertakan pustaka negeri - Jika anda mempunyai berbilang keadaan kongsi dan logik yang lebih kompleks, anda boleh melangkaui Konteks Reaksi dan menggunakan pustaka negeri kegemaran anda. Sama ada Redux, Zustand atau perpustakaan lain yang sedang digunakan oleh projek anda, ini boleh memudahkan pengurusan keadaan kompleks dan meningkatkan prestasi pemaparan.
• Memanfaatkan keadaan bahagian pelayan - Jika aplikasi anda sangat bergantung pada data yang diambil daripada pelayan, pertimbangkan untuk menggunakan pustaka seperti TanStack Query atau SWR. Perpustakaan ini mengurus caching, pengambilan semula dan penyegerakan untuk anda, mengurangkan keperluan untuk keadaan bahagian klien kongsi yang kompleks.

Giliran Anda untuk Membina Lebih Bijak dengan Puck ?

Mengambil pengurusan negeri yang dikongsi dalam Puck ke peringkat seterusnya membuka dunia kemungkinan untuk membina pembina halaman yang dinamik dan reaktif. Saya teruja untuk melihat apl unik dan berkuasa yang akan anda bina menggunakan strategi ini.

Jadi, jika artikel ini telah memberi inspirasi kepada anda untuk membina sesuatu, anda mempunyai soalan tentang Puck atau anda ingin menyumbang, berikut ialah cara anda boleh terlibat:

• ? Star Puck di GitHub untuk menunjukkan sokongan anda dan memberi inspirasi kepada orang lain untuk meneroka.
• ? Sertai komuniti Discord kami untuk berhubung, belajar dan bekerjasama.
• ? Ikuti kami di X dan Bluesky untuk melihat sekilas, kemas kini dan petua.
• ? Terokai dokumentasi untuk mendapatkan teknik lanjutan untuk menyerlahkan binaan anda.

Masa depan Puck—dan inovasi tanpa kod—ada di tangan anda. Mula membina hari ini, dan mari kita mentakrifkan semula perkara yang mungkin bersama-sama! ?