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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

1回答

2445閲覧

Reduxでstateが更新されるとヘッダーを切り替えたい

hello_whats_up

総合スコア57

Redux

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2019/10/03 02:41

編集2019/10/03 09:37

##解決したいこと
Reactでログイン機能を実装しようとしています。
流れとしては、ログイン情報(メールアドレスとパスワード)を入力してログインするとログインしているとき用のヘッダーに切り替えるといった流れです。

Login

ValidationLoginForm.jsでログイン可能かどうかの判定をし、それに応じてdispatchをしています。

Header

1import React from "react"; 2import { withRouter } from "react-router"; 3 4import { store } from "./Login"; 5 6class Header extends React.Component { 7 8 render() { 9 return ( 10 <div className="header"> 11 {(() => { 12 if ( store.getState().isLoggedIn ) { 13 return ( 14 <div className="header-contents"> 15 ログインユーザー用ヘッダー 16 </div>) 17 } else { 18 return ( 19 <div className="header-contents"> 20 未ログインユーザー用ヘッダー 21 </div> 22 ) 23 } 24 })()} 25 </div> 26 ); 27 } 28} 29 30export default withRouter(Header);

ログイン可能なメアドとパスワードを打ち込んでも「未ログインユーザー用のヘッダー」のままでした。
(ちなみに決め打ちでtrue、falseを設定したら切り替えられるのは確認済みです)

それぞれisLoggedInの値がどうなっているかコンソールで確認したところ、ログイン用のメアドやパスワードを打ち込む前は各ファイルでのはfalseになっており、ログイン可能なメアドとパスワードを打ち込んだらHeaderでだけfalseになって他のファイルではtrueになっているのを確認しました。

考えたこと

  • おそらくdispatchでstateが変更される前の値が参照されてる
  • stateが変更されたあとに再レンダリングしないといけない?

などかなと考えましたが解決策を見つけれませんでした。
なにか方法がわかる方は教えていただきたいです。

修正・追記(10/3)

ログイン可能なメアドとパスワードを入力し、その後もう一回別のページに遷移するとヘッダーの変更ができていることが確認できました。そうなってからHeader.jsでのisLoggefInの値はtrueになっていたのでおそらくリアルタイムで反映できていないのだろうと考えました。ここのレンダリングをログインしたのと同時に行いたいのですがその方法がわかりません。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんにちは

以下の(1) または (2) のように修正してみると、いかがでしょうか?

(1) connect を使う

redux に connect させて、this.props から isLoggedIn を取得するようにします。

jsx

1import React from "react"; 2import { withRouter } from "react-router"; 3import { connect } from "react-redux"; 4 5class Header extends React.Component { 6 7 render() { 8 return ( 9 <div className="header"> 10 {(() => { 11 if ( this.props.isLoggedIn ) { 12 return ( 13 <div className="header-contents"> 14 ログインユーザー用ヘッダー 15 </div>) 16 } else { 17 return ( 18 <div className="header-contents"> 19 未ログインユーザー用ヘッダー 20 </div> 21 ) 22 } 23 })()} 24 </div> 25 ); 26 } 27} 28 29const mapStateToProps = state => ({ 30 isLoggedIn: state.isLoggedIn 31}) 32 33export default connect(mapStateToProps)(withRouter(Header)); 34

(2) useSelector を使う

React 16.8 以上をお使いでしたら、新たに導入されたHook に対応して、react-redux も v7.1.0 から Hook を利用するAPI がいくつか用意されています。それらの中の useSelector を使って以下のようにも書けるかと思います。

jsx

1import React from "react"; 2import { withRouter } from "react-router"; 3import { useSelector } from "react-redux"; 4 5const Header = ({ history }) => ( 6 <div className="header"> 7 {useSelector(state => state.isLoggedIn) ? ( 8 <div className="header-contents logged-in"> 9 ログインユーザー用ヘッダー 10 </div> ) : ( 11 <div className="header-contents not-logged-in"> 12 未ログインユーザー用ヘッダー 13 </div> 14 )} 15 </div> 16) 17 18export default withRouter(Header);

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

投稿2019/10/06 00:34

jun68ykt

総合スコア9058

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

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

hello_whats_up

2019/10/06 07:14

丁寧に説明していただきありがとうございます。 connectの方法で解決できました。ありがとうございました。
jun68ykt

2019/10/06 07:25

どういたしまして。解決したとのことで、よかったです????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問