State not mapped to props react-redux

问题

I have a simple LoginForm and I try to map the states from redux to react. Here is my code from 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);

The reducer contains the property loginObj, if I print the store I see:

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

Reducer:

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

However when I try to access the props, it seems that this.props is empty.

this.props.loginObj.loginState - this.props is null

UPDATE: LoginForm:

回答1:

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


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

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

回答2:

First of all your correct your mapStateToProps method . It doesn't have return value. It shows clearly from the syntax of the method.

Second why are you using this.props.loginObj.loginState ? This abstraction level is wrong. As you have mentioned loginObj as props, then why you should abstract loginState property there? It'll not work.

In redux, you should limit props to same object in the state. For example, if you want todos from state, then mention todos as props. If you want some property of todos, then pass down it to props(for this code) or via children props.

I don't know about your store but, the component should look like:

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

来源：https://stackoverflow.com/questions/44393412/state-not-mapped-to-props-react-redux

标签

javascript

reactjs

redux