mobx state tree
v7.0.1
Technisch gesehen ist MOBX-State-Tree (auch als MST bekannt) ein staatliches Containersystem, das auf MOBX basiert, einer funktionalen reaktiven Staatsbibliothek.
Das bedeutet Ihnen vielleicht nicht viel, und das ist okay. Ich werde es so erklären: MOBX ist eine staatliche "Engine", und MOBX-State-Tree gibt ihm Struktur und gemeinsame Werkzeuge, die Sie für Ihre App benötigen. MST ist in einem großen Team wertvoll, aber auch in kleineren Anwendungen nützlich, wenn Sie erwarten, dass Ihr Code schnell skaliert wird. Und wenn wir es mit Redux vergleichen, bietet MST eine bessere Leistung und viel weniger Boilerplate -Code als Redux!
MOBX ist eine der beliebtesten Redux-Alternativen und wird von Unternehmen weltweit (zusammen mit MOBX-State-Tree) verwendet. MST spielt sehr gut mit TypeScript, React und React Native, insbesondere wenn sie mit MOBX-React-Lite gepaart wird. Es unterstützt mehrere Geschäfte, asynchronisierte Aktionen und Nebenwirkungen, ermöglicht extrem gezielte Wiederholer für React-Apps und vieles mehr-alles in einem Paket ohne andere Abhängigkeiten als MOBX selbst.
Hinweis: Sie müssen nicht wissen, wie man MOBX verwendet, um MST zu verwenden.
Sehen Sie sich das Tutorial für das Erste Erste Schritte an oder folgen Sie dem kostenlosen Egghead.io -Kurs.
Offizielle Dokumente finden Sie unter http://mobx-state- tree.js.org/
Es gibt nichts Schöneres als einen Code, um ein Gefühl für eine Bibliothek zu bekommen. Schauen Sie sich dieses kleine Beispiel eines Autors und eine Liste der Tweets durch diesen Autor an.
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 
