Redux-Statusänderung in ComponentWillMount wird in ComponentDidMount nicht erkannt?

Question

brauchten meine Hauptkomponente und eine local mit dem Paar Wert zu laden, falls „angemeldet: true“ existiert mit reagieren-Router „/ app“ umleiten.

Ich reagiere-redux bin mit und dies ist mein Code:

class Main extends Component { 

    componentWillMount(){ 
// Return true in redux state if localstorage is found 
     this.props.checkLogStatus(); 
    } 

    componentDidMount(){ 
// redirect in case redux state returns logged = true 
     if(this.props.logStatus.logged){ 
      hashHistory.push('/app'); 
     } 
    } 

    render() { 
    return (
    <App centered={true} className="_main"> 
     {this.props.children} 
    </App> 
    ); 
    } 
} 

Meine Redux Aktion:

checkLogStatus() { 
    // check if user is logged and set it to state 
    return { 
     type: LOGIN_STATUS, 
     payload: window.localStorage.sugarlockLogged === "true" 
    }; 
} 

Aber wenn die Komponente der componentDidMount Bühne bekommt, mein redux Staat hat nicht noch wurde aktualisiert.

Y verwaltet dies durch die Verwendung zur Arbeit kommen:

componentWillReceiveProps(nextProps){ 
     if (nextProps.logStatus.logged && nextProps.logStatus.logged !== this.props.logStatus.logged){ 
      hashHistory.push('/app'); 
     } 
    } 

Aber ich bin nicht sicher, ob es die eleganteste Lösung ist.

Vielen Dank im Voraus!

Answer 1

componentWillReceiveProps Verwendung ist der Weg hier zu gehen, da Ihr logstatus Objekt als Stütze übergeben wird, der geändert wird.

Es ist ein eleganter Weg, um dies den Redux-thunk middleware mit dem Sie eine Funktion zum Versand ermöglicht (die anstelle der Objektaktionen dispatch als Argument erhält. Anschließend können Sie diese Funktion in einem Versprechen wickeln und es in componentWillMount verwenden.

in Ihren Aktionen Datei:

updateReduxStore(data) { 
    return { 
     type: LOGIN_STATUS, 
     payload: data.logInCheck 
    }; 
} 

validateLocalStorage() { 
    ... 
} 

checkLogStatus() { 
    return function(dispatch) { 
     return new Promise((resolve, reject) => { 
      validateLocalStorage().then((data) => { 
       if (JSON.parse(data).length > 0) { 
        dispatch(updateReduxStore(data)); 
        resolve('valid login'); 
       } else { 
        reject('invalid login'); 
       } 
      }); 
     }); 
    }; 
} 

Dann in Ihrer Komponente:

componentWillMount() { 
    this.props.checkLogStatus() 
     .then((message) => { 
      console.log(message); //valid login 
      hashHistory.push('/app'); 
     }) 
     .catch((err) => { 
      console.log(err); //invalid login 
     }); 
} 

Redux-Thunk Middleware ist für solche Anwendungsfälle gedacht.