質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

14709閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2019/10/13 12:22

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは

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

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

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

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

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

投稿2019/10/13 12:43

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/10/13 12:59

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

退会済みユーザー

2019/10/13 13:27

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

2019/10/13 13:45

コメントありがとうございます。 うまくいったとのことでよかったです???? 以下補足しておきます。 今現在のプロジェクトでは、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 的な関数として扱うべきと考えるメンバーもいて、開発者によって意見が分かれた覚えがあります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問