العودة للمقالات

إدارة الحالة بسهولة: إتقان Zustand في مشاريع React الخاصة بك

Majd Muhtaseb30‏/06‏/20258 دقيقة

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

لماذا Zustand؟

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

البدء

أولاً، قم بتثبيت Zustand:

npm install zustand

إنشاء متجر

قم بإنشاء متجر باستخدام وظيفة create من 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 })),
}));

export default useStore;

يحدد هذا الرمز متجرًا يحتوي على:

• count: متغير الحالة (تم تهيئته إلى 0).
• increment: دالة لزيادة العدد.
• decrement: دالة لتقليل العدد.

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

استخدم الخطاف useStore في مكونات React الخاصة بك للوصول إلى الحالة وتعديلها:

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

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

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

export default Counter;

يشترك هذا المكون في المتجر ويعيد عرضه عندما تتغير قيم count أو increment أو decrement.

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

يسمح لك Zustand بتحديد أجزاء معينة من الحالة لمنع إعادة العرض غير الضرورية:

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

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

  return <p>العد: {count}</p>;
}

export default CountDisplay;

في هذا المثال، سيتم إعادة عرض المكون CountDisplay فقط عندما تتغير قيمة count في المتجر.

خاتمة

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