React+Reduxでリロード時も状態維持

Question

前提・実現したいこと

React+ReduxでSPAアプリケーションを開発中です。
ページのリロード（f5キー）時に状態が初期化されるのを防ぎたいのですが、中々いい案が思い浮かびません。
イメージ的にはリロードがされた時に発火するような処理を作りたいです。
どなたかご教授お願いいたします。

Answer 1

こんにちは

ページのリロード（f5キー）時に状態が初期化されるのを防ぎたい

という要件を満たす方法として、

• redux-localstorage

を使うことが考えられます。redux state の中で、ページがリロードされてもリロードされる前の値が復元されて欲しいプロパティについては、localStorage に（自動的に）保存され、必要なときは復元してくれる仕組みを提供してくれます。(ちなみに、私が現在関わっている React, Redux を使った開発業務でも使っています。)

Qiitaの記事を redux-localstorage で検索すると、「使ってみました」という趣旨の記事がいくつかありますので、まずはそちらをざっと目を通されるとよいかもしれません。

以上、参考になれば幸いです。

Comments

[退会済みユーザー]

ご回答ありがとうございます！そのような便利ツールもあるのですね！！

現在、jwt認証でのログイン機能を実装中なのですが、ログインしているかどうかで表示を変えたく、今まではstoreに認証済みかどうかを表すstateを作ってそれで条件分岐していました。
しかし、リロード時にstateが初期化されてしまって認証済みでも別のページが表示されてしまうため、どうしたものかと考えていました。
一応、localstorageにjwtトークンを保存をしているので、それを使ってどうにかしようとしたのですが、中々うまくいかず…。
おそらく、redux-localstorageを使う場合はこのstateを保存することが考えられると思うのですが、これは設計としていいものでしょうか？
本来はこの内容で質問すべきでしたよね…。
他になにかいい案があればご教授していただけると幸いです。
貴重なお時間を奪ってしまって申し訳ございません。

[退会済みユーザー]

すみません。うまくいきました…。
ご回答ありがとうございました！！

[jun68ykt]

コメントありがとうございます。
うまくいったとのことでよかったです????

以下補足しておきます。

今現在のプロジェクトでは、redux-localstorage を採用していますが、その前のSPAプロジェクトでは使っておらずサーバーから返されたjwtトークンの内容(user_id と expiration_date)を、khkhkhさんと同様に localStorage に入れていましたが、redux-localstorage のようなモジュールを使わなかったので、redux state と localStorage の間の保存と復元をするコードを手作りしました。リデューサーの

authReducer (state = initialState, action) {
・・・
}

の initialState を関数にして、

authReducer ( state = getInitialState() , action ) {

というようにして、getInitialState()　の中で、 localStorage に該当するキーがあれば取ってくる、なければソースコードに書かれた initialState を使う、といったコードを書いてみたり、
あるいは、index.js で createState した直後に、「 localStorage に保存された state を復元する」というアクションをdipatch することにしてみたり等、色々、紆余曲折したように記憶しています。
localStorage とのやりとりをする機能を reducer の付加的な機能として扱えばよいと考えるメンバーもいましたし、localStorage とのやりとりのような外部とのやりとりは、redux の要素に含めるべきではなく、 util 的な関数として扱うべきと考えるメンバーもいて、開発者によって意見が分かれた覚えがあります。