Understanding Zustand

Pengurusan keadaan sering terasa terlalu kompleks.

Anda tahu cara menggunakan React useState. Anda tahu cara menghantar props. Anda tahu cara melakukan lift state up.

Tetapi segalanya akan menjadi kacau apabila aplikasi anda berkembang. Anda mula menghantar data melalui komponen yang tidak memerlukannya. Inilah yang dipanggil prop drilling. Ia menjadikan kod anda berserabut dan sukar untuk diselenggara.

Zustand menyelesaikan masalah ini. Ia memberikan aplikasi anda satu keadaan kongsi (shared state) di luar komponen React anda.

Fikirkan seperti ini:

Tanpa Zustand: Komponen A menghantar props kepada B, B menghantar props kepada C, dan C menghantar props kepada D.

Dengan Zustand: Setiap komponen berkomunikasi secara terus dengan stor pusat (central store). Tiada orang tengah. Tiada prop drilling.

Sebuah stor Zustand terdiri daripada dua perkara:

  • State: Data anda.
  • Actions: Fungsi yang mengubah data anda.

Itu sahaja.

Zustand adalah pantas kerana ia hanya melakukan re-render pada komponen yang menggunakan data khusus yang telah berubah.

Jika anda mahu data anda kekal selepas halaman dimuat semula (page refresh), gunakan localStorage. Memandangkan localStorage hanya menyimpan rentetan (strings), anda mesti menggunakan JSON.stringify untuk menyimpan objek dan JSON.parse untuk membacanya.

Berikut adalah cara mudah untuk menstrukturkan stor pengesahan (auth store):

  • Simpan pengguna dan token dalam localStorage.
  • Gunakan fungsi log masuk (login) untuk mengemas kini stor dan stor pelayar (browser storage).
  • Gunakan fungsi log keluar (logout) untuk mengosongkan kedua-duanya.

Bagaimanakah ia berbanding dengan Redux?

Redux memerlukan dispatchers dan reducers. Ia melibatkan banyak kod boilerplate. Zustand membolehkan anda memanggil fungsi secara terus. Ia mempunyai beban mental (mental overhead) yang lebih rendah dan persediaan yang lebih ringkas.

Kesilapan biasa yang perlu dielakkan:

  • Terlupa untuk mengembalikan (return) objek dalam fungsi create. Gunakan kurungan di sekeliling objek anda.
  • Menggunakan tanda titik bertitik (semicolons) di dalam objek state anda. Gunakan koma sebagai ganti.
  • Melakukan parsing pada data yang sudah pun merupakan rentetan (string).

Pustaka pengurusan keadaan (state management libraries) bukan sekadar tentang menguruskan keadaan. Ia adalah tentang menguruskan kerumitan.

Berhenti cuba menghafal setiap API. Mula lihat masalah yang cuba diselesaikan oleh alatan tersebut. Apabila anda memahami masalahnya, penggunaan alatan itu akan menjadi masuk akal.

Sumber: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11