mobx state tree

mobx-state-tree

Apa itu mobx-state-tree?

Secara teknis, MOBX-State-Tree (juga dikenal sebagai MST) adalah sistem wadah negara yang dibangun di atas MOBX, perpustakaan keadaan reaktif fungsional.

Ini mungkin tidak berarti bagi Anda, dan tidak apa -apa. Saya akan menjelaskannya seperti ini: Mobx adalah "mesin" manajemen negara, dan Mobx-state-tree memberikannya struktur dan alat umum yang Anda butuhkan untuk aplikasi Anda. MST sangat berharga dalam tim besar tetapi juga berguna dalam aplikasi yang lebih kecil ketika Anda mengharapkan kode Anda skala dengan cepat. Dan jika kita membandingkannya dengan Redux, MST menawarkan kinerja yang lebih baik dan lebih sedikit kode boilerplate daripada Redux!

MOBX adalah salah satu alternatif Redux paling populer dan digunakan (bersama dengan Mobx-State-Tree) oleh perusahaan di seluruh dunia. MST bermain sangat baik dengan naskah, bereaksi, dan bereaksi asli, terutama ketika dipasangkan dengan mobx-react-lite. Ini mendukung beberapa toko, tindakan async dan efek samping, memungkinkan re-render yang sangat ditargetkan untuk aplikasi React, dan banyak lagi-semuanya dalam paket dengan nol dependensi selain MOBX itu sendiri.

Catatan: Anda tidak perlu tahu cara menggunakan MobX untuk menggunakan MST.

Memulai

Lihat tutorial Memulai atau ikuti kursus Egghead.io gratis.

Dokumen resmi dapat ditemukan di http://mobx-state-tree.js.org/

Contoh Kode Cepat

Tidak ada yang seperti melihat beberapa kode untuk merasakan perpustakaan. Lihatlah contoh kecil penulis dan daftar tweet oleh penulis itu.

 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 

Terima kasih!

• Michel Weststrate untuk menciptakan MOBX, MOBX-State-Tree, dan Mobx-Reacct.
• Red tak terbatas untuk mendukung pemeliharaan berkelanjutan di MST.
• Mendix untuk mensponsori dan memberikan kesempatan untuk mengerjakan proyek -proyek eksplorasi seperti MST.
• Pekerjaan Dan Abramov tentang Redux telah sangat memengaruhi gagasan snapshot dan tindakan transaksional di MST.
• Pekerjaan Giulio Canti pada TComb dan sistem tipe secara umum telah sangat mempengaruhi sistem jenis MST.
• Semua pengadopsi awal yang mendorong untuk mengejar seluruh ide ini dan membuktikannya adalah sesuatu yang layak.