как избежать имитации в редуксе

Question

У меня проблема с мутацией, которую я не могу понять, вот мой код:

const copyItems = Object.assign({}, state.items);

for(const typeItems of Object.values(copyItems[0])){
    for(let items of typeItems){
        if(items.id === action.item.id){
            Object.assign(items, action.item);
        }
    }
}

return state.items;

Я также пытался использовать const copyItems = state.items.slice().map(o => ({...o}), но даже при возврате состояния значение изменяется.Почему?

Answer 1

Ваш state.items является вложенным объектом. Тогда вы можете сделать это следующими способами:

const newObj = JSON.parse(JSON.stringify(obj)) 

перейти по этой ссылке

или вы можете использовать lodash

const newObj = _.cloneDeep(obj)

Answer 2

Ваш copyItems копирует state.items, который будет иметь ту же ссылку.

const copyItems = Object.assign({}, state.items);

Тогда вы мутируете state.items, когда делаете следующее.

Object.assign(items, action.item);

Ответ от @bird может сработать, но у вас возникнут проблемы, если у вас круговая структура или если у объекта есть ссылки на другие объекты, тогда вы потеряете все эти ссылки. Но это действительно зависит от того, чего вы пытаетесь достичь.

Использование Object.assign кажется опасным с точки зрения функционального программирования, требуемого Redux. Должно быть хорошо, если вы используете его на пустом объекте (Object.assign({}, ...)), но не на существующем объекте.

У меня есть пример кода ниже, который может помочь вам.

const state = {items:[{id:0,value:"default"},{id:1,value:"default"}]};
const action = {item:{id:0,value:"new"}};
const copyItems = state.items.map(o => o.id === action.item.id ? action.item : o);

console.log(state.items, copyItems);