Redux Toolkit — The Official Modern Way to Write Redux Logic

What it is

Redux Toolkit (RTK) is the official, opinionated, batteries-included toolset for efficient Redux development. It eliminates the boilerplate that made Redux painful: no more hand-written action creators, action types, or switch-case reducers. createSlice generates all of these from a single configuration object, and Immer handles immutability under the hood.

It targets React developers who use Redux for state management and want to write less code with fewer bugs. It is also suitable for teams migrating from legacy Redux codebases.

How it saves time or tokens

Traditional Redux requires writing action type constants, action creator functions, and reducer switch statements separately. RTK's createSlice reduces this to a single object with a name, initial state, and reducer functions. RTK Query replaces hand-written API fetching logic (thunks, loading states, caching) with a declarative API definition. A typical Redux feature that took 4 files now fits in 1.

How to use

1. Install Redux Toolkit: npm install @reduxjs/toolkit react-redux.
2. Create a slice with createSlice() that defines state shape and reducers.
3. Configure the store with configureStore() and provide it to your React app.

Example

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
    addAmount: (state, action) => { state.value += action.payload },
  },
})

export const { increment, decrement, addAmount } = counterSlice.actions

const store = configureStore({
  reducer: { counter: counterSlice.reducer },
})

Related on TokRepo

• Coding tools — Frontend frameworks and development tools
• Featured workflows — Discover popular developer workflows

Common pitfalls

• Immer's 'mutative' syntax in createSlice only works inside reducer functions. Writing state.value = x outside a reducer mutates state directly and causes bugs.
• RTK Query cache invalidation requires proper tag definitions. Without tags, cached data can become stale without automatic refetching.
• Migrating a large legacy Redux codebase to RTK should be incremental. Convert one slice at a time rather than rewriting everything at once.