Authentication Zustand prop nicht festlegen, bevor Seite Rendering

Question

Ich verwende redux in meinem einfachen reagieren Projekt und ich bin die Einrichtung geschützt Route, die eine Umleitung bei Feuer soll der Benutzer nicht angemeldet ist.

Mein Anfangszustand sieht wie folgt aus:

if (!loggedIn) { 
    return (<Spinner />); 
} 

if (loggedIn === false) { 

    return (
    <Redirect to={{ 
     pathname: '/login', 
     state: { from: this.props.location } 
    }} /> 
) 
} 
return (
    <Route {...this.props} /> 
) 

:

const INITIAL_STATE = { 
    email: '', 
    password: '', 
    error: '', 
    loading: false, 
    loggedIn: false 
}; 

die render-Funktion in meiner Komponente wie folgt aussieht

Jetzt, wenn ein Benutzer angemeldet ist, funktioniert alles gut, der Drehknopf wird angezeigt, bis der Inhalt geladen ist.

Das Problem tritt auf, wenn ein Benutzer nicht angemeldet ist, dann wird der Spinner angezeigt und nichts anderes passiert, die Umleitung wird grundsätzlich nicht aufgerufen. Ich kann in der Konsole sehen, dass der Status nur gesetzt ist, wenn ich die Komponente starte, und später überhaupt nicht aktualisiert werde, da ich keine Funktion anrufe. Ich frage mich, ob ich eine zusätzliche Funktion im componentWillMount() - Teil oder so etwas einstellen sollte? Oder mache ich nur mit Undefiniertem und Falschem herum?

Answer 1

Sie haben zwei Aussagen, die !loggedIn die gleiche Sache zu überprüfen, wird es mit der ersten Anweisung, was zu spinner wegen return es weiter geht nicht.

Unter der Annahme, loading funktioniert, können Sie versuchen, diese -

if (!loggedIn) { 
    return (
    <Redirect to={{ 
     pathname: '/login', 
     state: { from: this.props.location } 
    }} /> 
) 
} 

if (loading) { 
    return (<Spinner />); 
} 

return (
    <Route {...this.props} /> 
)