Redux: where should I call mapDispatchProps?
This question is to see the specific situation. There is no right answer. But for your case, I recommend the former.
Make the ProfileScreen
component a container component. It's stateful and impure. That means we use mapDispatchProps
to inject the dispatch and the action creator into props. Handle the side effect in the container component such as DOM manipulation, network I/O, clean-up work.
Make the ProfilePhoto
and ProfileInfo
component presentational components. They are pure and stateless. That means they should NOT contain any side effect code. Just accept the props from the parent and render.
ProfileScreen(container)
/ \
ProfilePhoto ProfileInfo
If the ProfilePhoto
component gets more complex in the future, consider using it as a container component. The subcomponents of it are then used as the presentational component.
But keep in mind that more stateful and inpure components combined can lead to increased code complexity.
Further reading: Presentational and Container Components