Draft State

Definition

The term used by Immer to describe the Proxy object you interact with inside an RTK reducer. It represents the 'in-progress' changes before they become the final immutable state.

Explain Like I'm New

A temporary scratchpad. Inside `createSlice`, the `state` variable passed into your reducer is not the REAL state. It is a 'Draft'. You can scribble all over the draft, and when the function ends, Immer prints a final, clean copy based on your scribbles.

Real World Example

Modifying `state.user.name = 'Bob'` inside a slice reducer.

Common Use Cases

•Understanding RTK reducer mechanics

Interactive Example

import { createSlice, current } from '@reduxjs/toolkit';

const slice = createSlice({
  name: 'example',
  initialState: { items: [] },
  reducers: {
    doSomething: (state) => {
      // ❌ Logs a weird Proxy object. Very confusing!
      console.log(state);

      // ✅ Logs the actual JavaScript data perfectly!
      console.log(current(state));
      
      // Mutate the draft state safely
      state.items.push(1);
    }
  }
});

Interview Questions

basic

Can you `console.log(state)` directly inside an RTK reducer to see your data?

intermediate

How do you properly log the Draft State in RTK so you can read it?

Flash Cards

Question

Console log directly?

Click to reveal answer

Answer

No! If you `console.log(state)`, you will see a massive, unreadable `Proxy` object, not your actual data.

Question

How to log properly?

Click to reveal answer

Answer

RTK provides a utility called `current()`. You must import it and log `console.log(current(state))` to read the plain data.