componentWidMount中的Redux狀態更改在componentDidMount中無法識別？

Question

需要加載我的主要組件，並且如果使用react-router將對值「logged：true」的本地存儲重定向到「/ app」。

我使用的反應，終極版，這是我的代碼：

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

我的終極版動作：

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

但是，當組件獲得的componentDidMount階段，我的終極版狀態到現在還沒有已更新。

Ÿ設法得到這種利用工作：

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

但我不知道這是最好的解決方法。

提前致謝！

Answer 1

使用componentWillReceiveProps是這裏的方法，因爲你的logStatus對象被作爲一個正在被改變的道具傳入。

還有就是這是一個更優雅的方式使用Redux-thunk middleware它允許你派一個函數（其接收dispatch作爲參數，而不是對象的動作。然後，您可以換行功能的承諾，並在componentWillMount使用它。

在你的行動文件：

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

然後在您的組件：

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

Redux-thunk中間件用於這種用例。