3部作のPart3です。
- MobXでTodoアプリ[Part1] MobX導入まで
- MobXでTodoアプリ[Part2] データを保存してみる
- MobXでTodoアプリ[Part3] Storeをデバッグしてみる
前回はMobXのStoreをAsyncStorageを使って永続化するmobx-persistを使ってみました。
3部作のPart2です。 MobXでTodoアプリ[Part1] MobX導入まで MobXでTodoアプリ[Part2] データを保存してみる MobXでTodoアプリ[Part3] Storeをデバッグしてみ
アプリケーションとして最低限のところはこれでなんとかなります。あとは開発を円滑に進めるべく、デバッグの方法がわかればOKかと思います。ストアにどんなデータが入っているかを自由に見られるとだいぶ効率が違います。
デバッグ用アプリ
手始めにDebuggerアプリを入れておきます。React NativeはChromeのDeveloperコンソールなんかでもデバッグ可能ですが、スタンドアローンのアプリを入れておくと何かと便利です。
The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools - GitHub - jhen0409/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タグとしてここにおいてあります。
Contribute to pi-chan/MobxTodoApp development by creating an account on GitHub.
