mobx state tree 다운로드 -Mobx 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 대안 중 하나이며 전 세계 회사에서 Mobx-State-Tree와 함께 사용됩니다. MST는 특히 MOBX-REACT-LITE와 쌍을 이룰 때 TypeScript, React 및 React Native와 매우 잘 작동합니다. 여러 매장, 비동기 동작 및 부작용을 지원하며 RECT 앱을위한 매우 타겟팅 된 리 렌더를 가능하게합니다.

참고 : 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