[Done] React and Redux: Map Dispatch to Props

[Done] React and Redux: Map Dispatch to Props
0

#1

I can’t seem to understand the instructions properly.

My first instinct was

const mapDispatchToProps = (dispatch) => {
    return {
        submitNewMessage: dispatch(addMessage(newMessage))
    }
};

But I get the error “newMessage is not define”

So I tried:

const mapDispatchToProps = (dispatch) => {
    return {
        submitNewMessage: dispatch(addMessage)
    }
};

which got the error “dispatch is not a function”

I’m struggling to figure out how to pass in newMessage when it’s not indicated as a parameter for the overall function…

What am I missing?


#2

Hint: The instructions are not explicit on this, but the example shows what the test expects

submitLoginUser: function(username) {
    dispatch(loginUser(username));
  }

And you had this

submitNewMessage: dispatch(addMessage(newMessage))

By fixing that you will also have access to your named newMessage argument.


#3

Thanks JM, that did it! I feel dumb, should have been able to figure that out on my own.

Follow-up question:
Is there a reason you used that notation instead of ES6? Using your example, I converted it to the following and it worked:
submitNewMessage: ( username => { dispatch(loginUser(username)) } )

But is there a best-practice reason to use the function(arg){…} format?


#4

No best practice, just per project standards. I only copied pasted the FCC example. I usually stick to straight es6 like this

const mapDispatchToProps = dispatch => ({
   submitNewMessage: username => dispatch(loginUser(username))
})

If you only knew the silly mistakes I spent days troubleshooting in my code, you wouldn’t feel so dumb. lol :slight_smile:


#5

Ok cool, I just wanted to check. Thank you for your help, I really appreciate it!


#6

const mapDispatchToProps=(dispatch)=>{
return {
submitNewMessage: function(message) {
dispatch(addMessage(message));
}
}
};

this works form me.!


#7

Thanks! you can skip the first parenthesis set, by the way!