3部作のPart3です。

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

MobXでTodoアプリ[Part2] データを保存してみる - ぴよログ
3部作のPart2です。 MobXでTodoアプリ[Part1] MobX導入まで MobXでTodoアプリ[Part2] データを保存してみる Mo

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

デバッグ用アプリ

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

jhen0409/react-native-debugger
react-native-debugger - The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools

デバッグ用アプリを起動した状態でここまでの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タグとしてここにおいてあります。

pi-chan/MobxTodoApp
Contribute to MobxTodoApp development by creating an account on GitHub.