إدارة الحالة بسهولة: إتقان Zustand في مشاريع React الخاصة بك
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 التالي لتبسيط إدارة الحالة وتحسين تجربة التطوير الخاصة بك.