0Pricing
TypeScript Academy · Pelajaran

Pola Penentuan Tipe Store Zustand

Definisikan store Zustand bertipe dengan antarmuka dan aksi.

Pola Penentuan Tipe Store Zustand adalah pelajaran TypeScript 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 TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Mengapa Memberi Tipe pada Zustand

Zustand adalah pustaka minimal untuk mengelola state. Dengan integrasi TypeScript yang tepat, Anda mendapatkan pembacaan store, aksi, dan pemilih yang aman secara tipe tanpa kode tambahan yang berlebihan.

import { create } from "zustand";

Store Bertipe Dasar

Definisikan antarmuka store, lalu teruskan sebagai parameter generik ke create.

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounter = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

Membaca State Store

Gunakan kait dengan pemilih untuk membaca bagian state tertentu. TypeScript menyimpulkan tipe hasil dari pemilih tersebut.

function Counter() {
  const count = useCounter((s) => s.count);       // number
  const increment = useCounter((s) => s.increment); // () => void
  return <button onClick={increment}>{count}</button>;
}

Memisahkan State dan Aksi

Pola umum memisahkan properti state dari metode aksi dalam antarmuka agar pengorganisasiannya lebih jelas.

interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;

Aksi Asinkron dalam Zustand

Zustand mendukung aksi asinkron secara bawaan—cukup jadikan fungsi aksi asinkron di dalam pembuatnya.

interface UserStore {
  users: User[];
  fetchUsers: () => Promise<void>;
}

const useUserStore = create<UserStore>((set) => ({
  users: [],
  fetchUsers: async () => {
    const data = await api.getUsers();
    set({ users: data });
  },
}));

Pemberian Tipe pada Perangkat Tengah immer

Gunakan perangkat tengah immer milik Zustand untuk pembaruan bergaya mutabel. Tipe store akan diteruskan dengan benar.

import { immer } from "zustand/middleware/immer";

const useStore = create<CounterStore>()(
  immer((set) => ({
    count: 0,
    increment: () => set((state) => { state.count++; }),
  }))
);

Perangkat Tengah devtools

Gabungkan devtools dengan pemberian tipe yang tepat untuk mengaktifkan dukungan Redux DevTools sekaligus mempertahankan tipe.

import { devtools } from "zustand/middleware";

const useStore = create<CounterStore>()(
  devtools(
    (set) => ({ count: 0, increment: () => set({ count: 1 }) }),
    { name: "CounterStore" }
  )
);

Pemberian Tipe pada Store Persisten

Perangkat tengah persist membuat serialisasi state ke localStorage. Beri tipe dengan benar menggunakan antarmuka state parsial.

import { persist } from "zustand/middleware";

const useStore = create<CounterStore>()(
  persist(
    (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
    { name: "counter-storage" }
  )
);

Pola Irisan Bertipe

Untuk store berukuran besar, pisahkan menjadi irisan bertipe yang digabungkan dalam satu pemanggilan create.

type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;

Berlangganan di Luar React

Akses state store dan berlangganan pada perubahan di luar komponen React menggunakan API store bertipe.

// Access current state outside React
const count = useCounter.getState().count;

// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));

Ringkasan: Pemberian Tipe pada Zustand

Pemberian tipe pada Zustand: definisikan antarmuka store, teruskan ke create, gunakan pemilih untuk pembacaan state bertipe, lalu susun perangkat tengah (immer, devtools, persist) melalui pola fungsi berantai agar aliran tipe tetap benar.

Pemeriksaan Singkat

Bagaimana cara membaca bagian tertentu dari state Zustand dalam komponen tanpa melakukan render ulang saat terjadi perubahan yang tidak terkait?

Yang Anda Pelajari

Store Zustand diberi tipe dengan meneruskan generik antarmuka ke create. Gunakan fungsi pemilih untuk pembacaan state yang efisien dan aman secara tipe. Gabungkan perangkat tengah seperti immer, devtools, dan persist melalui pola fungsi berantai Zustand agar inferensi TypeScript tetap benar.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pola Penentuan Tipe Store Zustand” gratis?

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

Apa yang akan aku pelajari di “Pola Penentuan Tipe Store Zustand”?

Definisikan store Zustand bertipe dengan antarmuka dan aksi. Kamu berlatih TypeScript 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 TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript 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 “Pola Penentuan Tipe Store Zustand” 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 TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript 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

  1. Menentukan Tipe Slice dan Thunk Redux Toolkit
  2. Pola Penentuan Tipe Store Zustand
  3. XState: Mesin Status Bertipe
  4. Status Turunan dan Selector dengan Tipe
← Kembali ke TypeScript Academy