What is mapDispatchToProps in React-Redux?
In the React-Redux, mapDispatchToProps is a function that connects Redux actions to React props. It allows mapping between Redux action creators and component props so that components can dispatch Redux actions without knowing anything about Redux.
The mapDispatchToProps function can be used in the following ways:
-
Object shorthand notation
-
Function notation
Object shorthand notation
In this notation, actionCreator is an action creator function that returns an action object.
const mapDispatchToProps = {actionCreator}
The mapDispatchToProps function maps this function to a prop with the same name (actionCreator) and passes it to the connected component. When the prop is called, it automatically dispatches the corresponding action.
Example
In this example MyCounter component is defined. It takes two props: value and inc. It maps the value prop to the value from the Redux store, and inc to a function that dispatches an incrementCounter action to the Redux store.
Below is the implementation of this example using object notation.
Function notation
In this notation, mapDispatchToProp takes the dispatch function as a parameter.
const mapDispatchToProps = (dispatch) => {return {action: () => dispatch(actionCreator())}}
Example
In this example, MyCounter component is defined. It takes two props: value and inc. It maps the value prop to the value from the Redux store, and inc to a function that dispatches an incrementCounter action to the Redux store.
Below is the implementation of this example using function notation.
Summary
Object shorthand notation works well if we only need to map one or two action creators to the component props. However, function notation provides more control over the mapping, such as calling multiple action creators or passing arguments to the action creators.
Free Resources