MobX 3.0.0 の変更点について

タイプごとの`observable.*`

`2.7.0`までのMobXは、どんな型の値でも共通のAPIでObservable化してました。

// 2.7.0
const arr = observable([]);
const obj = observable({});

これが、

// 3.0.0
const arr = observable.array([]);
const obj = observable.object({});

const any = observable({});

という用に、APIとしても型を明示できるようになりました。
っても中の挙動は変わってないし、`observable()`をそのまま使えば値によって今まで通りに使えます。

さよならModifier

`2.7.0`までのMobXは、渡されたオブジェクトを勝手に「再帰的に」Observableにしてました。
APIからの返り値をただ入れておきたいみたいな場合、巨大なJSONを再帰されても・・ってな場合には、Modifierを使ってました。

// 2.7.0
// 再帰
observable(response)

// 1階層だけ
observable(asFlat(response))

ただこのModifier、APIのデザインとして適当・・？っていう話が前からあり。
左辺で定義したいとか、flatってなんやねんとか、そもそもいらねーんじゃねーのとか。

今回のAPI刷新に伴い、ここも変更されました。

// 3.0.0
// 再帰
observable.object(response)

// 1階層だけ
observable.shallowObject(response)

Observableな値を作るには、`observable.*()`なメソッドを使うということで、よりわかりやすくなりました。
この`observable.*`を何層か組合せて実現していくのを、オニオンアーキテクチャというらしい。冒頭の記事のタイトルにもなってる考え方ですね。

// 2.7.0
class Store {
  constructor() {
    extendObservable(this, {
      foo: asFlat([]),
      bar: asMap({}),
    });
  }
}

// 3.0.0
class Store {
  constructor() {
    extendObservable(this, {
      foo: observable.shallow([]),
      bar: observable.map({}),
    });
  }
}

`extendObservable`の場合もこのような感じ。

生き残りModifier

↑のコードを見て、`shallow`にはしたいけど型不定な場合どうしたらいいの？とか、Decorators派なんですけど・・って人もいるので、

• `observable.deep`
• `observable.ref`
• `observable.shallow`

この3つは引き続きModifierとして使えます。

// 2.7.0
class Store {
  constructor() {
    extendObservable(this, {
      todos: asFlat([])
    })
  }
}

class DecoStore {
  @observable todos = asFlat([])
}

// 3.0.0
class Store {
  constructor() {
    extendObservable(this, {
      todos: observable.shallow([])
    })
  }
}

class DecoStore {
  @observable.shallow todos = []
}

ちなみにModifierは、`@observable`、`extendObservable`、`observable.object`でしか使いません。

オブジェクトもクローンされるように

// 3.0.0
const { observable } = mobx;

const a = { x: 1 };
const o = observable(a);

o.x = 2;

console.log(a.x === o.x) // false

`2.7.0`までは、これが`true`でした。

まあそんなに驚きはない・・かと。
ArrayとかMapは今までクローンされてたので、こっちのほうが自然ですね。