JavaScriptをがんばるブログ

JavaScript関連で日々気になった事を書いていきます。今はReactを専門としています。

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

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さんありがとうございました!

material-uiのテストコードが勉強になる JS日報 2017/11/8

GUIのテストってどうやれば良いのか、どこまでやれば良いのか解らないのでmaterial-uiのリポジトリソースコードを読んで勉強していた。

普通にEnzymeでちまちま要素を取得しつつアサート、適宜propsをいじってまたアサートという具合で思っていたよりシンプルで自分でもやれそうな内容だった。

ソフトウェア開発のスキル、具体的には期日内に振る舞いを保証するテストを添えて成果物を完成させるスキルを磨かなければ延々と流行の技術スタックをサンプルコードの見よう見まねで覚えながら突貫工事でなんとか実装、テストが無いので時間経過につれ変更作業が重くなり業務時間の大半を目視動作確認に費やすサイクルを繰り返すIT土方になってしまい将来が見えなくなるのでそろそろ上級ソフトウェア開発者としてのスキルを獲得し質の高い環境で働けるようテコ入れが必要である。