Redux Mastery: Automating RTK Slice Generation

JSON to Redux Slice: Scaffolding RTK State from API Shapes

Redux Toolkit's createSlice is the modern way to write Redux — no action types, no action creators, no switch statements. When you have a JSON response from an API, generating the slice skeleton saves the tedious work of writing the state interface, initial state object, and boilerplate reducers. You get a starting point you can immediately extend with async thunks and selectors.

Live Example: E-Commerce Cart State

// Input JSON (API response shape)
{
  "cart_id": "crt_9921",
  "user_id": "usr_4421",
  "item_count": 3,
  "subtotal": 124.99,
  "currency": "USD",
  "is_locked": false,
  "coupon_code": null
}

// Generated Redux Slice
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface RootState {
  cart_id: string;
  user_id: string;
  item_count: number;
  subtotal: number;
  currency: string;
  is_locked: boolean;
  coupon_code: string | null;
}

const initialState: RootState = {
  cart_id: '',
  user_id: '',
  item_count: 0,
  subtotal: 0,
  currency: '',
  is_locked: false,
  coupon_code: null,
};

export const rootSlice = createSlice({
  name: 'root',
  initialState,
  reducers: {
    setRoot: (state, action: PayloadAction<Partial<RootState>>) => {
      Object.assign(state, action.payload);
    },
    resetRoot: () => initialState,
  },
});

export const { setRoot, resetRoot } = rootSlice.actions;
export default rootSlice.reducer;

Rename and Extend: Adding Async Thunks

The generated slice gives you synchronous state management out of the box. For API calls, add createAsyncThunk:

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

// Fetch cart from API
export const fetchCart = createAsyncThunk(
  'cart/fetchCart',
  async (userId: string, { rejectWithValue }) => {
    const res = await fetch(`/api/cart?user_id=${userId}`);
    if (!res.ok) return rejectWithValue(await res.text());
    return res.json() as Promise<CartState>;
  }
);

interface CartState {
  cart_id: string;
  user_id: string;
  item_count: number;
  subtotal: number;
  currency: string;
  is_locked: boolean;
  coupon_code: string | null;
  // Add loading state not in the original JSON
  status: 'idle' | 'loading' | 'succeeded' | 'failed';
  error: string | null;
}

const initialState: CartState = {
  cart_id: '',
  user_id: '',
  item_count: 0,
  subtotal: 0,
  currency: 'USD',
  is_locked: false,
  coupon_code: null,
  status: 'idle',
  error: null,
};

export const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    applyCoupon: (state, action: PayloadAction<string>) => {
      state.coupon_code = action.payload;
    },
    clearCart: () => initialState,
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchCart.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchCart.fulfilled, (state, action) => {
        Object.assign(state, action.payload);
        state.status = 'succeeded';
      })
      .addCase(fetchCart.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.payload as string;
      });
  },
});

Wiring It to the Store and React Components

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';

export const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// Typed hooks (create once, use everywhere)
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

// CartHeader.tsx
import { useAppSelector, useAppDispatch } from '../store';
import { applyCoupon } from '../cartSlice';

export function CartHeader() {
  const { item_count, subtotal, currency } = useAppSelector(s => s.cart);
  const dispatch = useAppDispatch();

  return (
    <header>
      <span>{item_count} items — {currency} {subtotal.toFixed(2)}</span>
      <button onClick={() => dispatch(applyCoupon('SAVE10'))}>Apply coupon</button>
    </header>
  );
}

Redux Toolkit vs Zustand vs React Context

• Redux Toolkit: Best for large apps with complex state, time-travel debugging (Redux DevTools), or when multiple features read/write the same state. Boilerplate is much lower than classic Redux. Good when you need middleware (logging, analytics).
• Zustand: Less setup than RTK, no Provider required, great for simple-to-medium global state. No DevTools integration out of the box (though a middleware exists). Simpler mental model.
• React Context: Built-in, zero dependencies, but causes all consumers to re-render on every state change. Best for low-frequency updates (theme, auth) — not for high-frequency state like shopping carts.

Frequently Asked Questions

Do I need to rename RootState and rootSlice? Yes — the generator uses "root" as a placeholder. Rename to something meaningful like CartState / cartSlice. Also rename the name: 'root' field, as it's the key used in Redux DevTools and action type prefixes.

What's the difference between setRoot and individual field setters? The generated setRoot(Partial<State>) accepts any subset of fields — convenient but coarser-grained. In real slices, write specific reducers for discrete actions (applyCoupon, clearCart) to make DevTools history readable.

Should I use RTK Query instead of createAsyncThunk? For data fetching specifically, RTK Query (built into @reduxjs/toolkit) is better than createAsyncThunk — it handles caching, deduplication, and invalidation automatically. Use createAsyncThunk for mutations and side effects that aren't pure data fetching.

Is my JSON sent to a server? No. TypeMorph runs entirely in your browser — none of your data leaves your machine.