Zustand هي مكتبة صغيرة وسريعة وقابلة للتطوير لإدارة الحالة لـ React، والتي تعمل كبديل للحلول الأكثر تعقيدًا مثل Redux. السبب الرئيسي الذي جعل Zustand يكتسب الكثير من الاهتمام هو صغر حجمه وتركيبه البسيط مقارنة بـ Redux.

فهم إعداد Zustand

أولاً، تحتاج إلى تثبيت Zustand وTypeScript إذا لم تقم بذلك بالفعل.

npm install zustand
'or'
yarn add zustand

يوفر Zustand وظيفة إنشاء لتحديد متجرك. دعونا نستعرض مثالًا أساسيًا حيث نقوم بتخزين قيمة العد ومعالجتها.

لنقم بإنشاء ملف يسمى store.ts حيث لدينا ربط مخصص useCounterStore():

import { create } from "zustand"

type CounterStore = {
    count: number
    increment: () => void
    resetCount: () => void
}

export const useCounterStore = create((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count   1 })),
    resetCount: () => set({ count: 0 })
}))

في هذا المثال:

• الكون جزء من الدولة.

• increaseCount وResetCount هي إجراءات تعمل على تعديل الحالة.

• set هي وظيفة توفرها Zustand لتحديث المتجر.

استخدام المتجر في مكون React

import React from 'react'
import { useCounterStore } from './store'

const Counter: React.FC = () => {
  const count = useCounterStore((state) => state.count) // Get count from the store
  const increment = useCounterStore((state) => state.increment) // Get the action

  return (
    

      
{count}
      Increase Count
    
  )
}

export default Counter;

هنا، العداد هو مكون React. كما ترون، يتم استخدام useCounterState() للوصول إلى العدد والزيادة.

يمكنك تدمير الحالة بدلاً من الحصول عليها مباشرة كما هو الحال فيما يلي:

const {count, increment} = useCounterStore((state) => state)

لكن هذا النهج يجعله أقل أداءً. لذا، فإن أفضل الممارسات هي الوصول إلى الحالة مباشرةً كما هو موضح من قبل.

الإجراءات غير المتزامنة

يعد إجراء إجراء غير متزامن أو استدعاء طلب واجهة برمجة التطبيقات (API) إلى الخادم أمرًا بسيطًا أيضًا في Zustand. هنا، الكود التالي يشرح كل شيء:

export const useCounterStore = create((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count   1 })),
    incrementAsync: async () => {
        await new Promise((resolve) => setTimeout(resolve, 1000))
        set((state) => ({ count: state.count   1 }))
    },
    resetCount: () => set({ count: 0 })
}))

ألا تبدو كوظيفة غير متزامنة عامة في JavaScript؟ أولاً، يقوم بتشغيل التعليمات البرمجية غير المتزامنة ثم يقوم بتعيين الحالة بالقيمة المحددة.

الآن، دعونا نرى كيف يمكنك استخدامه على مكون رد فعل:

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)

  return (
    

      {count}
      

        Increment
      
    
  )
}

كيفية الوصول إلى الحالة خارج مكون React

حتى الآن، لم تتمكن من الوصول إلا إلى الحالة داخل مكونات React. ولكن ماذا عن الوصول إلى الحالة من خارج مكونات React؟ نعم، مع Zustand يمكنك الوصول إلى الحالة من خارج مكونات React.

const getCount = () => {
  const count = useCounterStore.getState().count
  console.log("count", count)
}

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)
  const decrement = useCounterStore((state) => state.decrement)

  useEffect(() => {
    getCount()
  }, [])

  return (
    

      {count}
      

        Increment
        Decrement
      
    
  )
}

هنا، يمكنك رؤية أن getCount() يصل إلى الحالة عن طريق getState()

يمكننا ضبط العدد أيضًا:

const setCount = () => {
  useCounterStore.setState({ count: 10 })
}

استمرار الوسيطة

يتم استخدام البرنامج الوسيط المستمر في Zustand للاستمرار وإعادة ترطيب الحالة عبر جلسات المتصفح، عادةً باستخدام localStorage أو sessionStorage. تتيح لك هذه الميزة الاحتفاظ بالحالة حتى بعد إعادة تحميل الصفحة أو عندما يقوم المستخدم بإغلاق المتصفح وإعادة فتحه. فيما يلي عرض تفصيلي لكيفية عمله وكيفية استخدامه.

الاستخدام الأساسي للاستمرار

إليك كيفية إعداد متجر Zustand مع الاستمرار:

import create from 'zustand';
import { persist } from 'zustand/middleware';

// Define the state and actions
interface BearState {
  bears: number;
  increase: () => void;
  reset: () => void;
}

// Create a store with persist middleware
export const useStore = create(
  persist(
    (set) => ({
      bears: 0,
      increase: () => set((state) => ({ bears: state.bears   1 })),
      reset: () => set({ bears: 0 }),
    }),
    {
      name: 'bear-storage', // Name of the key in localStorage
    }
  )
);

يتم حفظ الحالة تحت مفتاح "التخزين" في localStorage. الآن، حتى إذا قمت بتحديث الصفحة، فسيستمر عدد الدببة عبر عمليات إعادة التحميل.

افتراضيًا، يستخدم استمرار التخزين المحلي، ولكن يمكنك تغييره إلى sessionStorage أو أي نظام تخزين آخر. هناك أشياء كثيرة يجب تغطيتها حول موضوع استمرار الحالة في Zustand. سوف تحصل على برنامج تعليمي/منشور مفصل حول هذا الموضوع، والذي سيتبع هذا المنشور.

خاتمة

نعلم جميعًا مدى روعة Redux كأداة لإدارة الحالة. لكن Redux تمتلك نموذجًا معقدًا وكبيرًا نوعًا ما. ولهذا السبب يختار المزيد والمزيد من المطورين Zustand كأداة لإدارة الحالة الخاصة بهم، وهي أداة بسيطة وقابلة للتوسع.

ولكن لا يزال بإمكانك رؤية Redux موصى به أكثر لإدارة الحالة المعقدة والمتداخلة.