Redux changing value of deep nested array

Question

I have an initial state like so:

const initState = {
    posts: data
}

now posts is something like :

[
  {
    "id": "",
    "text": "",
    "slug": "",
    "title": "",
    "comments": []
  },

//some more here
]

So what I want to do is, when dispatch is fired I want to add new comments to that specific comments array. This is how I do it:

 if (action.type === "ADD_COMMENT") {
        let findPost = state.posts.find(post => post.slug === action.payload.comment.postSlug);
        let index = state.posts.indexOf(findPost);
        console.log(findPost);

        return {
            ...state,
            posts: [...state.posts,
            state.posts[index].comments = [action.payload.comment, ...state.posts[index].comments]]
        }
    }

Even though my app works completely fine I have a problem with the redux state. Because everytime action is happened it adds new comments in to that specific array along with a new array in to state.

So in case of firing new action I do get something like this:

[
  {
    "id": "",
    "text": "",
    "slug": "",
    "title": "",
    "comments": ["comment here"]
  },
[
  {
    "comments": ["comment here"]
  },

//some more here
]

]

In each click it creates a new entry in to my state which I don't want at all. How can I make it possible that it only adds the comments in to that specific array but not as separate entry?

instead of using find and indexOf, you can pass the index of the item in your dispatcher. — Junius L, Jun 02 '20 at 13:31

Maxime Girou · Accepted Answer · 2020-06-02T13:57:04.970

2

You push the new comment in the "posts" array instead of the post's object.

You can try with a map

if (action.type === "ADD_COMMENT") {

 const posts = state.posts.map(post => {
       if( post.slug === action.payload.comment.postSlug){
          post.comments.unshift(action.payload.comment);
       }
       return post
    });

    return {...state, posts}
}

EDIT : With this solution you mutate the state, wich is not recommended To avoid this simply copy your posts in a new variable

let posts = [...state.posts]

And then do your map.

edited Jun 02 '20 at 13:57

answered Jun 02 '20 at 13:31

Maxime Girou

1,511
2
16
32

1

elegant way to handle that problem – Wonkledge Jun 02 '20 at 13:39
Definitely brilliant. Thanks a lot. – em_code Jun 02 '20 at 13:39
1

but this mutates the state. see https://stackoverflow.com/questions/37755997/why-cant-i-directly-modify-a-components-state-really – Junius L Jun 02 '20 at 13:41
1

There's no point of doing ```return {...state, posts}``` since you are directly changing state. – Junius L Jun 02 '20 at 13:46

score 2 · Answer 2 · answered Jun 02 '20 at 13:42

2

Pass the index of comments array in your payload.

if (action.type === 'ADD_COMMENT') {
  // get the index of the item from the payload
  const index = action.payload.index;
  // create a copy
  const posts = [...state.posts];
  // add comment to comments array
  posts[index].comments.push(action.payload.comment);

  console.log(posts[index]);

  return {
    ...state,
    posts: posts,
  };
}

answered Jun 02 '20 at 13:42

Junius L

15,881
6
52
96

That's even better solution. Thank you for your time. – em_code Jun 02 '20 at 13:58

Redux changing value of deep nested array

2 Answers2