Zustand ve Jotai gibi hafif mağazalar Redux'tan nasıl farklıdır?

Question

Accepted Answer

**Zustand** ve **Jotai**, Redux'tan çok daha az boilerplate ile global state'i başaran minimal state kütüphaneleridir ve gereksiz yeniden render'ları önlemek için yerleşik **seçici abonelikler** içerirler. Farklı zihinsel modelleri takip ederler: Zustand tek bir mağaza; Jotai atomiktir. ## Zustand — basit, hook-tabanlı bir mağaza ```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 ; } ``` Provider yok, action yok, reducer yok, dispatch yok — setter fonksiyonlarını doğrudan çağırırsınız. Selector (`s => s.count`), bileşenin *yalnızca* o dilim değiştiğinde yeniden render edileceği anlamına gelir. ## Jotai — atomik state ```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, oluşturduğunuz küçük **atom'lardan** state'i oluşturur; bileşenler bireysel atom'lara abone olur ve yalnızca bu spesifik atom'lar değiştiğinde yeniden render edilir. ## Redux ile karşılaştırma ```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 ``` ## Ne zaman neyi seçmelisiniz ```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 ``` ## Neden önemli Zustand ve Jotai, Redux'un boilerplate'inden **minimal, ergonomik** global state'e doğru modern eğilimi temsil eder; yerleşik **seçici abonelikler** ile (Context'in yeniden render sorununu çözer). Bunların var olduğunu bilmek — ve Zustand küçük bir single-store modeli sunarken Jotai composable atom'lar sunduğunu bilmek — çoğu uygulamanın global-state ihtiyaçlarına uyan hafif bir araç seçmenizi sağlar, gerçekten büyük ve karmaşık uygulamalar için daha ağır Redux Toolkit'i saklı tutar. Context'e karşı paylaşılan temel avantaj, over-rendering'i önleyen granüler aboneliklerdir.