How the connect() function works in React-Redux for beginners — Part 3 of 3: Retrieving data from the store
Tags: react, redux, javascript
Published: 2021-09-05 21:37:03

In the final entry for this series I want to demonstrate how to retrieve or extract data from the Redux store.

Before reading this post, I would recommend that you read [Part 1](https://dev.to/hmcodes/a-bird-s-eye-view-of-the-connect-function-in-react-redux-part-1-of-3-24pa), which gives an overview of the `connect()` function, and [Part 2](https://dev.to/hmcodes/how-the-connect-function-works-in-react-redux-for-beginners-part-2-of-3-sending-data-to-the-redux-store-458b), which details how to send data to the Redux store. Doing this should make it easier to follow along.


##The Menu##

First, let’s discuss `mapStateToProps` — the first parameter of the `connect()` function as highlighted in Part 1 of this series.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msdpbqfg1n30qbr6adi9.png)

`mapStateToProps` , like a menu from a school canteen, is used to specify which data from the store (state or state tree) your component is interested in receiving continuously.

If you don’t want your connected component to receive data from the store, then pass `null` or `undefined` as the first argument to the `connect()` function. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw5hk2m8gggbqlijzw5n.png)


##What would you like with your meal ma’am?##

`mapStateToProps` is a function which can receive `state` and `ownProps` as arguments. `state` represents the entire state tree of the Redux store, and ownProps refers to the props passed to the connected component.

How you define your `mapStateToProps` function determines if `state` and `ownProps` are received as arguments.


##Can I have a little bit of everything?##

If the definition contains no parameters or two parameters, then both `state` and `ownProps` will be passed in as an arguments. If this is done, then the component will re-render when a change has been detected in either the `state` or `ownProps`. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljwwlsxxta6lxgoy6nql.png)


![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/si5gh16l98nbhzp9t0b6.png)


##Just give me ketchup and hold the mayo##

On the other hand, if only one parameter is specified then only `state` will be passed in as an argument. In this case, the component will only re-render if a change has been detected in `state`.  

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdnh68lz569z1ndnagzj.png)

####Something tastes off####

If you’re not familiar with the concepts of mutation and immutability, now would be a good time to get acquainted. It will save you a lot of headaches and heartaches. I will link to articles below which speak about this in greater detail.

Why am I talking about immutability? The state should be an immutable object. If the state is only mutated, then the `mapStateToProps` function will not detect a change and will not work as expected. 


##Here’s your order ma’am##

The `mapStateToProps` function returns a plain object.

The fields in this object will be available as `props` to your connected component and the values will be the data that you wanted from the store.

For example, if the state is defined as:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dv3jn9b3nho314v3u7d.png)

Then the object returned from `mapStateToProps` can be defined like this: 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6okmzg1c4yiplki01st1.png)

The connected component can access the fields in the object in the same way other `props` are accessed. Two common ways are to use either `props.<fieldName>` 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3qeh9r5w8hi6np7m7x9.png)

or by [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) the props and calling the <fieldName> directly in the code. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdpqhs95ip0n8kah1gwv.png)


##And, scene##

This brings us to the end of this three-part series and I hope these posts made it easier to understand the mechanics of the `connect()` function.

In the future, I’ll cover Redux hooks as these are being proposed as the more beginner-friendly options.

If you have any questions, comments or suggestions please leave them below or reach out to me on Twitter @HMCodes.

If you liked this article, then please [support me] (https://www.buymeacoffee.com/hmcodes) 


##Sources##

[Connect: Extracting Data with mapStateToProps | React Redux](https://react-redux.js.org/using-react-redux/connect-mapstate)

[Immutability in React: There's nothing wrong with mutating objects - LogRocket Blog](https://blog.logrocket.com/immutability-in-react-ebe55253a1cc/)