Redux: How to work with recursively nested objects?

[purezen]

Hi, I am making an app using Redux/React and I have been loving it so far!

So, in my app I have Lists declared recursively like,

var data = { lists : [ {id: 1, title: 'animals', lists: [ {id:2, title:'mammals',lists: [...]}, {id:3, title:'birds', lists: [...]}],{id:4, title: 'books', lists:[..] }

Basically, it's a list of lists and I want to enable my app to set the lists property (as in property of the state) as any of the sublists, using the id ie. using id 2, I would like to set data as the list with title mammals (so that I can set the sublist as the current list while viewing?).
The state is implemented via Redux.

However, I am not clear on how should I proceed further.

I tried initially with referencing var data in a new variable, but got to know that in Javascript the nested objects refer to the objects in the original object itself. Hence, changing state this way becomes troublesome.

The solution coming to my mind involved, looking for lists via id in deep nested objects and then deep copying them.. but I feel that there must be better ways to do this.

I looked at utilities to work on immutable data such as react's update helper, Immutable.js and updeep.

Will they help me?

And, what about normalizr?
How should I structure my data using this?

Would a good solution be a combination of such tools?
Thanks!

[gaearon]

We suggest normalizing data like this.

{
  listsById: {
    1: {
      id: 1,
      title: 'animals',
      childIds: [2]
    },
    2: {
      id: 3,
      title: 'animals',
      childIds: [5, 19]
    }, 
    3: {
      id: 3,
      title: 'books',
      childIds: []
    },     
    ...
  }
  visibleListIds: [1, 3]
}

The tree-view example in this repo shows pretty much the same structure.

[purezen]

@gaearon thanks, that worked 😃
Also, the tree-view example is pretty neat!