ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

thumbnail

Labels:  JavaScript 投稿者:mori-dev

redux-persist でブラウザストレージに一部のデータを保存しつつ、ストアに復旧するまで render を防ぐには

です。

課題

redux-persist を使っていて、ブラウザリロード時にブラウザストレージからストアにデータを復旧する前に render されるのを防ぎたい。ストアに値があることが前提のコンポーネントでエラーになるから。公式ドキュメントとしてレシピがあった(Delay Render Until Rehydration Complete)  が、これだと、すべてのステートがローカルストレージに保存されてしまいます。

前提

  • redux-persist で、すべてではないいくつかのステートをローカルストレージとセッションストレージに保存しています
  • ステートは { loadingFlag: true, data: { foo: ‘bar’ }} といった構造で、data 以下だけをブラウザストレージに保存します
  • UniversalJS を意識した設計になっており、プロバイダを提供するコンポーネントが、ネイティブアプリ(Cordova)版 と ブラウザ版で別にあります

解決案

公式ドキュメントのレシピは、persistStore するときのオプション指定が行われていないことが、今回の私たちの状況にとって問題です。rehydrated か否かを redux のストア common.rehydratedFlag として、プロバイダを render するコンポーネントをコンテナにして、それを参照すれば済むのではないかというのが、最初の案でした。しかし、connect するときに store がないといったエラーになり、うまくゆきませんでした。

redux-persist の persistStore では第三引数で、処理終了時のコールバックを指定できます。そこで、ここで rehydrate の終了イベントを emit して、プロバイダコンポーネントでリスンして、プロバイダコンポーネントのステートとして用意した rehydratedFlag を true にする、という対応をとりました。これでプロバイダコンポーネントが Cordova アプリ、ブラウザアプリと複数ある場合も、それなりに DRY なまま、望んだ結果を表現できました。

実装の概略は以下の通りです。

環境

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。


【中途採用】
フロントエンドエンジニア
サーバーサイドエンジニア
コーポレートエンジニア
SREエンジニア

【新卒採用・その他】
21・22新卒
その他採用情報

関連記事

thumbnail
ランサーズ流 React.js/redux アプリ開発入門

はじめまして、森(@mori-dev) と申します。React.js/redux, Rails, Node を使ったアプリの開発を行っています。 このエントリーでは、ランサーズでの React.js/redux プロジェクトの設計/実装などの雰囲気がわかるよう …

thumbnail
SEOフレンドリーな無限スクロールの実装方法

飲み物は常温派のota(@purratto)です。自動販売機で常温のものも販売してくれればいいのになあ、と常々思っています。 ランサーズストアでSEOフレンドリーな無限スクロールをjQueryで実装しました。 サンプル向けに一部修正したコードを公開します。参考 …

thumbnail
mocha のテスト実行前にグローバル変数をセットする方法

森です。 mocha のテスト実行前にグローバル変数をセットする方法を調べました。 コマンド引数か mocha.opts で、設定ファイルを require することで、うまくゆきました。以下の例では、–require ./test/setup.j …