requireAuth avec le routeur de réaction v4 et redux

Question

J'ai HOC pour la vérification est l'utilisateur connecté.

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

Et itinéraire

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> 
); 

Lorsque entrez d'abord sur la route fonctionne très bien, mais quand je change de magasin avec logged: false, je reste encore sur cette composante (route) parce que l'appel d'itinéraire une fois et ne pas mettre à jour sur la mise à jour du magasin, comment il fixer ou s'abonner RequireAuthComponent sur la mise à jour du magasin?

Answer 1

Peut-être que ce n'est pas correctement, donc si vous avez une meilleure idée s'il vous plaît me dire :)

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