Array list in Redux state

Question

This is a question about state in Redux js. I have an array list in the state:

{
  list: list
}

According to Redux document, I should not modify the state in the reducer. I want to append a new item to the list. Should I clone the list, or simply append the new item to the list:

let newList = state.list;
newList.push(newItem);
return {
  list: newList
}

The above code actually modify the original state, because the newList is the same list as "state.list". Is this an OK practice, or should I use immutableJS to clone the list?

Qusai Jouda · Accepted Answer · 2016-01-05 16:48:36Z

11

You are mutating the list here and giving back the same reference. I believe something like below should make a new copy

return { list: [...state.list, newItem] }

It's not mandatory to use immutableJS. but you need to make sure not to mutate the state.

take a look at deep-freeze library to make sure that your state is not being edited.

this video from Dan (creator of redux) should help as well

edited Jan 5, 2016 at 16:48

answered Jan 5, 2016 at 16:43

Qusai Jouda

1,0588 silver badges12 bronze badges

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

Comments

wesbos · Accepted Answer · 2016-01-05 21:57:46Z

3

If you aren't keen on the spread operator, you can also do:

var newList = list.slice(); // copy the array
newList.concat(['item']);
return {
  list : newList
}

answered Jan 5, 2016 at 21:57

wesbos

26.4k31 gold badges109 silver badges144 bronze badges

1 Comment

David L. Walsh Over a year ago

In fact Array#concat behaves in an immutable fashion. It returns a new array whilst leaving the initial one as is. So not only is it unnecessary to create a copy of the array, the above code will fail because you haven't assigned the return value.

Collectives™ on Stack Overflow

Array list in Redux state

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related