mobx state tree

Mobx-State-Tree

Что такое Mobx-State-Tree?

Технически говоря, Mobx-State-Tree (также известная как MST)-это контейнерная система состояния, построенная на MOBX, функциональной библиотеке реактивного состояния.

Это может не значит для вас много значения, и это нормально. Я объясню это так: MOBX-это государственный управление «двигателем», а Mobx-State Driee дает ему структуру и общие инструменты, необходимые вам для вашего приложения. MST ценен в большой команде, но также полезен в небольших приложениях, когда вы ожидаете быстрого масштабирования вашего кода. И если мы сравним его с Redux, MST предлагает лучшую производительность и гораздо меньше кода шаблона, чем Redux!

Mobx является одной из самых популярных альтернатив Redux и используется (наряду с Mobx-State Tree) компаниями по всему миру. MST очень хорошо играет с TypeScript, React и React Native, особенно в сочетании с Mobx-React-Lite. Он поддерживает несколько магазинов, асинхронные действия и побочные эффекты, позволяет чрезвычайно целенаправленным повторным рендерингам для приложений 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 

Спасибо!

• Мишель Уэстстрат за создание MOBX, MOBX-State-Tree и Mobx-React.
• Бесконечный красный для поддержки постоянного технического обслуживания на MST.
• Mendix для спонсирования и предоставления возможности работать над исследовательскими проектами, такими как MST.
• Работа Дэна Абрамова над Redux сильно повлияла на идею снимков и транзакционных действий в MST.
• Работа Джулио Канти над системами TCOMB и типа в целом сильно повлияла на типовую систему MST.
• Все ранние последователи, поощряющие преследовать всю эту идею, и доказать, что это что -то осуществимое.