개요
Mobx 기반의 라이브러리이며, Mobx 에서 좀 더 제약이 생긴 라이브러리의 느낌이다. 그리고 상태 관리에서 데이터 형태에 좀 더 집중을 한 듯한 느낌?
runtime type protect
MST 에서는 Model 을 통해서 상태의 데이터 타입을 미리 정의할 수 있으며, runtime 시 상태가 데이터 타입과 일치하지 않은 업데이트가 발생할 시 에러를 throw 한다.
Immutable with Snapshot
MST 는 상태관리에 있어서 immutable 과 mutable 의 장점을 둘 다 가져온다. 그리고 Mobx 와 달리 데이터 구조와 데이터가 어떻게 업데이트 되어야 하는지 option 이 다양하다.
MST 는 상태를 tree 구조로 정의하며 해당 트리는 mutable 로 구성되며, tree 로 부터 immutable 하고 구조적으로 공유된 snapshot 이 자동으로 생성된다.
import { types, onSnapshot } from "mobx-state-tree"
const Todo = types
.model("Todo", {
title: types.string,
done: false
})
.actions(self => ({
toggle() {
self.done = !self.done
}
}))
const Store = types.model("Store", {
todos: types.array(Todo)
})
// create an instance from a snapshot
const store = Store.create({
todos: [
{
title: "Get coffee"
}
]
})
// listen to new snapshots
onSnapshot(store, snapshot => {
console.dir(snapshot)
})
// invoke action that modifies the tree
store.todos[0].toggle()
// prints: `{ todos: [{ title: "Get coffee", done: true }]}`
JavaScript
복사
Mobx 와 비교해서...
좀 더 편한 점들이 있긴 있다. Model 을 정의하고 데이터들을 넣으면 자동으로
결론
솔직히 Typescript 를 사용하는데 따로 Model 의 타입을 정의하는 것은 좀 이해가 안되기도 하고 귀찮은 작업이기는 하다. 하지만 자동으로 state 를 serialize 해준다거나, 하는 점에서는 확실히 편하고