في هذه المقالة، سنستكشف كيف تمكن Zustand من استبدال الحالة باستخدام وظيفة setState، مع التركيز على ميزة مثيرة للاهتمام: تجاوز الحالة دون الدمج. سنشرح كيفية استخدامه من خلال حالة اختبار بسيطة.

فهم دمج الحالة مقابل تجاوز الحالة

قبل النظر إلى الكود، من المهم فهم الفرق بين حالة الدمج وحالة تجاوز.

• حالة الدمج: افتراضيًا، عندما تقوم بتحديث الحالة في Zustand (أو React)، فإنها تدمج الحالة الجديدة مع الحالة الحالية. يتم تغيير الحقول المحدثة فقط، بينما تظل بقية الحالة سليمة.

• الحالة المتجاوزة: في المقابل، يؤدي تجاوز الحالة إلى استبدال الحالة بأكملها بكائن جديد، مع تجاهل أي حقول كانت موجودة في الحالة السابقة ولكنها ليست جزءًا الدولة الجديدة.

متى يتم تجاوز الحالة

هناك حالات يكون من الضروري فيها استبدال الحالة بأكملها، على سبيل المثال:

• إعادة ضبط الحالة بعد إرسال النموذج.

• استبدال الحالة بالكامل عند تحميل مجموعة بيانات مختلفة.

حالة اختبار لتجاوز حالة Zustand

إليك حالة اختبار بسيطة من قاعدة بيانات Zustand والتي توضح كيفية تجاوز الحالة باستخدام وظيفة setState:

it('can set the store without merging', () => {
  const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

  // Should override the state instead of merging.
  setState({ b: 2 }, true)
  expect(getState()).toEqual({ b: 2 })
})

كسر الاختبار

1. إنشاء المتجر أولاً، يتم إنشاء متجر Zustand بالحالة الأولية:

const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

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

• setState: تستخدم هذه الطريقة لتحديث حالة المتجر.

• getState: تسترد هذه الطريقة الحالة الحالية للمتجر.

2. تجاوز الحالة العملية الرئيسية هنا هي استبدال الحالة الحالية، { a: 1 }، بحالة جديدة تمامًا:

setState({ b: 2 }, true)

• بتمرير العلامة الحقيقية كوسيطة ثانية، يعرف Zustand أنه يجب تجاوز الحالة، بدلاً من دمج الكائن الجديد { b: 2 } مع الكائن الموجود. يؤدي هذا إلى استبدال الحالة السابقة تمامًا، لذا تتم إزالة { a: 1 }، وتصبح الحالة الجديدة { b: 2 }.

3. التحقق من صحة استبدال الحالة أخيرًا، يضمن الاختبار أن الحالة قد تم استبدالها بالكامل:

expect(getState()).toEqual({ b: 2 })

التوقع هو أنه بعد استدعاء setState({ b: 2 }, true)، ستحتوي حالة المتجر فقط على { b: 2 } ولن تحتوي بعد الآن على { a: 1 }.

كيف يتجاوز Zustand الحالة

الصورة أدناه مأخوذة من كود مصدر Zustand الذي يحدد الحالة.

كما ترون، في حالة وجود علامة الاستبدال، تصبح الحالة التالية هي الحالة الجديدة.

(replace ?? (typeof nextState !== 'object' || nextState === null))

هذه طريقة ذكية، إذا كان الاستبدال خطأ، وهو افتراضيًا، (typeof nextState !== 'object' || nextState === null)) محدد.

خاتمة

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

معلومات عنا:

في Think Throo، نحن في مهمة لتعليم المفاهيم المعمارية لقاعدة التعليمات البرمجية المتقدمة المستخدمة في المشاريع مفتوحة المصدر.

ضاعف مهاراتك في البرمجة من خلال ممارسة المفاهيم المعمارية المتقدمة في Next.js/React، وتعلم أفضل الممارسات وبناء مشاريع على مستوى الإنتاج.

نحن مفتوح المصدر - https://github.com/thinkthroo/thinkthroo (لا تعطينا نجمة!)

قم بتعزيز مهارات فريقك من خلال دوراتنا المتقدمة المبنية على بنية قاعدة التعليمات البرمجية. تواصل معنا على [email protected] لمعرفة المزيد!

مراجع:

1. https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L471C13-L471C50

2. https://github.com/pmndrs/zustand/tree/v4.5.5?tab=readme-ov-file#overwriting-state