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} />; 
    } 
    }; 
}