mobx state tree

Mobx-State-Tree

O que é Mobx-State-Tree?

Tecnicamente falando, o MOBX-State-Tree (também conhecido como MST) é um sistema de contêineres de estado construído no MOBX, uma biblioteca de estado funcional funcional.

Isso pode não significar muito para você, e tudo bem. Vou explicar assim: o MOBX é um "mecanismo" de gerenciamento de estado, e a mobx-state-Tree fornece estrutura e ferramentas comuns necessárias para o seu aplicativo. O MST é valioso em uma equipe grande, mas também é útil em aplicações menores quando você espera que seu código escala rapidamente. E se o compararmos ao Redux, o MST oferece melhor desempenho e muito menos código de caldeira do que o Redux!

O MOBX é uma das alternativas mais populares do Redux e é usado (junto com a MOBX-State-Tree) por empresas em todo o mundo. O MST é reproduzido muito bem com o TypeScript, reaja e reaja nativo, especialmente quando combinado com MOBX-REACT-LITE. Ele suporta várias lojas, ações assíncronas e efeitos colaterais, permite renderizadores extremamente direcionados para aplicativos React e muito mais-tudo em um pacote com zero dependências que não sejam o MOBX.

Nota: Você não precisa saber como usar o MOBX para usar o MST.

Começando

Veja o tutorial de início ou siga o curso gratuito do Egghead.io.

Os documentos oficiais podem ser encontrados em http://mobx-state-tree.js.org/

Exemplo de código rápido

Não há nada como olhar para algum código para ter uma ideia de uma biblioteca. Confira este pequeno exemplo de um autor e lista de tweets desse autor.

 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 

Obrigado!

• Michel Weststrate para criar Mobx, Mobx-State-Tree e Mobx-React.
• Red Infinite para apoiar a manutenção contínua no MST.
• Mendix para patrocinar e oferecer a oportunidade de trabalhar em projetos exploratórios como o MST.
• O trabalho de Dan Abramov no Redux influenciou fortemente a idéia de instantâneos e ações transacionais no MST.
• O trabalho de Giulio Canti no TCOMB e nos sistemas de tipos em geral influenciou fortemente o sistema de tipos de MST.
• Todos os primeiros adotantes encorajadores de buscar toda essa idéia e provar que é algo viável.