Redux Toolkit Basics
In this page:
Why Redux Toolkit Exists
Plain Redux requires writing action types, action creators, and reducers as separate, repetitive pieces. Redux Toolkit bundles all of this into fewer, friendlier functions, cutting out most of the boilerplate that made classic Redux feel heavy.
Note: Redux Toolkit is the default, recommended way to use Redux today — new projects should start here, not with plain Redux.
Warning: RTK doesn't replace Redux's core concepts (store, actions, reducers) — it just makes writing them far less verbose.
Example: Why Redux Toolkit Exists
// Run in your local React project (npm install required)
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
export const store = configureStore({
reducer: { counter: counterReducer },
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Defining State with createSlice
createSlice takes a name, initial state, and an object of reducer functions, and automatically generates matching action creators and a reducer for you. Each function you define becomes both an action you can dispatch and the logic that runs when it's dispatched.
Note: Thanks to Immer (used internally), you can write state.count += 1 directly inside a slice reducer instead of returning a new object manually.
Warning: This direct-mutation style only works safely INSIDE a createSlice reducer — never mutate state directly outside of Redux Toolkit's managed reducers.
Example: Defining State with createSlice
// Run in your local React project (npm install required)
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { count: 0 },
reducers: {
increment: state => { state.count += 1; },
},
});
export const { increment } = counterSlice.actions;
export default counterSlice.reducer;⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Using the Slice in a Component
With the slice and store set up, a component uses the same useSelector and useDispatch hooks from react-redux to read state and dispatch the generated action creators, exactly as with plain Redux — RTK only changed how the store/reducer are written, not how components consume them.
Note: Import the specific action creator (like increment) from the slice file, rather than constructing action objects by hand.
Warning: Dispatching an action whose type doesn't match any slice's reducers is simply ignored — double-check the imported action creator matches the slice actually registered in the store.
Example: Using the Slice in a Component
// Run in your local React project (npm install required)
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';
function Counter() {
const count = useSelector(state => state.counter.count);
const dispatch = useDispatch();
return <button onClick={() => dispatch(increment())}>Count: {count}</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Still writing switch-statement reducers by hand instead of using createSlice's simpler syntax.
- Forgetting that Redux Toolkit's Immer integration lets you mutate state directly inside a slice reducer — that's expected here, unlike plain Redux.
- Not registering a new slice's reducer in configureStore, so its actions have no effect.
- Redux Toolkit (RTK) is the officially recommended way to write Redux logic, reducing boilerplate significantly.
- createSlice generates action creators and a reducer together from a single object.
- configureStore replaces createStore with sensible defaults (like DevTools support) built in.
- RTK uses Immer internally, so slice reducers can write mutating code that's actually applied immutably.
Requires npm install @reduxjs/toolkit react-redux — not available via CDN in this sandbox.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: