Map State to Props Confusion

JavaScript
1

Tell us what’s happening:

Hmmm, so this code is working, but I don’t get what this function is going to do, the next lesson with mapDispatchToProps also has me confused, I solved the challenge but I don’t wanna move on like this, not getting what it does.
If anyone could explain it for me I’d be really grateful!

Your code so far


const state = [];

// change code below this line
function mapStateToProps(state) {
    return {
        messages:state
        }
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/73.0.3683.86 Chrome/73.0.3683.86 Safari/537.36.

Link to the challenge:

2

mapStateToProps is one of the arguments used by ReactRedux's connect method, it uses this function to subscribe to the Redux store (partially or fully) such that anytime the store changes your React component is aware (via it’s props).

3

Hmmm I see, guess it’ll become clearer later when I actually need to use it?

4

Yeah, it will. When / If you create multiple React components you will see how cumbersome it may get to access the data from another React component, this is because React espouses ‘one way data flow’ from top to bottom in a tree like structure, for example a sibling component can get it’s access to another sibling components data only from their common parent component, you can see how this can get messy as the relationships become complex. However, when you introduce redux and store all the data in one place, all (stateful) React components get the option to read or write to the store (via ReactRedux bindings) , and mapStateToProps and mapDispatchToProps are used to facilitate this communication. This means that the components do not need to traverse the React component tree to get the data that another component has generated (or is using) any more, as they can access it directly from the Redux store.

1 Like