Redux states are strangely changing - reactjs

Question

I have 2 different states and one state contains a part of the second one. The fact is when the second state is changed, what is in the first state is also changed and I can't handle why.
Here is when I change the 2nd state :
case 'UPDATE_IMAGES':
return Object.assign({}, state, {
runes: updateChosenState(state, action)
});
export function updateChosenState(state,action){
const img = state.images.slice();
let e = action.e;
imga[].id_ = action.id;
return img;
}
The first state is accessing that way in the action then given to the reducer :
let img = getState().ImgReducer.images;
In the reducer I have some function to take when it's related :
const copy = images.slice();
items.image = copy[idGiven];
This line is changed whenever the images state is changed. Even by copy this is changed and I can't understand why. I just want to have a copy of this thing in my first state and for this state I don't care if images is changed after.
I feel that I'm directly accessing ImgReducer state so whenever it changes I have the update but I don't know how to avoid that.
Thanks you

Answer 1

Wen you use slice on an array, the returned array is not a real clone. Instead, you got a shallow copy of the array. Therefore, both, the copy and the original objects inside the array point to the same memory reference.
From the Array#slice docs on MDN:
To object references, slice copy the reference inside the new array. Both, the original and the new array are pointing to the same object. If an referenced object changes, the changes are visible for both arrays.
You can verify this with the following example:
const original = { src: 'foo' }
const images = [original]
const copy = images.slice()
original.src = 'baz'
console.log(copy)
Solution
You need to do a deep clone of the element. You can do this with the spread operator:
const original = { src: 'foo' }
const images = [original]
const copy = images.slice().map(o => ({ ...o }))
original.src = 'baz'
console.log(copy)
Another way to achieve the same goal is using JSON#stringify and JSON#parse:
const original = { src: 'foo' }
const images = [original]
const copy = JSON.parse(JSON.stringify(original))
original.src = 'baz'
console.log(copy)