requireAuth與react-router v4和redux

Question

我有HOC檢查是登錄用戶。

import React from 'react'; 
import { Redirect } from 'react-router-dom'; 

export default function requireAuthComponent(store, Component, redirectTo = '/') { 
    return class RequireAuthComponent extends React.Component { 
    render() { 
     const state = store.getState(); 
     const auth = state.auth; 

     if (auth.logged) { 
     return <Component {...this.props} />; 
     } 

     return <Redirect to={redirectTo} />; 
    } 
    }; 
} 

和路由

import PrivatContainer from './container/PrivatContainer'; 
import requireAuth from '../../components/requireAuth'; 

export default store => ({ 
    path: '/privat', 
    exact: true, 
    component: requireAuth(store, PrivatContainer), 
}); 

PrivatComponent

import React from 'react'; 

export default ({ auth: { logged }, toggleLogin }) => (
    <div> 
    <h1>Privat Route</h1> 
    <h3>User is {logged.toString()}</h3> 
    <button onClick={() => toggleLogin()}>Logout</button> 
    </div> 
); 

當路由所有工作正常，但是當我改變存儲與logged: false，我還是留在此組件上先輸入（線路）因爲路由調用一次，而不更新商店更新，它如何修正或訂閱RequireAuthComponent對商店更新？

Answer 1

也許這是不正常的，所以如果你有更好的想法，請告訴我:)

export default function requireAuthComponent(store, Component, redirectTo = '/') { 
    return class RequireAuthComponent extends React.Component { 
    state = { 
     listener: null, 
    } 

    componentWillMount() { 
     const listener = store.subscribe(() => { 
     this.forceUpdate(); 
     }); 

     this.setState({ listener }); 
    } 

    componentWillUnmount() { 
     const { listener } = this.state; 

     listener(); 
     this.setState({ listener: null }); 
    } 

    render() { 
     const state = store.getState(); 
     const auth = state.auth; 

     if (auth.logged) { 
     return <Component {...this.props} />; 
     } 

     return <Redirect to={redirectTo} />; 
    } 
    }; 
}