MobX هي مكتبة قوية تجعل إدارة الحالة بسيطة وقابلة للتوسع بتطبيق البرمجة التفاعلية الوظيفية الشفافة (TFRP).
تعريف الحالة والإجراءات (MobX 6+ الحديثة)
import { makeAutoObservable, observable, action, computed } from 'mobx';
class CartStore {
items = [];
constructor() {
makeAutoObservable(this);
}
get totalCount() {
return this.items.reduce((sum, item) => sum + item.quantity, 0);
}
addItem(product) {
this.items.push(product);
}
removeItem(productId) {
this.items = this.items.filter((item) => item.id !== productId);
}
}
export const cartStore = new CartStore();
التفاعلات الجانبية (Reactions)
قم بتغليف المكونات بالدالة observer لإعادة تصييرها تلقائيا فور تغير البيانات المراقبة:
autorun()
تعمل فورا، وتسجل القيم المراقبة التي تم الوصول إليها، وتُعاد صياغتها تلقائيا بمجرد تغير أي منها:
import { autorun } from 'mobx';
const disposer = autorun(() => {
console.log(`Cart total count: ${cartStore.totalCount}`);
});
// إيقاف المراقبة وإلغاء الاشتراك
disposer();
reaction()
تفاعل دقيق يفصل بوضوح بين تتبع البيانات وتنفيذ المهام الجانبية:
import { reaction } from 'mobx';
reaction(
() => cartStore.items.length,
(length, prevLength) => {
console.log(`Cart item count changed from ${prevLength} to ${length}`);
}
);
when()
تنفذ مهمة جانبية لمرة واحدة فقط عندما يتحقق شرط منطقي معين (true):
import { when } from 'mobx';
when(
() => cartStore.totalCount > 10,
() => console.log('Eligible for bulk discount!')
);
التكامل مع React عبر mobx-react-lite
قم بتغليف المكونات بالدالة observer لإعادة تصييرها تلقائيا فور تغير البيانات المراقبة:
import React from 'react';
import { observer } from 'mobx-react-lite';
import { cartStore } from './CartStore';
export const CartSummary = observer(() => {
return (
<div>
<h2>Total Items: {cartStore.totalCount}</h2>
<button onClick={() => cartStore.addItem({ id: 1, quantity: 1 })}>
Add Item
</button>
</div>
);
});