Redux 状态正在奇怪地变化

Question

我有 2 个不同的状态，一个状态包含第二个状态的一部分。事实上，当第二个状态改变时，第一个状态中的内容也改变了，我无法处理为什么。

这是我更改第二状态的时间：

    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;
}

第一个状态是在随后提供给减速器的操作中以这种方式访问：

let img = getState().ImgReducer.images;

在减速器中，我有一些相关的功能可以使用：

                const copy = images.slice();
                items.image = copy[idGiven];

只要图像状态改变，这一行就会改变。即使通过复制，这也会改变，我不明白为什么。我只想在我的第一个状态下拥有这个东西的副本，对于这个状态，我不关心之后是否更改图像。

我觉得我正在直接访问 ImgReducer 状态，所以每当它发生变化时我都会进行更新，但我不知道如何避免这种情况。

谢谢

Answer 1

当您在数组上使用 slice 时，返回的数组不是真正的克隆。相反，你得到了数组的 shallow copy 。因此，数组中的副本和原始对象都指向相同的内存引用。

来自 MDN 上的 Array#slice 文档：

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.

您可以通过以下示例验证这一点：

const original = { src: 'foo' }
const images = [original]
const copy = images.slice()

original.src = 'baz'
console.log(copy)

解决方案

您需要对元素进行深度克隆。您可以使用传播运算符执行此操作：

const original = { src: 'foo' }
const images = [original]
const copy = images.slice().map(o => ({ ...o }))

original.src = 'baz'
console.log(copy)

实现相同目标的另一种方法是使用 JSON#stringify 和 JSON#parse:

const original = { src: 'foo' }
const images = [original]
const copy = JSON.parse(JSON.stringify(original))

original.src = 'baz'
console.log(copy)

Redux 状态正在奇怪地变化

Redux states are strangely changing

reactjs

redux

redux-thunk

解决方案