MST

개요

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 해준다거나, 하는 점에서는 확실히 편하고