إدارة حالة React: من مبتدئ إلى بطل Zustand

Majd Muhtaseb27‏/08‏/20257 دقيقة

إدارة حالة React: من مبتدئ إلى بطل Zustand

مقدمة إلى Zustand

يمكن أن تكون إدارة حالة React معقدة. قد تكون مكتبات مثل Redux مفرطة بالنسبة للمشاريع الصغيرة. يوفر Zustand حلاً بسيطًا وغير متحيز لإدارة حالة تطبيقك. إنه صغير وسريع وسهل التعلم.

لماذا Zustand؟

البساطة: الحد الأدنى من التعليمات البرمجية القياسية.
الأداء: عمليات إعادة عرض محسنة.
قابلية التوسع: يعمل بشكل جيد لكل من المشاريع الصغيرة والكبيرة.
سهولة الاستخدام: واجهة برمجة تطبيقات مباشرة.

البدء

قم بتثبيت Zustand باستخدام npm أو yarn:

npm install zustand
# أو
yarn add zustand

إنشاء مخزن

المخزن في Zustand هو دالة تُرجع كائنًا يحتوي على حالتك وإجراءاتك.

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

export default useStore;

استخدام المخزن في مكون

يمكنك الوصول إلى الحالة والإجراءات من متجرك داخل مكونات React الخاصة بك باستخدام خطاف useStore.

import React from 'react';
import useStore from './store';

function Counter() {
  const { count, increment, decrement, reset } = useStore();

  return (
    <div>
      <h1>العداد: {count}</h1>
      <button onClick={increment}>زيادة</button>
      <button onClick={decrement}>إنقاص</button>
      <button onClick={reset}>إعادة تعيين</button>
    </div>
  );
}

export default Counter;

تحديثات انتقائية

يوفر Zustand طريقة لتحديث المكونات بشكل انتقائي فقط عندما تتغير الحالة المحددة التي تعتمد عليها. هذا يحسن الأداء.

import React from 'react';
import useStore from './store';

function CountDisplay() {
  const count = useStore(state => state.count); // تحديد قيمة العد فقط

  return (
    <h1>العداد: {count}</h1>
  );
}

export default CountDisplay;

استمرار الحالة

لا يوفر Zustand استمرارًا افتراضيًا، ولكن يمكنك بسهولة دمج الاستمرار باستخدام البرامج الوسيطة. فيما يلي مثال باستخدام zustand/middleware:

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

const useStore = create(persist(
  (set, get) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }),
  {
    name: 'my-app-storage', // اسم فريد
    getStorage: () => localStorage, // (اختياري) بشكل افتراضي يتم استخدام 'localStorage'
  }
));

export default useStore;

خاتمة

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