add new data inside redux state tree

Question

I have an app with a tree of nested nodes. all nodes are same type.

{
id: 1,
title: "node_1",
children: [
    {
        id: 2,
        title: "node_2",
        children: []
    },
    {
        id: 3,
        title: "node_3",
        children: []
    }
]

}

When user expanded some node (for example node with id === 3) i have to perform request to database and insert response (array children) inside of "children" property of node with id === 3 . So as result app state should be like this:

{
id: 1,
title: "node_1",
children: [
    {
        id: 2,
        title: "node_2",
        children: []
    },
    {
        id: 3,
        title: "node_3",
        children: [
            {
                id: 4,
                title: "node_4",
                children: []
            },
            {
                id: 5,
                title: "node_5",
                children: []
            }
        ]
    }
]

}

how can i paste array of children inside node_3 children property?

I highly recommend looking at this redux tree example https://github.com/reactjs/redux/tree/master/examples/tree-view — ctrlplusb, May 31 '16 at 19:27

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

The suggested approach for relational or normalized data in a Redux store is to organize it in "normalized" fashion, similar to database tables. That will make it easier to manage updates. See http://redux.js.org/docs/FAQ.html#organizing-state-nested-data, How to handle tree-shaped entities in Redux reducers?, and https://github.com/reactjs/redux/pull/1269.

edited May 23 '17 at 12:24

Community

1
1

answered May 31 '16 at 19:22

markerikson

63,178
10
141
157

Yuya · Accepted Answer · 2016-05-31T20:16:44.483

1

Given:

const layer1Id = 1;
const layer2Id = 3;
const newArray = [
  {
    id: 4,
    title: "node_4",
    children: [],
  },
  {
    id: 5,
    title: "node_5",
    children: [],
  }
];

Then, in the reducer you'll do:

return Object.assign({}, state, { children: state.children.map(child => {
  if (child.id !== layer1Id) return child;
  return Object.assign({}, child, { children: child.children.map(node => {
    if (node.id !== layer2Id) return node;
    return Object.assign({}, node, { children: node.children.concat(newArray) });
  })});
})});

To make sure you don't mutate the previous state. If it is dynamically or deeply nested, I'll recommend you to write some recursive function and use that instead.

Edit: here's sample recursive solution (untested). The indices are in order by level (ie: indices[0] refers to first level's id, indices[1] refers to second level's id):

const state = { ... };
const indices = [1, 3, 4, 5, 6];
const newArray = [ ... ];

const recursion = (node, ids, newChildren) => {
  let children;
  if (ids.length === 0) {
    children = newChildren;
  } else {
    children = node.children.map(child => {
      if (child.id !== ids[0]) return child;
      return Object.assign({}, child, { children: recursion(child, ids.slice(1), newChildren) });
    });
  }
  return Object.assign({}, node, { children });
};

recursion(state, indecies, newArray);

edited May 31 '16 at 20:16

answered May 31 '16 at 19:40

Yuya

2,221
1
10
16

yes, it will be deeply nested. Can u attach some link to this recursive functions that can match this circumstances? – Pavel Poberezhnyi May 31 '16 at 19:52
Sure give me some time. – Yuya May 31 '16 at 20:01
@PavelPoberezhnyi I've added recursive solution. – Yuya May 31 '16 at 20:17
i'm sorry but have trouble with understanding what is indices and ids.slice(1) – Pavel Poberezhnyi May 31 '16 at 20:46
@PavelPoberezhnyi `indicies` is a list of `id`, so `[1, 2, 3]` would make `state.children[/* child with id = 1 */].children[/* child with id = 2 */].children[/* child with id = 3 */]` to get modified. `slice(1)` returns the `indicies` without the first element. This is general structure of recursive function. You can see some examples like [here](https://msdn.microsoft.com/en-us/library/wwbyhkx4(v=vs.94).aspx) if you're not familiar with concept of recursion. Essentially you keep applying the same function to itself while reaching to some base case. – Yuya May 31 '16 at 20:50
thank u, i'll explore info in this link first before implementation and will notify u when do it. – Pavel Poberezhnyi May 31 '16 at 21:06

Ashot · Answer 3 · 2016-05-31T19:31:24.100

-1

Just iterate through children array and push to correct one .

var id = expandedItemId; 
for(var i = 0; i < obj.children.length; i++){
  if(obj.id == expandedItemId){
     obj.children.push(`data got from server`);
  }
}

edited May 31 '16 at 19:31

answered May 31 '16 at 19:20

Ashot

1,229
1
12
13

1

Isn't best practice to return new instances of the arrays? – ctrlplusb May 31 '16 at 19:24
sorry @ctrlplusb did not got what you mean .Could you please clarify ? – Ashot May 31 '16 at 19:26
2

@ctrlplusb yes it is. So it should be something like `obj.children.concat('data got from server')` instead within the if statement. – Yuya May 31 '16 at 19:28
i'm sorry but this could be 3-d or 4-th level. So, as mentioned underneath, i have to write some recursive function – Pavel Poberezhnyi May 31 '16 at 19:54

add new data inside redux state tree

3 Answers3