3部作のPart2です。

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

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

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

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

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

前回からの変更箇所

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

persist mobx stores. Contribute to pinqy520/mobx-persist development by creating an account on GitHub.

% npm install mobx-persist

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

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

hydrate

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

hydrate('todos', todoStore);

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

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

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