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

ارفع مستوى تطبيق React الخاص بك مع Zustand: دليل إدارة الحالة الحديث

Majd Muhtaseb21‏/09‏/20257 دقيقة

مقدمة إلى Zustand

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

يعتمد Zustand على مبادئ التدفق المبسطة. يستخدم الخطافات للوصول إلى الحالة وتعديلها، مما يجعل من السهل دمجها في مكونات React الخاصة بك.

الفوائد الرئيسية لـ Zustand

• البساطة: واجهة برمجة تطبيقات بسيطة وسهلة التعلم.
• الأداء: مُحسَّن للتحديثات السريعة وإعادة العرض.
• تعليمات برمجية أقل: يقلل بشكل كبير من كمية التعليمات البرمجية المطلوبة مقارنة بـ Redux.
• قابلية التوسع: مناسب لكل من التطبيقات الصغيرة والكبيرة.
• صديق لـ TypeScript: يوفر دعمًا ممتازًا لـ TypeScript.

البدء مع Zustand

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

npm install zustand
# أو
yarn add zustand

إنشاء متجر

متجر Zustand هو خطاف تحدده باستخدام وظيفة create. يقوم بتغليف حالة التطبيق الخاص بك ويوفر طرقًا لتحديثه.

import { create } from 'zustand';

const useBearStore = create((set) => ({
  bears: 0,
  increaseBears: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

export default useBearStore;

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

• useBearStore هو خطاف مخصص يسمح لك بالوصول إلى الحالة وتعديلها.
• bears هي قيمة الحالة الأولية.
• increaseBears هي دالة لزيادة عدد bears.
• removeAllBears هي دالة لإعادة تعيين عدد bears إلى الصفر.
• يتم توفير وظيفة set بواسطة Zustand وتسمح لك بتحديث الحالة.

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

الآن، يمكنك استخدام خطاف useBearStore في مكونات React الخاصة بك للوصول إلى الحالة وتحديثها:

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

function MyComponent() {
  const bears = useBearStore((state) => state.bears);
  const increaseBears = useBearStore((state) => state.increaseBears);

  return (
    <div>
      <h1>عدد الدببة: {bears}</h1>
      <button onClick={increaseBears}>أضف دبًا</button>
    </div>
  );
}

export default MyComponent;

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

• نستورد خطاف useBearStore.
• نستخدم الخطاف للوصول إلى حالة bears ووظيفة increaseBears.
• نعرض قيمة bears ونرفق وظيفة increaseBears بحدث onClick للزر.

تحديث الحالة بشكل ثابت

من الممارسات الجيدة عمومًا تحديث الحالة بشكل ثابت، خاصةً عند التعامل مع الكائنات أو المصفوفات المعقدة. Zustand يجعل من السهل القيام بذلك:

import { create } from 'zustand';

const useStore = create((set) => ({
  items: [{ id: 1, name: 'Apple' }],
  addItem: (newItem) =>
    set((state) => ({ items: [...state.items, newItem] })),
}));

export default useStore;

خاتمة

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