Founder & CEO @ Wolk Software | EP @ JSConfIE | Former TypeScript Microsoft MVP, writer, speaker technology-lover and OSS enthusiast. Author of InversifyJS.
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.
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 themapStateToProps
function so it can grab what it needs.Very well explained .. Thanks..
Great explanation. The image is a perfect pairing! Thank you.
Thank you that was great...