Redux Toolkit

What Redux is

Redux is a global state model with strict rules:

1. All global state lives in a single store.
2. State isn't changed directly — you send (dispatch) an action: an object that describes what happened ({ type: 'cart/add', payload: item }).
3. A reducer — a pure function (state, action) => newState — computes the new state.

UIdispatch(action)action→reducer(state, action) => newStatenew state→storeselector→UIre-renders

The benefit: every change goes through the same place → predictable, testable, with DevTools that show you every action and can "rewind" the history.

Redux Toolkit (RTK) is the official and current way to write Redux. "Classic" Redux (with switch, type constants, connect) is considered outdated.

The pieces of Redux Toolkit

A slice

// entities/cart/model/cart-slice.ts
import { createSlice, type PayloadAction } from '@reduxjs/toolkit'

type CartItem = { id: number; qty: number }

const cartSlice = createSlice({
  name: 'cart',
  initialState: [] as CartItem[],
  reducers: {
    added(state, action: PayloadAction<number>) {
      const item = state.find(i => i.id === action.payload)
      if (item) item.qty++                         // an allowed "mutation" — see Immer
      else state.push({ id: action.payload, qty: 1 })
    },
    removed(state, action: PayloadAction<number>) {
      return state.filter(i => i.id !== action.payload)
    },
  },
})

export const { added, removed } = cartSlice.actions
export const cartReducer = cartSlice.reducer

Immer: in createSlice you can write code that looks like it changes the state (state.push, item.qty++). RTK uses the Immer library, which turns these "mutations" into a new, immutable object. The rules from References and immutability still apply — only the syntax is shorter.

The store and typed hooks

// shared/store/store.ts
export const makeStore = () => configureStore({ reducer: { cart: cartReducer } })

export type AppStore = ReturnType<typeof makeStore>
export type RootState = ReturnType<AppStore['getState']>
export type AppDispatch = AppStore['dispatch']

export const useAppSelector = useSelector.withTypes<RootState>()
export const useAppDispatch = useDispatch.withTypes<AppDispatch>()

'use client'
const count = useAppSelector(state => state.cart.length)
const dispatch = useAppDispatch()
<button onClick={() => dispatch(added(product.id))}>Add</button>

Redux with the Next.js App Router

• The store is created per request, not as a module-level global variable — otherwise, on the server, one user's data would reach another. That's why makeStore() is a function.
• You put it in a Client Component StoreProvider ('use client'), created once with useRef / useState.
• Server Components can't read the store — they get their data directly.

When to use Redux Toolkit

Summary

• Redux = one store, actions, pure reducers; RTK is the current way to write it.
• createSlice + Immer = short code, an immutable result.
• In Next: a store per request, inside a Client Component; for server data → RTK Query.

Official sources

• Redux Toolkit — Quick Start
• Redux — Usage with Next.js
• Redux — Style Guide
• Immer