ليه Zustand ومش Redux؟

Zustand لمتجر حالة الواجهة: السلة، الخطوة الحالية في فورم، درج مفتوح. دي مش الداتا الجاية من الـ API. دي شغل TanStack Query. هنا اللي عايش في الجلسة وبين المكوّنات.

من غيرها بترفع الحالة للأب وتمرّرها لتحت، أو تحط Context لكل حاجة. الاتنين بيتقلوا لما الشجرة تكبر.

أول متجر

راجع أمر التثبيت في الدوكس. المسارات تحت دي شائعة في الإصدار الخامس.

npm install zustand

import { create } from "zustand";const useCart = create((set) => ({  items: [],  add: (item) => set((state) => ({ items: [...state.items, item] })),}));function CartCount() {  const count = useCart((state) => state.items.length);  const add = useCart((state) => state.add);  return <button onClick={() => add({ id: 1, name: "كشكول" })}>السلة: {count}</button>;}

create يرجّع هوك. السليكتور يختار حتة من الحالة، فالمكوّن يعيد الرسم لما الحتة دي تتغير بس. مفيش Provider حوالين التطبيق. المتجر كائن واحد في الموديول، وأي مكوّن يستورده.

متندهش set أو get وأنت لسه بتعرّف المتجر. الاتنين آمنين جوه الأكشن، بعد ما المتجر يخلص إنشاء.

الفرق عن Redux

الاتنين موديل ثابت: متعدّلش الكائن القديم، اعمل نسخة جديدة. والرسم في الاتنين بيتظبط بسليكتور، مش لوحده.

لو عايز نفس شكل Redux جوه Zustand، في وسيط اسمه redux بيركّب dispatch. مش مطلوب عشان تبدأ.

Valtio يعدّل الكائن نفسه عن طريق proxy، والرسم يتبع الخاصية اللي اتقرأت. Jotai و Recoil ذرات صغيرة تتركب، مش متجر واحد. Recoil كمان محتاج غلاف، والمفتاح عنده نص.

خلّصت الفصل لما

• تفرق حالة الواجهة عن كاش الـ API
• تعمل create وتقرا بسليكتور
• تعرف إن مفيش Provider افتراضي
• تسمّي فرق الغلاف والأكشن عن Redux