mobx state treeダウンロードmobx state treeソースコードダウンロード

mobx state tree

その他のソースコード

v7.0.1

ダウンロード

mobx-state-tree

Mobx-State-Treeとは何ですか？

技術的に言えば、MOBX-STATE-Tree（MSTとも呼ばれます）は、機能的なリアクティブ状態ライブラリであるMOBX上に構築された状態コンテナシステムです。

これはあなたにとってそれほど意味がないかもしれません、そしてそれは大丈夫です。このように説明します。Mobxは州の管理「エンジン」であり、Mobx-State-Treeは、アプリに必要な構造と一般的なツールを提供します。 MSTは大規模なチームでは価値がありますが、コードが迅速にスケーリングすると予想される場合、小規模なアプリケーションでも役立ちます。また、Reduxと比較すると、MSTはReduxよりも優れたパフォーマンスとはるかに少ないボイラープレートコードを提供します！

MOBXは、最も人気のあるReduxの代替品の1つであり、世界中の企業が（Mobx-State-Treeとともに）使用しています。 MSTは、特にMobx-React-Liteとペアになった場合、TypeScript、React、およびReact Nativeで非常によく再生されます。複数のストア、非同期アクション、および副作用をサポートし、Reactアプリの非常にターゲットを絞った再レンダーなどを可能にします。

注：MSTを使用するためにMOBXを使用する方法を知る必要はありません。

はじめる

開始チュートリアルを参照するか、無料の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