状態は小道具にマップされていませんreact-redux

Question

私は単純なLoginFormを持っており、reduxからstatesへの対応を試みています。ここにLoginForm.jsからの私のコードは次のとおりです。

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

がリデューサー：

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

しかし、私、私は私が見る店舗を印刷する場合

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が含まれています小道具にアクセスしようとすると、this.propsが空であるようです。 LoginForm：

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

すべての正しいごmapStateToProps方法の第一 -

this.props.loginObj.loginState this.propsはヌル

UPDATEです。戻り値はありません。それはメソッドの構文からはっきりと分かります。

第2に、なぜthis.props.loginObj.loginStateを使用していますか？この抽象レベルは間違っています。 loginObjを小道具と言いましたが、なぜそこにはloginStateのプロパティを抽象化する必要がありますか？それは動作しません。

reduxでは、州の同じオブジェクトに小道具を限定する必要があります。たとえば、todosをstateから作成する場合は、todosをpropsとして指定します。あなたが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);