MOBX: حل إدارة حالة بسيط وقابل للتطوير لـ React

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

في هذا الدليل ، سوف نسير عبر المفاهيم الرئيسية لـ MOBX ، وكيفية إعداده مع React ، وكيفية استخدامه بشكل فعال لإدارة الحالة في تطبيقات React الخاصة بك.

1. ما هو mobx؟

MOBX هي مكتبة لإدارة الدولة التي تستفيد برمجة التفاعل لإدارة حالة التطبيق الخاص بك. يقوم تلقائيًا بتتبع أجزاء واجهة المستخدم وتحديثها تلقائيًا والتي تعتمد على الحالة ، مما يجعلها طريقة فعالة للغاية وبديهية لإدارة بيانات التطبيق.

ميزات مفتاح Mobx:

• تتبع التبعية التلقائية : يتتبع MOBX تلقائيًا أي أجزاء من تطبيقك تعتمد على أجزاء الحالة.
• بسيطة وبديهية : مع Mobx ، لا تحتاج إلى إرسال الإجراءات يدويًا أو تحديث الحالة. يتفاعل Mobx لتغيير الحالة تلقائيًا.
• التصريح : يستخدم Mobx نهجًا يمكن ملاحظته ، حيث تحدد حالتك على أنها يمكن ملاحظتها ، ومكوناتك تلقائيًا عند تغيير الحالة.
• تم تحسينه للأداء : يقوم Mobx بتحديث المكونات التي تعتمد فقط على الحالة المتغيرة ، مما يؤدي إلى أداء محسن للغاية.

2. المفاهيم الأساسية لـ MOBX

Mobx مبني على بعض المفاهيم الأساسية التي تعمل معًا لإدارة الحالة:

1. حالة يمكن ملاحظتها

حالة يمكن ملاحظتها هي جوهر Mobx. عندما يتم تمييز كائن على أنه يمكن ملاحظته ، يتتبع Mobx حالة هذا الكائن ويقوم بتحديث المكونات تلقائيًا التي تعتمد عليه.

مثال:

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

• الديكور الذي يمكن ملاحظته يجعل الكائن المضاد تفاعليًا. كلما تغيرت القيمة ، فإن أي مكون رد فعل يستخدم هذه الحالة سيعيد إعادة تقديمه تلقائيًا.

2. الإجراءات

الإجراءات في MOBX هي وظائف تعدل الحالة. حسب الاتفاقية ، يجب استخدام الإجراءات لتحديث الحالة التي يمكن ملاحظتها ، حيث يضمن Mobx تحديث الحالة بطريقة يمكن التحكم فيها ويمكن التنبؤ بها.

مثال:

import { action } from 'mobx';

const counter = observable({
  value: 0,
  increment: action(function () {
    this.value  ;
  }),
  decrement: action(function () {
    this.value--;
  }),
});

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

3. القيم المحسوبة

يتم اشتقاق القيم المحسوبة من حالة يمكن ملاحظتها. عندما تتغير الحالة التي يمكن ملاحظتها ، تتم إعادة حساب القيم المحسوبة تلقائيًا ، مما يضمن أن حالة التطبيق تظل متسقة.

مثال:

import { computed } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
  get doubleValue() {
    return this.value * 2;
  },
});

• القيمة المزدوجة هي قيمة محسوبة مشتقة من القيمة التي يمكن ملاحظتها. كلما تغيرت القيمة ، سيتم إعادة حساب القيمة المزدوجة.

4. ردود الفعل

ردود الفعل هي آثار جانبية تعمل كلما تغيرت قيمة يمكن ملاحظتها. ردود الفعل مفيدة لإثارة الإجراءات بناءً على تغييرات الحالة.

مثال:

import { autorun } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

autorun(() => {
  console.log(`Counter value is: ${counter.value}`);
});

• وظيفة Autorun هي رد فعل يتم تشغيله تلقائيًا كلما تغيرت القيمة. يقوم بتسجيل قيمة العداد المحدثة إلى وحدة التحكم.

3. دمج MOBX مع React

يدمج Mobx بسلاسة مع React لإدارة حالة التطبيق. في React ، يعمل Mobx باستخدام مكون المراقب عالي الترتيب لتتبع تغييرات الحالة وتحديث واجهة المستخدم تلقائيًا عند الضرورة.

الخطوة 1: تثبيت Mobx و React-Mobx

npm install mobx mobx-react

الخطوة 2: إنشاء متجر يمكن ملاحظته

مثال:

npm install mobx mobx-react

تحدد الفئة المقابلة للحالة (القيمة) التي يمكن ملاحظتها (الزيادة والانخفاض).

الخطوة 3: اجعل مكونات React Observer

مثال:

npm install mobx mobx-react

npm install mobx mobx-react