Zustand untuk State React yang Ringan
Buat store Zustand dengan create(), baca state dengan hook, perbarui dengan action, dan nikmati API minimal tanpa kode boilerplate.
Zustand untuk State React yang Ringan adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu Zustand?
Zustand adalah pustaka minimal dan cepat untuk pengelolaan status React. Seluruh permukaan API sangat kecil: buat penyimpanan, lalu gunakan hook untuk membaca dan memperbaruinya. Tidak ada pereduksi, tindakan, atau kode boilerplate.
Membuat Penyimpanan
create() mendefinisikan penyimpanan dengan status dan tindakan sebagai objek biasa. Nilai yang dikembalikan adalah hook.
import { create } from 'zustand';
interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
export const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
decrement: () => set(state => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));Membaca Status Penyimpanan
Panggil hook dengan fungsi pemilih untuk berlangganan irisan status tertentu. Komponen hanya dirender ulang ketika irisan yang dipilih berubah.
function Counter() {
const count = useCounterStore(state => state.count);
return <p>Count: {count}</p>;
}Membaca Tindakan
Pilih tindakan dengan cara yang sama. Tindakan tidak berubah, jadi memilihnya tidak menyebabkan rendering ulang tambahan.
function Controls() {
const { increment, decrement } = useCounterStore(
state => ({ increment: state.increment, decrement: state.decrement })
);
return (
<div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}Memperbarui Status dengan set()
Fungsi set() menggabungkan pembaruan secara dangkal (seperti setState pada komponen kelas React). Teruskan fungsi untuk pembaruan yang bergantung pada status sebelumnya.
// Merge:
set({ loading: true });
// Function for dependent updates:
set(state => ({ count: state.count + 1 }));
// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);Tindakan Asinkron
Tindakan di Zustand dapat bersifat asinkron—cukup panggil set() setelah menunggu operasi asinkron tersebut selesai.
export const useUsersStore = create<UsersStore>((set) => ({
users: [],
loading: false,
fetchUsers: async () => {
set({ loading: true });
const users = await fetch('/api/users').then(r => r.json());
set({ users, loading: false });
}
}));Irisan — Menyusun Penyimpanan Besar
Pecah penyimpanan besar menjadi irisan (objek terpisah), lalu gabungkan. Pola Zustand tidak mengharuskan abstraksi irisan, tetapi cara ini rapi untuk mengorganisasikan penyimpanan besar.
Lapisan Perantara: persist
Lapisan perantara persist menyimpan status Zustand ke localStorage dan memulihkannya saat dimuat—dengan penyiapan minimal.
import { persist } from 'zustand/middleware';
export const useSettingsStore = create<Settings>(
persist(
(set) => ({
theme: 'light',
setTheme: (theme) => set({ theme })
}),
{ name: 'app-settings' } // localStorage key
)
);Lapisan Perantara: devtools
Tambahkan dukungan Redux DevTools ke Zustand dengan lapisan perantara devtools. Anda mendapatkan pencatatan setiap tindakan dan perjalanan waktu secara lengkap.
Zustand vs Redux Toolkit
Zustand: minimal, tanpa kode boilerplate, cepat disiapkan, cocok untuk app kecil hingga menengah. RTK: terstruktur, mudah diskalakan, DevTools terbaik di kelasnya, lebih cocok untuk tim besar. Keduanya pilihan yang baik—kesederhanaan Zustand unggul untuk sebagian besar app.
Pemilih dan Performa
Selalu pilih irisan status minimum yang diperlukan komponen. Memilih seluruh objek status menyebabkan rendering ulang pada setiap perubahan penyimpanan. Gunakan shallow dari zustand/shallow untuk pemilihan beberapa properti.
import { shallow } from 'zustand/shallow';
const { theme, font } = useSettingsStore(
state => ({ theme: state.theme, font: state.font }),
shallow // compare each property shallowly
);Pemeriksaan Singkat
Bagaimana cara membuat penyimpanan Zustand yang dapat digunakan oleh seluruh app React?
Ringkasan: Zustand
create() mendefinisikan status dan tindakan. Nilai yang dikembalikan adalah hook. Pilih irisan untuk menghindari rendering ulang yang tidak perlu. set() menggabungkan pembaruan status. Tindakan asinkron memanggil set() setelah await. Lapisan perantara persist digunakan untuk localStorage. devtools digunakan untuk integrasi Redux DevTools. Provider tidak diperlukan.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Zustand untuk State React yang Ringan” gratis?
Ya — teks lengkap “Zustand untuk State React yang Ringan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Zustand untuk State React yang Ringan”?
Buat store Zustand dengan create(), baca state dengan hook, perbarui dengan action, dan nikmati API minimal tanpa kode boilerplate. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 2 dari 4.
Berapa lama pelajaran “Zustand untuk State React yang Ringan” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- Redux Toolkit: createSlice dan configureStore
- Zustand untuk State React yang Ringan
- Pinia untuk Vue: defineStore dan storeToRefs
- Kapan Menggunakan State Global atau Lokal