mobx state tree
v7.0.1
من الناحية الفنية ، فإن Mobx-State-Tree (المعروف أيضًا باسم MST) هو نظام حاويات الدولة مبني على MOBX ، وهي مكتبة حالة تفاعلية وظيفية.
هذا قد لا يعني لك الكثير ، وهذا جيد. سأشرح ذلك على هذا النحو: Mobx هو "محرك" لإدارة الدولة ، ويمنحها Mobx-State Tree بنية وأدوات شائعة تحتاجها لتطبيقك. تعتبر MST ذات قيمة في فريق كبير ولكنها مفيدة أيضًا في التطبيقات الأصغر عندما تتوقع أن تتوسع الكود بسرعة. وإذا قمنا بمقارنتها بـ Redux ، فإن MST يوفر أداء أفضل ورمزًا أقل بكثير من Redux!
Mobx هي واحدة من أكثر بدائل Redux شعبية وتستخدم (إلى جانب Mobx-State Tree) من قبل الشركات في جميع أنحاء العالم. تلعب MST جيدًا مع TypeScript و React و React Native ، خاصةً عند الاقتران مع MOBX-React-Lite. وهو يدعم العديد من المتاجر ، وإجراءات ASYNC والآثار الجانبية ، يتيح إعادة الاستهداف للغاية لتطبيقات React ، وأكثر من ذلك بكثير-كل ذلك في حزمة مع تبعيات صفرية غير MOBX نفسها.
ملاحظة: لا تحتاج إلى معرفة كيفية استخدام MOBX من أجل استخدام MST.
شاهد البرنامج التعليمي للبدء أو اتبع دورة egghead.io المجانية.
يمكن العثور على المستندات الرسمية على http://mobx-state-tree.js.org/
لا يوجد شيء مثل النظر إلى بعض التعليمات البرمجية للتعرف على المكتبة. تحقق من هذا المثال الصغير للمؤلف وقائمة التغريدات من قبل هذا المؤلف.
import { types } from "mobx-state-tree" // alternatively: import { t } from "mobx-state-tree"
// Define a couple models
const Author = types . model ( {
id : types . identifier ,
firstName : types . string ,
lastName : types . string
} )
const Tweet = types . model ( {
id : types . identifier ,
author : types . reference ( Author ) , // stores just the `id` reference!
body : types . string ,
timestamp : types . number
} )
// Define a store just like a model
const RootStore = types . model ( {
authors : types . array ( Author ) ,
tweets : types . array ( Tweet )
} )
// Instantiate a couple model instances
const jamon = Author . create ( {
id : "jamon" ,
firstName : "Jamon" ,
lastName : "Holmgren"
} )
const tweet = Tweet . create ( {
id : "1" ,
author : jamon . id , // just the ID needed here
body : "Hello world!" ,
timestamp : Date . now ( )
} )
// Now instantiate the store!
const rootStore = RootStore . create ( {
authors : [ jamon ] ,
tweets : [ tweet ]
} )
// Ready to use in a React component, if that's your target.
import { observer } from "mobx-react-lite"
const MyComponent = observer ( ( props ) => {
return < div > Hello, { rootStore . authors [ 0 ] . firstName } ! </ div >
} )
// Note: since this component is "observed", any changes to rootStore.authors[0].firstName
// will result in a re-render! If you're not using React, you can also "listen" to changes
// using `onSnapshot`: https://mobx-state-tree.js.org/concepts/snapshots 
