React : mapDispatchToProps() operation

[karlito]

Hello,
Map Dispatch to Props
I don’t understand how mapDispatchToProps() works

First “map” word is very often used:
“It returns an object that maps dispatch actions to property names”
" This is similar to how it uses store.subscribe() for components that are mapped to state"
" , you can use them to map state and dispatch to the props"

Is it means"to link" ?
And if it’s yes, what is the difference between “link” and “connect” in the world of redux-react ?

Then, here is what i think i understand about this lines:
“The mapDispatchToProps() function is used to provide specific action creators to your React components so they can dispatch actions against the Redux store.”

My problème is , I don’t see again in this code how the link is done with the React component. Each “message” are without “s”.

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

// change code below this line
const mapDispatchToProps = (dispatch) => {
    return {
        submitNewMessage: (message)=>{
            dispatch(addMessage(message))
        }
    }
}

[kevinSmith]

“map” in this sense means to take things and place them in specific properties on another object.

You are not seeing the big picture yet, a lot is still hidden to avoid confusion. Eventually you will “connect” a React component to redux. You will learn about a function called connect that typically takes two callback functions, and will return an HOC (a Higher Order Component, a function that accepts a component and returns a new component) that will inject what you want into the props of your component.

It takes two callback functions, mapStateToProps and mapDispatchToProps. In your example that callback function will give you access in your component to a function called this.props.submitNewMessage that will dispatch the action creator addMessage with that parameter. This is the functional form of mdtp. There is also a simpler object form:

const mapDispatchToProps = {
  submitNewMessage: addMessage,
}

that would do the exact same thing, but won’t work for this test. It may not have been available when the lesson was written, but is probably more common - I almost never write a functional mdtp, but the idea is still the same. The “new” way just does the same exact thing with less typing.

Don’t worry if you can’t see the whole picture yet - it is too big to teach all at once. You’ll get the gist in the coming lessons. Redux is very confusing at first. It’s also really cool once you get the hang of it.

Does that help?

[karlito]

Here is how approximately I feel:

[kevinSmith]

Yeah, that was my reaction to Redux at first, too. It took a while for it all to sink in.