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

Question

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

import React from "react";
import { withRouter } from "react-router";
import { createStore } from "redux";
import { Provider } from "react-redux";

import ValidatedLoginForm from "./ValidatedLoginForm";

//ステートの値
let state_value = {
    email: '[e-mail]',
    password: 'aaaaa0712',
    isLoggedIn: false
}

//レデューサー
function changeHeader(state = state_value, action){
    switch(action.type){
        case 'LOGIN':
            return{
                isLoggedIn:true
            };
        case 'NOTLOGIN':
            return{
                isLoggedIn: false
            };
        default:
            return state;
    }
}

class Login extends React.Component {
    render() {

        return (
            <div className='login-page'>
                <Provider store={store}>
                    <ValidatedLoginForm /> //ログイン可能かどうかのチェックをするコンポーネント
                </Provider>
            </div>
        );
    }
}
export let store = createStore(changeHeader);

export default withRouter(Login);

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

import React from "react";
import { withRouter } from "react-router";

import { store } from "./Login";

class Header extends React.Component {

  render() {
    return (
      <div className="header">
        {(() => {
          if ( store.getState().isLoggedIn ) {
            return (
              <div className="header-contents">
                ログインユーザー用ヘッダー
              </div>)
          } else {
            return (
              <div className="header-contents">
                未ログインユーザー用ヘッダー
              </div>
            )
          }
        })()}
      </div>
    );
  }
}

export default withRouter(Header);

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

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

考えたこと

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

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

修正・追記(10/3)

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

Answer 1

こんにちは

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

(1) connect を使う

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

import React from "react";
import { withRouter } from "react-router";
import { connect } from "react-redux";

class Header extends React.Component {

  render() {
    return (
      <div className="header">
        {(() => {
          if ( this.props.isLoggedIn ) {
            return (
              <div className="header-contents">
                ログインユーザー用ヘッダー
              </div>)
          } else {
            return (
              <div className="header-contents">
                未ログインユーザー用ヘッダー
              </div>
            )
          }
        })()}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  isLoggedIn: state.isLoggedIn
})

export default connect(mapStateToProps)(withRouter(Header));

(2) useSelector を使う

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

import React from "react";
import { withRouter } from "react-router";
import { useSelector } from "react-redux";

const Header = ({ history }) => (
  <div className="header">
    {useSelector(state => state.isLoggedIn) ? (
      <div className="header-contents logged-in">
        ログインユーザー用ヘッダー
      </div> ) : (
      <div className="header-contents not-logged-in">
        未ログインユーザー用ヘッダー
      </div>
    )}
  </div>
)

export default withRouter(Header);

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

Comments

[hello_whats_up]

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

[jun68ykt]

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