Bagaimanakah penyimpanan ringan seperti Zustand dan Jotai berbeza daripada Redux?

Question

Accepted Answer

**Zustand** dan **Jotai** adalah pustaka keadaan minimal yang mencapai keadaan global dengan jauh lebih sedikit boilerplate daripada Redux, dan dengan **langganan selektif** bawaan untuk menghindari re-renders yang tidak perlu. Mereka mengambil model mental yang berbeza: Zustand adalah satu penyimpanan; Jotai adalah atom. ## Zustand — penyimpanan sederhana berbasis hook ```jsx import { create } from "zustand"; // define a store: state + the actions that update it, all in one place const useStore = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })), // no actions/reducers/dispatch reset: () => set({ count: 0 }), })); function Counter() { const count = useStore((s) => s.count); // SELECT — re-renders only when count changes const increment = useStore((s) => s.increment); return ; } ``` Tiada penyedia, tiada tindakan, tiada pengurangan, tiada penghantaran — anda memanggil fungsi setter secara langsung. Pemilih (`s => s.count`) bermaksud komponen re-render *hanya* apabila kepingan itu berubah. ## Jotai — keadaan atom ```jsx import { atom, useAtom } from "jotai"; const countAtom = atom(0); // a tiny piece of state const doubleAtom = atom((get) => get(countAtom) * 2); // derived atom function Counter() { const [count, setCount] = useAtom(countAtom); // works like useState, but GLOBAL return ; } ``` Jotai membina keadaan daripada **atom** kecil yang anda gubah; komponen melanggan atom individu dan hanya re-render apabila atom-atom tertentu itu berubah. ## Perbandingan dengan Redux ```text Redux (classic) Zustand Jotai Boilerplate high (actions/reducers) very low very low Provider required none minimal Mental model single store + dispatch single store, hooks atomic (useState-like) Re-renders needs selectors selector built-in per-atom (granular) Devtools excellent good good Bundle size larger tiny (~1KB) tiny ``` ## Bila memilih apa ```text Zustand → simple global state, minimal ceremony (most apps' global needs) Jotai → bottom-up/granular state, lots of independent pieces, derived values Redux(RTK) → very large apps, strict structure, rich devtools/middleware ecosystem ``` ## Mengapa Ia Penting Zustand dan Jotai mewakili aliran moden menjauhi boilerplate Redux menuju keadaan global yang **minimal, ergonomik** dengan langganan selektif bawaan (menyelesaikan masalah re-render Context). Mengetahui ia wujud — dan bahawa Zustand menawarkan model penyimpanan tunggal kecil manakala Jotai menawarkan atom yang dapat digubah — membolehkan anda memilih alat ringan yang sesuai dengan keperluan keadaan global kebanyakan aplikasi, menyimpan Redux Toolkit yang lebih berat untuk aplikasi yang benar-benar besar dan kompleks. Keuntungan bersama utama berbanding Context ialah langganan berbutir yang mencegah over-rendering.