Redux Toolkit Basics

Redux Toolkit is like a pre-assembled furniture kit for Redux — it comes with all the tools built in so you don't have to buy each screwdriver separately.

In this page:

Why Redux Toolkit Exists
Defining State with createSlice
Using the Slice in a Component

Syntax

markup

const sliceName = createSlice({
  name: "sliceName",
  initialState: { value: 0 },
  reducers: {
    actionName(state, action) {
      state.value += action.payload;
    },
  },
});

export const { actionName } = sliceName.actions;
export default sliceName.reducer;

const store = configureStore({ reducer: { sliceName: sliceName.reducer } });

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

markup

// 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

markup

// 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

markup

// 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.

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson Introduction to Redux Next Lesson → Store, Actions, and Reducers

Redux Toolkit Basics

Why Redux Toolkit Exists

Defining State with createSlice

Using the Slice in a Component

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code