title: How to update nested objects in Redux toolkits?
body: <p><strong>My initialState look like below:</strong></p>
  <pre><code>const initialState: Todos = {
    todos: [
      {
        id: 1,
        completed: true,
        title: &quot;setup redux&quot;,
        note: &quot;test1&quot;,
        steps: [
          { id: 1, completed: true, title: &quot;test2&quot; },
          { id: 2, completed: false, title: &quot;test2&quot; }
        ]
      },
      {
        id: 2,
        completed: false,
        title: &quot;using redux on typescript&quot;,
        note: &quot;test3&quot;
      }
    ]
  };
  </code></pre>
  <p>So right now my problem is how do I update &quot;step&quot; property in Redux toolkit?  I have done some research know there's a way to update nested objects by destructing my objects, but the thing is that if I want to update my &quot;step&quot; property, I have to know todo[id] and steps[id] to destruct my objects, but I think redux is not allowed to pass two action.payload at a time, so I wonder how to do this.</p>
  <p>For other CRUD actions  like delete and add , I create a new Todo and used updateTodo like below,but because I can't alter what's inside state without dispatch so I can't use this method to update steps (some update like toggle), and also I don't think this is a good idea for replacing nested objects.</p>
  <pre class="lang-js prettyprint-override"><code>//Redux-todoSlice.tsx
  updateTodo : (state,action:PayloadAction&lt;Todo&gt;)=&gt;{
        state.todos = state.todos.map( (todo)=&gt;
          todo.id === action.payload.id ? action.payload : todo
        )
      }
  
  //------------In my components
  
  const Rightbar: React.FC&lt;rightbarProps&gt; = ({ currentTodoId }) =&gt; {
  const todos  = useSelector((state:RootState)=&gt;
      state.todo.todos.filter((todo=&gt;todo.id === currentTodoId))
  );
   const currentTodo = todos[0]
  #....somecode
  const deleteStep = (id:number)=&gt;{
  
       if (currentTodo.steps!==undefined){
        const newSteps = currentTodo?.steps.filter((step)=&gt; step.id!==id)
        const newTodo:Todo = {...currentTodo,steps:newSteps}
        dispatch(updateTodo(newTodo)) 
       }
    }
  </code></pre>
  <p><strong>So do anyone know is there a better approach for this?</strong></p>