React redux data not getting passed successfully

Viewed 50

I am trying to pass react data to redux, but it doesn't seem to be going through successfully, even though I wrote the code exactly like the tutorial.

Here are the relevant functions:

In components/login-form.js

testFunction(text) {
    console.log("The text entered is: ", text); //this reflects successful text entry
    this.props.authInputChange({'field': 'email', 'value:': text});
  }

const mapStateToProps = state => {
  console.log("The state is: ", state); //this does not get updated

  return {
    email: state.auth.email,
    password: state.auth.password
  }
};

export default connect(mapStateToProps, { authInputChange, login })(LoginForm);

In actions/index.js

export const authInputChange = ({ field, value }) => {
    console.log("The value entered is: ", value); //this value is empty
    return {
        type: 'AUTH_INPUT_CHANGE',
        payload: { field, value }
    };
}

Now even though I followed the tutorial exactly (with the exception of the console.log statements, which I added myself) I suspect the instructor made an error and that's why something's not getting passed where it should be. But I can't figure out what it would be, since I'm such a noob at redux.

Thanks for the help!

1 Answers

Review this line:

authInputChange({'field': 'email', 'value:': text})

You are setting value: equal to text not value. So you want:

authInputChange({'field': 'email', 'value': text})

Also, I am assuming your reducer is setup correctly.

Side Note: This is also why I prefer not to put quotes around my object keys. If you didn't put quotes around value: you would have seen this error instantly.

Related