JavaScriptをがんばるブログ

React,OSS,ソフトウェア開発が中心のブログです👨‍💻

LocalStorageにReduxのStateを保存してパフォーマンス改善する方法もあるよ JS日報 2017/11/13

JS日報

codeburst.io

上記記事のCaching with LocalStorageの章で紹介されているテクニックが良い感じでした。

  • ロード時にLocalStorageに保存済みのStateがあればそれをロード
  • LocalStorageへ保存しているStoreを更新するメソッドを作成し、store.subscribe()しておくことにより、Storeが変更されたタイミングでLocalStorageのStateを自動更新

という仕組みを作り、初期表示時のデータ取得が完了するまでのタイムラグを軽減する(何も表示されない時間？)らしいです。

これは長いテキスト入力ボックスなどでうっかりブラウザを閉じてしまった時の為に入力内容を保存するなどちょっとした操作データの状態を素早く復元するのにとても役立ちそうです。

パフォーマンス改善とか操作状態復元といった文脈を抜きにしても
Storeでアプリケーションの状態を制御するコンセプトのReduxとLocalStorageの相性が根本的に良い気がしています。
Reduxを使う場合はなるべく

Storeでアプリケーションの状態を表現出来る = Storeはjson形式 = あらゆる場所に保存、再現が容易

という特性を生かしたアプリケーションを作りたいですね。

追記 2017/11/15

本記事のやりたいことをそのまま提供してくれているredux-persistというライブラリがあるようです。
@akamecoさんありがとうございました！