React Redux deeply nested objects

Question

Say I have a fairly simple nested, fetched object.

It contains many pieces of information and the schema is fixed.

Some items are nested such:

obj:{
  one:{
    x: "A",
    y: "B",
    more:{
      z: [1, 2],
      0: "C",
      extra: {
        a1: "b1",
        a2: "b2"
      }
    }
  }
}

That's as deep as it goes.

Redux stores this information fine.

Why cant I retrieve one.more.0 or one.more.extra.a1 in react?

I can get one.x.

I can set state with one.more, then retrieve .0, but not .extra.a1.

I understand there are supposed to be reasons for this, but where this simple use-case exists, I find it troubling that it requires hoops to use information which is both accessible and available otherwise.

Any suggestions to get around this which don't involve normalising/redesigning the data to fit the package?

Ideal world: this.props.aReducer.one.more.extra.a1

Many thanks

EDIT* Is this possible, or must such nested values be knit together pre-render:

render(){
  return(
    <div>
      {this.props.aReducer.one.more.extra.a1}<br />
    </div>
  )
}

Sorry, not entirely sure what you mean. React-wise ,from what i read, react wont handle deeply nested objects. — James Brown
– James Brown, Commented Apr 2, 2017 at 0:34
Redux should be able to handle nested state as long as you code your reducers and state-mappers appropriately. What data is your component getting? Is the data stored correctly in the Redux store? — Pedro Castilho
– Pedro Castilho, Commented Apr 2, 2017 at 1:18
I can verify redux is fine with it. The component receives everything appropriately, but when it comes to rendering (i should have specified) i get undefined errors on any prop or state below a couple of levels. A.b works but A.C.b = "cannot find b of undefined" though i can setState x:A.C and x.b is true. I've had this many times and always resign to flattening the data to use it in render. — James Brown
– James Brown, Commented Apr 2, 2017 at 1:44

James Ganong · Accepted Answer · 2017-04-02 03:15:22Z

2

The issue isn't with the deeply nested object, but more likely with the defaults of your state or lack of validation. In order to render one.more.extra.a1 each part of the path must exist, ie one must be an object with more as an object with extra as an object (extra doesn't have to have an a1 property to render properly as it would just return undefined instead of throwing an error). Trying to get a property on undefined will always throw an error. This typically means the state wasn't properly initialized or you aren't checking to make sure each part of the path exists.

One way to check each part of the path:

var a1 = 'Some default value';
if (one && one.more && one.more.extra) {
  a1 = one.more.extra.a1;
}

Another option is to use something like lodash's _.get link which does this check for you.

answered Apr 2, 2017 at 3:15

James Ganong

1,1718 silver badges16 bronze badges

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

2 Comments

James Brown Over a year ago

Yes so if I define the whole structure in initial state it should not throw an error, but I was using state as an example. I want to just render props from redux which apart from this scenario works. State shouldn't have any bearing, or am I mistaken?

James Brown Over a year ago

I am mistaken. I wrote the store so long ago I forgot that it also has its own default state aside from component state. That was rather silly of me. Thank you for your help.

Collectives™ on Stack Overflow

React Redux deeply nested objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related