React.js - In plain english what is mapDispatchToProps?

Question

I've been learning React/Redux for a few days. In plain and basic english, what is mapDispatchToProps?

I have this function that I don't understand.

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ selectBook: selectBook}, dispatch); 
}

Answer 1

mapStateToProps returns nothing but your app's state stored in the global store and passed to your component as props.

mapDispatchToProps wraps your action creator in the redux's dispatch method and pass it again as a prop to your container. So basically the global store's state and action creators wrapped with dispatch are all together passed as props to your component. You are passing state and the redux's dispatch method as a prop to the component.

mapDispatchToProps = dispatch => ({
    dispatchAnAction: dispatch(actionCreator1)
})

Here the connected component say ComponentA will receive the props and one of the prop will be dispatchAnAction which is returned by mapDispatchToProps as in the above code. You will call the dispatchAnAction like this this.props.dispatchAnAction() and the action returned by the actionCreator1 will be dispatched to the global redux store.

P.S If you are starting wth redux this course is highly recommended.

Answer 2

mapStateToProps, mapDispatchToProps and connect from react-redux library provides a convenient way to access your state and dispatch function of your store. So basically connect is a higher order component, you can also thing as a wrapper if this make sense for you. So every time your state is changed mapStateToProps will be called with your new state and subsequently as you props update component will run render function to render your component in browser. mapDispatchToProps also stores key-values on the props of your component, usually they take a form of a function. In such way you can trigger state change from your component onClick, onChange events.

Answer 3

Without mapDispatchToProps you would need to call dispatch on the store manually. In this case you need a reference to store object.

store.dispatch(selectBook(argument))

mapDispatchToProps setup syntactic sugar of (state, dispatch, and action) and put it as props of the component.

So the code:

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ selectBook: selectBook}, dispatch); 
}

Will result in

props: { 
    selectBook: (arguments) => { dispatch(selectBook(arguments)) } 
}

Answer 4

Dispatching an action can be defined as triggering certain type of action that one or multiple of your reducers expect.

So in simple words, mapDispatchToProps is method by which you map your dispatches(action creators) as props to your component. This way the action creators that you create are accessible via the props of your component. i.e. this.props.{action_creator}.

Answer 5

mapDispatchToProps is simply an interface that passes action creators into your component and in the same component, these actions-creators can be accessed as props.

It is used with connect function, such a way that the action returned by a action-creator is dispatched into the redux store, where all the state of the application resides.

mapDispatchToProps comes in handy when there is multiple action present within a single action-creators.

You can return multiple actions within a single action-creator with the help of the dispatch parameter in the mapDispatchToProps function.