react-router v4 및 redux가있는 requireAuth

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