RTK Immer - copy item approach

[MicMalx]

Hi,

I created a simple todo app, with 3 simple functions: addTodo, copyTodo, changeSecondTodoValue. "copyTodo" function makes a copy of an existing todo, changes id and pushes it at the and of array.

code looks like this:

import { createSlice } from '@reduxjs/toolkit';
const initialState = {
  todos: [],
};

export const todoSlice = createSlice({
  name: 'todo',
  initialState,
  reducers: {
    addTodo: (state) => {
      state.todos.push({ id: '1', obj: { nestedObj: { message: 'todo1' } } });
    },
    copyTodo: (state) => {
      const copiedTodo = state.todos.find((todo) => todo.id === '1');
      state.todos.push({ ...copiedTodo, id: '2' });
    },
    changeSecondToDoValue: (state) => {
      state.todos[1].obj.nestedObj.message = 'changing boom'
    }
  },
});

export const { addTodo, copyTodo, changeSecondToDoValue } = todoSlice.actions;
export default todoSlice.reducer;

In my component I dispatch addTodo then copyTodo and finally changeSecondTodoValue.

I was wondering how immer handles references of nested objects so I added this code in my component:

const count = useSelector((state) => {
    return state.counter.todos;
  });
  if (count.length === 2) {
    console.log(count);
    console.log(count[0].obj === count[1].obj);
  }

And here are logs:

As I can see after dispatching "copyTodo" the property "obj" of both todos reference the same object what often causes problem of unintentional editing values in more than one place. However editing value with "changeSecondTodoValue" function using RTK approach doesn't make problem in this case. I know the reference changes because of how immer works behind the scenes, I know the mechanism.

I wonder if there can be scenario where it causes problem or it's not necessary and I shouldn't care as long as I follow RTK immer approach. Or maybe it would be better to copyTodo with cloneDeep from lodash library like that:

copyTodo: (state) => {
      const copiedTodo = state.todos.find((todo) => todo.id === '1');
      state.todos.push({ ...cloneDeep(copiedTodo), id: '2' });
    },