React Academy · Pelajaran

Membuat Store Zustand Pertama Anda

Definisikan store dengan create(), tambahkan potongan status dan aksi, lalu gunakan dengan useStore.

Membuat Store Zustand Pertama Anda adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Selamat Datang

Dalam pelajaran ini, Anda akan membuat penyimpanan Zustand pertama dengan create(), mendefinisikan bagian status dan tindakan, lalu menggunakan penyimpanan tersebut dalam komponen React.

Apa Itu Zustand?

Zustand adalah pustaka pengelolaan status yang minimal dan tidak memaksakan pola tertentu. Penyimpanan adalah objek JavaScript biasa yang berisi status dan fungsi. Komponen berlangganan padanya melalui sebuah pengait. Tanpa penyedia, pereduksi, atau kode berulang.

Instalasi

Instal Zustand. Pustaka ini tidak memiliki dependensi sejawat.

npm install zustand

Membuat Penyimpanan

Panggil create() dengan fungsi yang mengembalikan status awal dan tindakan. Fungsi tersebut menerima pembantu `set` untuk memperbarui status.

import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Menggunakan Penyimpanan dalam Komponen

Panggil pengait penyimpanan dalam komponen apa pun untuk mengakses status dan tindakan. Anda tidak perlu membungkusnya dengan Penyedia.

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

Sintaks Pemilih

Teruskan fungsi pemilih ke pengait penyimpanan untuk hanya berlangganan bagian yang Anda perlukan. Komponen hanya dirender ulang ketika nilai yang dipilih berubah.

const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

Memperbarui Status dengan set

Fungsi `set` menggabungkan nilai baru ke dalam penyimpanan secara dangkal. Anda dapat meneruskan objek atau fungsi yang menerima status saat ini dan mengembalikan pembaruan parsial.

set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

Tindakan Asinkron

Tindakan dapat bersifat asinkron. Panggil set setelah menunggu data. Anda tidak memerlukan perantara — cukup tulis fungsi asinkron biasa.

const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

Pembaruan Status Bertingkat

Untuk objek bertingkat, sebarkan tingkat luar secara manual atau gunakan perantara immer untuk mutasi mendalam. Secara bawaan, set hanya menggabungkan kunci tingkat teratas.

set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

Membaca Penyimpanan di Luar React

Akses status penyimpanan di luar komponen dengan getState() dan berlangganan perubahan dengan subscribe(). Berguna untuk pengujian dan kode non-React.

const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

Pemeriksaan Singkat

Dalam penyimpanan Zustand, apa yang dilakukan fungsi set?

Ringkasan

Buat penyimpanan Zustand dengan create((set) => ({ state, actions })). Gunakan sintaks pemilih dalam komponen untuk berlangganan bagian status. Tindakan memanggil set() untuk memperbarui status. Cara ini berfungsi secara asinkron dan di luar React dengan getState().

Berikutnya

Pelajaran berikutnya: **Pemilih & Mencegah Render Ulang yang Tidak Perlu** — Anda akan mengambil bagian status tertentu agar komponen hanya dirender ulang saat diperlukan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat Store Zustand Pertama Anda” gratis?

Ya — teks lengkap “Membuat Store Zustand Pertama Anda” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membuat Store Zustand Pertama Anda”?

Definisikan store dengan create(), tambahkan potongan status dan aksi, lalu gunakan dengan useStore. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Membuat Store Zustand Pertama Anda” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Membuat Store Zustand Pertama Anda
Pemilih & Pencegahan Render Ulang yang Tidak Perlu
Mempertahankan Status dengan Middleware Persist
DevTools Zustand & Pengujian Store

← Kembali ke React Academy