MapStateToProps vs. MapDispatchToProps
MapStateToProps and MapDispatchToProps sound similar but are different in their functionality. They both have their uses in a react-redux application. Here is what they do and how they are different.
What does mapStateToProps do? MapStateToProps essentially lets us take a piece of the state we want to provide to our component and porting it as props to the relative component. Hence the name “mapStateToProps”.
As we can see here we are taking the state of the fighters object to be the value of mapStateToProps. This will help us when a change of state is made, and the connect function is called.
In a react-redux application, we are letting redux hold our state in the redux store. Using the connect function will give up access to this store, and call MapStateToProps each time there is a change to the stores state. MapStateToProps will be the first argument in the connect function. The second argument in this case is an action fetchFighters. Connect will take what ever that value of mapStateToProps and pass it to the relative component which is FighterList. Making it now a connected component.
MapDispatchToProps instead of providing state as props to the relative component, it provides actions as props your component that might need to be dispatch. MapDispatchToProps uses a function called dispatch. This function is used to dispatch actions and trigger state changes to the store. As we know mapStateToProps is the first argument in the connect function. MapDispatchToProps is the second argument.
Passing in mapStateToProps as the second argument will now provide the action as props to the FighterList component.
Although they sound the same, they are not. mapStateToProps will take a slice of state and passed as props to the component and mapDispatchToProps will provide an action as props to a component. Also mapStateToProps will change the global state for the component and mapDispatch will change the value of the global state. Both functions are great to use to keep separations of concerns.
