Redux Toolkit · Function

createSlice

createSlice defines a feature's Redux state and case reducers, then generates the matching reducer, action creators, and action types. It uses Immer so reducer code can express immutable updates with mutation-like syntax.

How it works

Call createSlice with a slice name, initial state, and case reducers. It builds one reducer for the slice and generates corresponding action types and action creators; Immer lets reducer code express immutable updates with mutation-like syntax.

Syntax

function createSlice({ name, initialState, reducers, extraReducers?, reducerPath?, selectors? })

Parameters

Name	Type	Description
`name`	`string`	String used as the prefix for generated action types.
`initialState`	`State`	Initial state value for the slice reducer.
`reducers`	`Record<string, ReducerFunction \| ReducerAndPrepareObject>`	Object of case reducer functions; keys generate actions.
`extraReducers`	`(builder: ActionReducerMapBuilder<State>) => void`	Optional builder callback for adding additional reducers.
`reducerPath`	`string`	Optional preferred reducer location used by combineSlices and slice.selectors; defaults to name.
`selectors`	`Record<string, (sliceState: State, ...args: any[]) => any>`	Optional selector definitions receiving slice state first.

Returns

A slice object containing the generated reducer, action creators, action types, and related slice utilities.

Key points

The function is configured with a name, initial state, and an object of case reducers.
Every case reducer key produces a corresponding action creator and action type.
Use createSlice as the usual Redux Toolkit entry point for defining feature state and its update logic.
The generated actions and reducer are assembled internally from Redux Toolkit's lower-level APIs.
The reducers object maps action-related names to functions that update the slice state.
Use extraReducers when the slice must respond to actions defined elsewhere.

Common mistakes

Provide an initialState value that matches the slice state shape so the generated reducer can initialize correctly.

Example: Create a counter slice

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

type CounterState = { value: number }
const initialState: CounterState = { value: 0 }

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value += 1
    },
    add(state, action: PayloadAction<number>) {
      state.value += action.payload
    }
  }
})

export const { increment, add } = counterSlice.actions
export default counterSlice.reducer

Defines a counter slice and generates action creators alongside its reducer.

When to use it

Define feature state

A feature owns state and the actions that update it.

Reduce Redux boilerplate

Several update handlers need generated action creators and types.

Write Immer-backed updates

Reducer logic needs readable array or object updates.

Handle external actions

A slice must react to actions from another slice or middleware.

Interview questions

QWhat does createSlice provide?

createSlice accepts a configuration object containing name, initialState, and reducers. It generates action types and action creators from the reducer keys and combines the case reducers into one slice reducer.

Follow-up: How are generated action types formed? They use the slice name together with each case reducer name.

QHow do reducers become actions?

Each key in reducers identifies a case reducer. Redux Toolkit uses those definitions to create matching action creators and a reducer that handles the corresponding actions.

Follow-up: What can handle actions not declared in reducers? Use extraReducers with its builder callback to add additional reducer cases.

QWhy may case reducers mutate state?

Redux Toolkit uses Immer internally, so a case reducer can write mutation-like code such as state.push or state.value += 1. Immer converts that logic into an immutable state update.

Follow-up: Why is this safe? The reducer receives an Immer-wrapped draft, while the resulting state remains immutable from Redux's perspective.

createAction
createReducer
configureStore
combineSlices
PayloadAction
extraReducers
selectors

Source: createSlice | Redux Toolkit. Checked 2026-10-15.