3部作のPart3です。

前回はMobXのStoreをAsyncStorageを使って永続化するmobx-persistを使ってみました。

アプリケーションとして最低限のところはこれでなんとかなります。あとは開発を円滑に進めるべく、デバッグの方法がわかればOKかと思います。ストアにどんなデータが入っているかを自由に見られるとだいぶ効率が違います。

デバッグ用アプリ

手始めにDebuggerアプリを入れておきます。React NativeはChromeのDeveloperコンソールなんかでもデバッグ可能ですが、スタンドアローンのアプリを入れておくと何かと便利です。

デバッグ用アプリを起動した状態でここまでのTodoアプリを起動して、デバッグメニュー（iPhoneならcmdキー+dキー）から「Debug JS Remotely」でデバッグを有効にしてみます。アプリとデバッガが接続されますが、↓のようにstateは何も見えていません。

アプリの変更

デバッガでstateを閲覧できるようにしていきます。まずはデバッグ用のライブラリを最初にインストール。

% npm install mobx-remotedev

といきたいところですが、残念ながらmobx-remotedevのメインブランチでは最新のMobx 4系への対応がありません。開発頻度も落ちているので仕方ないので紹介されていたfork版参照して使ってみます。

% npm install 'crayonzx/mobx-remotedev#mobx4'

次にデバッガで見たいStoreにデコレータをつけてあげればOK。

import remotedev from 'mobx-remotedev';

@remotedev
export default class TodoStore {
  // ...
}

これでサーバーの再起動とアプリのリロードしたら↓のようにstateが表示されます。

他にもstate全体を見たりデータの変化（アクション）を見たり、Storeに対して色々できる、見られるようになるので必須と言えそうです。

今日までのソースコードはpart3タグとしてここにおいてあります。