Define a feature module
A counter, form, or preferences feature needs local Redux state and update actions.
Redux Toolkit · Type Alias
Slice
createSlice defines a feature's state and case reducers, then generates its reducer, action creators, and action types. It is Redux Toolkit's standard way to package Redux logic for one slice of state.
How it works
A slice packages one feature's state update logic with the actions that trigger it. createSlice receives a name, initial state, and case reducers; it returns a slice object containing the combined reducer, generated action creators, action type information, and case reducers.
Syntax
createSlice({ name, initialState, reducers, extraReducers? })Parameters
| Name | Type | Description |
|---|---|---|
options | CreateSliceOptions<State, CaseReducers, Name> | Configuration object containing the slice name, initial state, reducer cases, and optionally extraReducers. |
Returns
A slice object containing the generated reducer, action creators, action types, and case reducers.
Key points
- createSlice accepts the feature name, initial state, and an object of case reducers in one configuration object.
- The API creates action creators and action types from the configured reducer cases.
- Reducer object keys determine the generated action-type constants.
- The returned slice reducer can be supplied to the root reducer alongside other feature reducers.
- Case reducers can use concise mutation-style updates while preserving immutable Redux state behavior.
- The documentation presents createSlice as the standard Redux logic approach.
Common mistakes
- Reducer keys become action-type suffixes, so changing a reducer key changes the generated action type.
Example: A typed 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.reducerCreates a typed counter slice, then exports its generated action creators and reducer.
When to use it
Assemble a store reducer
Several feature reducers need to be registered in one Redux store.
Handle external actions
A slice must react to actions emitted by another slice or middleware.
Write Immer-backed updates
A reducer needs concise immutable updates for nested state.
Interview questions
QWhat does createSlice generate?
createSlice takes one configuration object containing a name, initialState, and reducers. It returns a slice reducer and matching action creators, while internally using createAction and createReducer.
Follow-up: How can a slice respond to an action it did not generate? Use extraReducers to add handlers for external action types.
QHow are action types and creators derived?
Each key in reducers defines a case reducer. Redux Toolkit uses the slice name and reducer key to form the action type, and creates an action creator for that case reducer.
Follow-up: What does the generated action type look like? It combines the name and reducer key, such as test/increment.
QWhy is mutation-style reducer code allowed?
Reducer code may use mutating syntax because Redux Toolkit uses Immer internally. Immer converts those apparent mutations into immutable state updates.
Follow-up: What must a reducer avoid when using this style? It should not both mutate the draft state and return a separate new state value in the same case reducer.
Related
createActioncreateReducerconfigureStorecombineReducersextraReducersPayloadAction