Как менять стейт редакса иммутабельно?

Question

[BogdanZots]

Есть стейт, в котором находится массив объектов:

const initialState = {
  targetsArray: []
};

У меня есть логика удаление из стейта объекта по ключу.
Что я делаю для этого:
1) Копирую стейт const stateCopy = { ...state };
2) Копирую стейт ещё раз что бы избавиться от передачи значения по ссылке
3) Черезarr.filter оставляю только те эл. которые мне нужны

stateCopy.targetsArray = [...stateCopy.targetsArray];

const remindReducer = (state = initialState, action) => {
  const stateCopy = { ...state };
  switch (action.type) {
    case REMOVE_TARGET_ITEM:
      stateCopy.targetsArray = [...stateCopy.targetsArray];
      console.log(stateCopy.targetsArray[0] === state.targetsArray[0]); // тут будет TRUE , ссылочные значения сохраняются,почему?
      stateCopy.targetsArray = stateCopy.targetsArray.filter(
        (task) => task.id !== action.payload.uId
      );
      return {
        ...stateCopy,
      };
    default:
      return state;
  }
};

Вопрос такой: правильно ли я изменяю стейт? Так как

stateCopy.targetsArray[0] === state.targetsArray[0]

- TRUE, то думаю, что нет. Что я должен сделать, чтобы изменять его иммутабельно и избавиться от ссылочной зависимости?

Comments

[Алексей]

Возьми immer и забудь про все эти пляски

Answer 1

[Алексей Уколов]

return {
   ...state,
   targetsArray: state.targetsArray.filter((task) => task.id !== action.payload.uId)
}

stateCopy.targetsArray[0] === state.targetsArray[0]

Здесь как раз всё правильно. Иммутабельность не предполагает, что вы будете клонировать всё до последнего потомка. Вы возвращаете новый массив, чтобы компонент, который от него зависит, понял, что надо перерендериться. А его дочерние компоненты перерендериваться уже не будут, если их конкретный объект никак не изменился.