Explain Redux's connect() and mapStateToProps like I'm 5

Would love to hear some different explanations around this piece of Redux! Thanks in advance :)

Did you find this post useful? Show some love!

The Store is a box, which contains the entire application state. Imagine that this box is in an unknown location.

The components need to take some of the things out of the box but they only need some of the things stored in it. The components know what they need from the box but they don't know where the box is.

The mapStateToProps function is a filter used to select which things in the box are required by the component. The selected things become the component properties.

The mapStateToProps function is not enough because it selects the required things in the box but it doesn't know where the box is located.

The connect function knows where the box is located and passes it to the mapStateToProps function so it can grab what it needs.

Great explanation. The image is a perfect pairing! Thank you.

Classic DEV Post from Apr 27

Github repos for learners

I would like to start this with some ice breaking sessions for people wanted to...

READ POST
Follow @tapudp to see more of their posts in your feed.
Domitrius
Software Dev + Rune Crafter @ RedQueen Gaming. Javascript is cool. I code and I play things. Let's talk about it :)
Trending on dev.to
Announcing the complete React/Redux course πŸŽ‰πŸŽ‰πŸŽ‰
#react #redux #reactredux #showdev
Quick Advice For Junior Devs
#discuss
Go or Python and why?
#go #python #discuss
Dev and Designer Communication
#discuss
What kind of breaks do you take throughout the work day?
#discuss
Who's looking for open source contributors? (May 21 edition)
#discuss #opensource
What is your routine for staying fit and healthy?
#discuss
Segment integrations with redux on react and react-native
#analytics #redux #javascript #react