في هذه المقالة، سوف نفهم كيفية استخدام Object.sign() في الكود المصدري لـ Zustand.

مقتطف الكود أعلاه مأخوذ من Vanilla.ts، عندما تقوم بتعيين حالة، يتم استخدام Object.assisting لتحديث كائن الحالة الخاص بك.

دعونا أولاً نفهم أساسيات Object.sign:

كائن.تعيين ()

تقوم الطريقة الثابتة Object.assis() بنسخ جميع الخصائص الخاصة القابلة للإحصاء من واحد أو أكثر من كائنات المصدر إلى كائن هدف. تقوم بإرجاع الكائن الهدف المعدل.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

يتم استبدال قيمة b في الكائن الهدف بقيمة b في الكائن المصدر.

حقا بسيط أليس كذلك؟ فلنجري الآن بعض التجارب ونفهم كيف تستفيد مجموعة Zustand من طريقة Object.assis().

Object.assis() في كود مصدر Zustand:

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76
state = (replace != null ? 
              replace : 
              typeof nextState !== "object" || 
              nextState === null) ? 
                nextState : 
                Object.assign({}, state, nextState);

هذا عامل تشغيل ثلاثي متداخل هناك في مقتطف الكود أعلاه. إذا لم يكن الاستبدال خاليًا، فسيتم استبدال الحالة أو إذا لم تكن الحالة التالية كائنًا، فما عليك سوى إرجاع الحالة التالية كما هي ولكن ما يهمنا هو Object.assi({}, State, newState).

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

في هذا المثال البسيط، عندما يزداد العدد، يتعلق الأمر بتحديث كائن الحالة باستخدام Object.sign.

في المرة القادمة، إذا كنت تحاول إجراء بعض التحديثات على كائن JSON الخاص بك، فاستخدم Object.sign.

معلومات عنا:

في Think Throo، نحن في مهمة لتعليم أفضل الممارسات المستوحاة من المشاريع مفتوحة المصدر.

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

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

هل تتطلع إلى إنشاء أنظمة ويب مخصصة لشركتك؟ اتصل بنا على [email protected]

نبذة عن المؤلف:

مرحبًا، أنا رام. أنا مهندس برمجيات متحمس/OSS Tinkerer.

تحقق من موقع الويب الخاص بي: https://www.ramunarasinga.com/

مراجع:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assis