Next Generation State Mangement by @mweststrate in #ReactEurope の日本語メモ

MobX vs Redux

• この観点も悪くないが、いいとこどりできればより良い
• それぞれ表すなら
  • Mutable Model Graph -> MobX
  • Immutable Tree -> Redux
  • どちらもメリットとデメリットがある
• そこでいいとこどりの`mobx-state-tree`！
• 以下、メインの機能の紹介

Snapshots

• 良いよねー
• Reduxだと、Stateのツリーがそのまま使える
• MobXだと、`computed`でそれ用の関数をModelに生やせばいい
  • ただそれだとボイラープレートなコードがどうしても必要になる・・
• `mobx-state-tree`だと、`getSnapshot()` / `onSnapshot()` / `applySnapShot()`ってのが用意されてる

TypeChecks

• ランタイムの型チェックができるようになってる
  • どのモデルがどういう型か
  • エラーになったなら何をどうしようとしたかがわかる

そもそも、Modelの定義をこれでやる。

import { types } from "mobx-state-tree"

const Todo = types.model("Todo", {
    title: types.string,
    done: false
}, {
    toggle() {
        this.done = !this.done
    }
})

const Store = types.model("Store", {
    todos: types.array(Todo)
})

みたいな。

JSON patch

• http://jsonpatch.com/
• どういう処理がツリーに対して行われたか残る
  • `add` / `replace` / 'remove'
• サーバーサイドから他の人の変更差分をもらって反映・・とか

Actions

• ダイレクトな値の更新を禁止する
• ツリーのどの部分に対してどういう変更をしたか残る
• 更新できるのは自身とそのサブツリーのみ
• Actionも記録されるのでリプレイもできる
  • `clone()`したデータに対しても同じく
• `middleware`をかますこともできる

値の参照の問題

• Mutableだと次の行で参照先が変わってる可能性がある
  • Immutableだとその心配はない
• これもSnapshotを使って解決できる
• モデルどうしの参照でも有用な概念