-
-
Labels: JavaScript
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新卒
その他採用情報
関連記事
-
-
redux アプリで定期実行処理を書くには
森です。redux アプリで redux-saga を使って定期実行処理を書いてみました。 要件 redux-saga で以下を実装する方法を検討しました。 定期的にステート(本稿では reducer で分割したストア)の値をチェックして何かする 定期的に A …
-
-
React × Redux で action 発行時に確認ダイアログを挟む middleware の実装例
pookチームのtakepoです。 今回は、React × Redux でstateを変更する時にダイアログ等で確認表示を挟みたいときの良い方法をご紹介します。 その場合の例として、「ユーザーの情報を更新するとき、更新しても良いかを一度確認するダイアログ表示す …
-
-
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例
@tsuyoshi です。先日行われた React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 と言うイベントで使ったスライドをアップロードしました。 https://pook.life/ と言うサービスをReact Redux の …