Jika Anda membuat aplikasi web yang lebih kecil sekalipun, Anda mungkin perlu menyimpan beberapa jenis data dan meneruskan data ini antar komponen dan dari halaman ke halaman.
Biasanya Anda akan menyimpan data dalam keadaan dan Anda mengelola berbagi status antara halaman dan komponen dengan menggunakan Konteks atau dengan Kerangka Manajemen Negara seperti Redux. Pendekatan ini dapat menimbulkan banyak kerumitan pada aplikasi Anda, dan ini merupakan kelemahannya, terutama jika Anda perlu memantau hal-hal sederhana.

Apa itu Zustand

Zusstand adalah solusi ringan dan mudah digunakan untuk mengelola status dengan cara yang sederhana, mudah digunakan, dan akan menyelesaikan sebagian besar kebutuhan yang mungkin Anda hadapi saat mengembangkan aplikasi web yang memerlukan pengelolaan status. Selain itu, Zustand dapat menyimpan data antar halaman dan memuat ulang (lebih lanjut tentang ini nanti)



Zustand
🐻 Memenuhi kebutuhan pengelolaan negara di Reactzustand.surge.sh



Apakah Zustand berfungsi dengan Nextjs

Ya! Zustand benar-benar kompatibel dengan Nextjs, tetapi jika Anda perlu mempertahankan status, diperlukan beberapa penyesuaian, hal ini disebabkan oleh cara kerja Nextjs, tetapi dengan beberapa baris tambahan semuanya akan sangat lancar (dalam contoh kita, kita akan mempertahankan status )

Kapan Zustand bermanfaat?

Itu tergantung pada kasus penggunaan Anda, tetapi pertimbangkan bahwa meskipun Zustand ringan dan mudah, Zustand sangat kuat dan memiliki beberapa fitur canggih; jadi setiap kali Anda memulai dari awal, dan keadaannya tidak terlalu rumit, Anda dapat mencoba Zustand. Jika Anda perlu melacak formulir multi-langkah (seperti survei atau registrasi kompleks), jika Anda perlu menyimpan beberapa detail pengguna, jika Anda perlu melacak keranjang (seperti dalam contoh yang akan kami tunjukkan ). Selain itu, Zustand mengizinkan penyimpanan data ini menggunakan Penyimpanan lokal (atau metode penyimpanan klien lainnya), sehingga pengguna tidak akan kehilangan apa pun saat memuat ulang atau di sesi lain.

Bagaimana Zustand bekerja?

Pada tingkat paling dasar untuk bekerja dengan Zustand, Anda membuat Store yang merupakan pengait khusus sehingga dapat diterapkan di mana saja di aplikasi Anda:

import create from 'zustand'
const useStore = create(set => ({
  bears: 0,
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
}))

Di halaman atau komponen Anda cukup mengakses hook, sehingga Anda dapat mengakses status dan fungsinya, setiap kali status diperbarui, komponen dirender ulang:

function Home() {
  const bears = useStore(state => state.bears)
  const increasePopulation = useStore(state => state.increasePopulation)
   return {
      <h1>{bears}</h1>
      <button onClick={increasePopulation}>Add Bear</button>
   }
}

Apa yang kita bangun?

Dalam contoh ini, kami akan memanfaatkan Zustand untuk melacak keranjang pengguna di situs web e-niaga fiktif
Secara detail:

  • kami akan menyimpan seluruh keranjang dalam keadaan: jumlah total keranjang, jumlah item dalam keranjang, daftar produk dalam keranjang
  • kita akan membuat beberapa fungsi status: menambahkan item ke troli, memperbarui jumlah item di troli, mengeluarkan item dari troli, dan membersihkan troli
  • kami akan menyimpan keranjang di Penyimpanan lokal, sehingga pengguna tidak akan kehilangan keranjangnya saat menjelajahi halaman situs kami dan bahkan jika meninggalkan situs dan kembali lagi nanti
  • kami akan menerapkan di halaman kami kode yang diperlukan agar persistensi status berfungsi dengan Nextjs

Menyiapkan proyek

Jika Anda ingin mengikutinya tanpa coding, Anda dapat mengunduh repositori untuk proyek ini di sini:



GitHub - popeating/state-mgt
Ini adalah proyek Next.js yang di-bootstrap dengan create-next-app . Pertama, jalankan server pengembangan: Buka…github.com



Inisialisasi proyek dengan:

npx create-next-app state-mgt

Kemudian masuk ke folder yang baru dibuat state-mgt dan instal modul Zustand:

npm install zustand

Kami juga akan menggunakan Tailwind CSS untuk menata situs kami, ini sepenuhnya opsional, mengikuti dokumen resmi



Instal Tailwind CSS dengan Next.js - Tailwind CSS
Dokumentasi untuk kerangka Tailwind CSS.tailwindcss.com



Kemudian kami membersihkan proyek tersebut, dimulai dengan file index.js yang hampir kosong.

Mengonfigurasi Toko

Hal pertama yang kita definisikan toko kita di store/store.js

Ini pada dasarnya mendefinisikan hook kita (useCart) yang diinisialisasi menggunakan metode create, penyimpanan (yang diperluas sebagai persistone) akan berisi keadaan terbuat dari total(angka yang mewakili nilai total keranjang), totalqty(angka dengan total item dalam keranjang), cartContent (array yang berisi produk dalam keranjang, termasuk detail produk seperti jumlah, id, nama, dan sebagainya).
Selanjutnya, kita mendefinisikan fungsi yang akan diperbarui (set ) negara:

  • addTocartakan menambahkan produk ke cartContent, dan meningkatkan total dan totalqty
  • updatecartseperti sebelumnya, namun alih-alih menambahkan baris baru ke cartContent, perbarui jumlah baris yang ada.
  • clearCartmengatur ulang status ke nilai awal (kosong).
  • removeFromCarthapus satu baris dari cartContent dan perbarui totaldan totalqty

Nama yang ditentukan di akhir file adalah nama objek di Penyimpanan lokal, di sini Anda juga dapat menentukan metode penyimpanan persistensi ("info lebih lanjut di dokumen resmi")

Produk

Untuk mempermudah dan menghindari pengaturan basis data, kami menyimpan produk kami sebagai objek dalam file lib/products.js

Setiap produk adalah objek dengan id, nama, harga, dan detail gambar (gambar disimpan di folder publicNextjs). Tambahkan produk sebanyak yang Anda butuhkan/suka.

Tajuk

Dalam contoh ini kita akan menggunakan header umum untuk mendemonstrasikan penggunaan status dalam komponen dan persistensi status di berbagai halaman:

Header akan selalu menunjukkan nilai keranjang dan jumlah produk di keranjang. Seperti disebutkan sebelumnya, karena kita bekerja di Nextjs, cara halaman dirender (SSR dan SSG) tidak memungkinkan untuk mengakses status persisten pada klien secara langsung, solusinya adalah dengan mengaksesnya setelah komponen dipasang. Dalam hal ini, kami tidak mengakses dan merender total dan totalqtyyang berasal dari hook useCart, namun kami merender mytotal dan mytotalqtyyang merupakan dua negara bagian lokal yang disetel ke negara bagian Zustand ketika berubah. Pada dasarnya, hal ini disebabkan oleh fakta bahwa halaman dirender di server, dan selama proses rendering ini halaman tidak dapat mengakses penyimpanan klien untuk membaca nilainya; setelah halaman terhidrasi, penyimpanan klien diakses dan nilainya diambil; pada titik ini nilai klien bertentangan dengan nilai server yang mengakibatkan peringatan. Memiliki “render ganda” ini akan menyelesaikan masalah.

Cara lain untuk mengatasi masalah ini di Nextjs adalah dengan menyimpan status juga dari jarak jauh (misalnya di Redis) sehingga pada rendering server tidak terjadi ketidakcocokan.

Halaman

Situs ini akan memiliki 3 halaman yang memiliki header yang sama: halaman indeks dengan daftar produk, dengan mengklik suatu produk maka produk tersebut akan ditambahkan ke keranjang; halaman keranjang yang akan menampilkan konten keranjang dan memungkinkan mengeluarkan produk dari keranjang; halaman tentang yang hanya sekedar pengganti.

Mari kita mulai dengan yang paling mudah pages/about.js :

Halaman ini tidak akan melakukan apa pun selain header

Halaman utama akan menjadi pages/index.js:

Di halaman ini kami mengulang produk kami dan mencetaknya dalam kotak, kami melampirkan tindakan pada setiap klik produk (addProduct(…)) sehingga setiap kali produk diklik produk itu sendiri ditambahkan (atau diperbarui) ke keranjang melalui set fungsiyang ada di kait useCart

Halaman keranjang akan menjadi pages/cart.js:

Halaman ini akan mengulang produk di keranjang dan menampilkannya, menambahkan tombol untuk mengeluarkannya dari keranjang. Seperti pada komponen Header, kita perlu menggunakan status lokal yang diisi dengan status Zustand setelah hidrasi.

Jika sekarang Anda menjalankan proyek:

npm run dev

dan arahkan browser Anda ke:

http://localhost:3000

Anda harus mendapatkan situs web e-commerce fiktif kami, mengklik suatu produk akan menambahkannya ke keranjang (dan memperbarui status total dan kuantitas akan memperbarui Header), berpindah antar halaman tidak akan mengatur ulang keranjang (keranjang disimpan di localStarage) ; pergi ke halaman keranjang Anda dapat menghapus produk (dan akibatnya memperbarui Header).

Apa berikutnya

Ini hanyalah contoh dasar bagaimana Zustand dapat digunakan untuk pengelolaan negara dasar (dan tidak terlalu mendasar). Tentu saja, ini bukan e-commerce yang lengkap dan pengelolaan negara tidak dioptimalkan untuk lingkungan produksi. Bagaimanapun, ini dapat digunakan sebagai titik awal, terutama bagi pengembang yang perlu mengintegrasikannya ke dalam proyek Nextjs

Anda dapat mendukung pekerjaan saya dengan membelikan saya kopi