未映射到道具的狀態react-redux

Question

我有一個簡單的LoginForm，我嘗試從redux映射狀態進行反應。這裏是我的代碼LoginForm.js：

export class LoginForm extends React.Component { 
    render() { 

      console.log("**** FORM print store"); 
      console.log(store.getState()); 
      console.log("**** FORM print props"); 
      console.log(this.props); 

      if(this.props.loginObj.loginState=='true') { // error here 
       console.log('yes'); 
      } 

      return (
      <div><div/>); 
      ); 
      } 
     } 

const mapStateToProps = (state) => ({ 
    loginObj : state.loginObj 
}); 

const mapDispatchToProps = (dispatch) => ({ 
    doLogin, 
    changeText, 
}); 

export default connect( 
    mapStateToProps, 
    mapDispatchToProps, 
)(LoginForm); 

減速機包含屬性loginObj，如果我打印店裏我看到：

loginObj: 
    Object { loginState="false", user="", password=""} 

減速機：

const reducers = combineReducers({ 
    loginObj: loginReducer 
}); 
... 

然而，當我嘗試訪問道具，似乎this.props是空的。

this.props.loginObj.loginState - this.props爲null

UPDATE： LoginForm的：

所有正確的 mapStateToProps方法

Answer 1

import {bindActionCreators} from 'redux'; //must include 


    function mapStateToProps(state){ 
     return {  
      loginObj : state.loginObj 
      } 
     } 

    function mapDispatchToProps(dispatch){ 
     return bindActionCreators({doLogin,changeText},dispatch) 
    }; 

Answer 2

第一。它沒有回報價值。它從方法的語法中清楚地顯示出來。

其次你爲什麼用this.props.loginObj.loginState？這個抽象級別是錯誤的。正如你所提到的loginObj作爲道具，那麼爲什麼你應該抽象loginState屬性呢？它不會工作。

在REDX中，您應該將道具限制在狀態中的相同對象。例如，如果你想從國家獲得待辦事項，那麼可以提及待辦事項作爲道具。如果你想要一些todos的屬性，然後傳遞給道具（對於這個代碼）或通過兒童道具。

我不知道你的店，但是，組件應該是這樣的：

export class LoginForm extends React.Component { 
    render() { 

    console.log("**** FORM print store"); 
    console.log(store.getState()); 
    console.log("**** FORM print props"); 
    console.log(this.props); 

    if (this.props.loginObj.loginState == 'true') { // error here 
     console.log('yes'); 
    } 
     // for this issue you could view at this point - 
     // store.getState().loginObj.propertyyouwant only if you have 
     // imported main store in this current file 
    return (
     <div> 
     </div> 
      ); 
      } 
     } 

    const mapStateToProps = (state) => { 
     return { loginObj: state.loginObj}  
    }; 

    const mapDispatchToProps = (dispatch) => 
    { 
    return { 
     doLogin, 
     changeText,} 
    }; 


    export default connect( 
    mapStateToProps, 
    mapDispatchToProps, 
    )(LoginForm);