Redux Toolkit
Last updated: 2026-11-02
Redux Toolkit Redux Toolkit
Redux Toolkit (RTK) is the officially recommended way to write Redux: createSlice generates a reducer and its actions in one step, configureStore wires up the devtools and the middleware for you, and the bundled Immer lets you update state by writing it as if it were mutable. The result is far less boilerplate than the classic hand-written setup, while the single source of truth stays exactly the same.
| Group | Routing & State Mgmt |
|---|---|
| Kind | Library |
| Since | Redux Toolkit 2.x |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
import { configureStore, createSlice } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: { // Immer: you can "mutate" directly
inc: state => { state.value += 1 },
addAmount: (state, action) => { state.value += action.payload }
}
})
export const { inc, addAmount } = counterSlice.actions
export const store = configureStore({ reducer: counterSlice.reducer })⚙️ Parameters
| action.payload | The data carried by a dispatch: in dispatch(addAmount(5)) the payload is 5, and it is declared by the reducer signature of createSlice. |
|---|
Returns：createSlice returns { reducer, actions }; configureStore returns the store; inside a component useDispatch gives the dispatch function and useSelector selects the state.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The three buttons dispatch inc, addAmount(10) and reset and the number follows - the Redux mental model of one source of truth plus pure dispatch updates (simulated with useReducer).💡 Key Points
🏷️ More Routing & State
💡 Related Cases
📚 Related Tutorials
❓ FAQ
