كيف تختلف متاجر خفيفة الوزن مثل Zustand و Jotai عن Redux؟

Question

Accepted Answer

**Zustand** و **Jotai** هي مكتبات حالة بسيطة تحقق حالة عامة بكود أقل بكثير من Redux، مع **اشتراكات انتقائية** مدمجة لتجنب إعادة الرسم غير الضرورية. تتخذ نماذج عقلية مختلفة: Zustand متجر واحد؛ Jotai ذريّة. ## Zustand — متجر بسيط قائم على hooks ```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، لا actions، لا reducers، لا dispatch — تستدعي دوال setter مباشرة. المحدد (`s => s.count`) يعني أن المكون يعاد رسمه *فقط* عندما يتغير هذا الجزء. ## Jotai — حالة ذريّة ```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 يبني الحالة من **atoms** صغيرة تركبها؛ المكونات تشترك في atoms فردية وتعاد رسمها فقط عندما تتغير تلك atoms المحددة. ## المقارنة مع 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 ``` ## متى تختار أيهما ```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 ``` ## لماذا يهم هذا Zustand و Jotai يمثلان الاتجاه الحديث بعيداً عن كود Redux الثقيل نحو **حالة عامة بسيطة وسهلة الاستخدام** مع اشتراكات انتقائية مدمجة (حل مشكلة إعادة الرسم في Context). معرفتك أنها موجودة — وأن Zustand توفر نموذج متجر صغير جداً بينما Jotai توفر atoms قابلة للتكوين — يتيح لك اختيار أداة خفيفة الوزن تناسب احتياجات الحالة العامة لمعظم التطبيقات، مع حفظ Redux Toolkit الأثقل للتطبيقات الكبيرة والمعقدة حقاً. الميزة الرئيسية المشتركة على Context هي الاشتراكات الحبيبية التي تمنع الإفراط في الرسم.