3部作のPart2です。

• MobXでTodoアプリ[Part1] MobX導入まで
• MobXでTodoアプリ[Part2] データを保存してみる
• MobXでTodoアプリ[Part3] Storeをデバッグしてみる

前回MobXを導入してStoreにデータを追加すると画面が更新されるところまでできるようになりました。

前回までの実装だとアプリを起動し直したとき（React Native開発版ではリロードしたときも該当）に作ったTodoが消えてしまいます。今日はこれをキープできるような実装に変えたいと思います。

今日の分のソースコードはここに、前と別のタグを打って置いてあります。

前回からの変更箇所

まずはmobx-persistというライブラリを導入します。

% npm install mobx-persist

今回変更する箇所は2箇所です。作ったストアをAsyncStorageを使って永続化するところと、ストアのうち、どの値を永続化対象にするのか？というところです。

全体の差分が多くないので全部載せちゃう。

hydrate

まずhydrateのところ、ここがストアとストレージを同期するための部分です。

hydrate('todos', todoStore);

この一行で起動時に読み込んでくれるし、todoStoreに更新があったら保存しておいてくれます。

persist

次にストア側の記述です。ここでは@persistというデコレータを値に付けることで保存対象とします。通常の値であれば@persistと書くだけでOKですが、配列やオブジェクトの場合には@persist('list')などとして、型のようなものを指示しないと動きません。

保存されている様子

リロード後にも残っているのがわかります。