How to access nested Redux state in React components?

Question

What's an efficient/elegant way to access nested data from branches of the state that are only available part of the time?

I'm new to React and this problem keeps coming up. I have an ok grasp on Redux and using middleware like Thunk & Saga for the API stuff, but I still don't understand the proper way to write components so that they're not trying to grab non-existent state.

For example, when loading a user's profile photo into a header after the user signs in, the URL will be in the redux store as state.user.userData.photos.primary ...if I try to access that location when the user hasn't signed in, userData is still undefined and React will throw an error. So my solution has been to write assignments like:

let profilePhoto = props.user.userData ? props.user.userData.photos.primary : '';

... which seems cumbersome and inefficient, especially since it requires mapping the entire userData object in mapStateToProps only for the sake of accessing a tiny chunk of data.

I wish I could target it earlier. For example, in mapStateToProps:

profilePhoto : state.user.userData.photos.primary || '';

...but that results in "can't access 'photos' of undefined". So what's an efficient/elegant way to access nested data from branches of the state that are only available part of the time?

it doesn't qualify as an answer, but anyways: a.) try have a satisfactory default state when initializing the store - or have some helpers like getPrimaryPhoto(state) — Sebastian Rothbucher
– Sebastian Rothbucher, Commented Jun 10, 2018 at 17:23

Jyoti Arora · Accepted Answer · 2018-06-10 17:23:26Z

2

In your mapStateToProps access your state like this:

profilePhoto : state.user.userData ? state.user.userData.photos.primary : ''

and then use profilePhoto as props. This will not throw an error of undefined.

answered Jun 10, 2018 at 17:23

Jyoti Arora

1418 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew Masurka Over a year ago

Thanks -- not sure why I didn't think of that. :)

Meriç Melike Softa · Accepted Answer · 2018-06-10 17:42:33Z

In my current application I initialize the redux state with all the data tree that I will use; so that I will unlikely end up with undefineds.

So a solution would be:

const initialState = {
    userData: {
        photos: {
            primary: ""
        }
    }
}

This might look ugly in the first glance but it helps me keep track of what my data will look like, and can be simplified by defining parts of the object individually.

An alternative could be keeping a flag in the redux state like isUserPrimaryPhotoDefined which you would set to true when you are setting the primary variable; so you can use the flag in the ternary. However that might not guarantee getting rid of the possible errors completely.

Dinesh Pandiyan · Accepted Answer · 2018-12-02 06:06:34Z

0

With ES6 Destructuring Assignment, you can access nested keys from props in a cleaner way.

const { user: { userData: { photos: { primary = ''} = {}} = {}} = {}} = props;
console.log(primary); // prints primary value or '' if not defined

answered Dec 2, 2018 at 6:06

Dinesh Pandiyan

6,3393 gold badges36 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to access nested Redux state in React components?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related