mapStateToProps:
It connects redux state to props of react component.
mapDispatchToProps:
It connects redux actions to react props.
// state
const mapStateToProps = state => {
return { lists: state.lists };
};
// props
const mapDispatchToProps = ({ lists }) => (
(ul)
{
lists.map(el => (
-(li key={ el.id })-
{ el.heading }
(/li)
)
}
(/ul)
);
// Now, connect state to prop
const List = connect(mapStateToProps)(mapDispatchToProps);
mapStateToProps is called when you want to get the value of the global state from your component
function mapStateToProps(state) {
return {
message: state.message
};
}
The value of the global state is only changed with the help of an action. So if you want to change the value of global state you need an action.
mapDispatchToProps is used to bind action in your component.