React Academy · Lesson

Redux Toolkit Slices & createSlice

Create reducer logic with createSlice, define actions, and connect to the Redux store.

Redux Toolkit Slices & createSlice is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will create Redux Toolkit slices with createSlice, define actions and reducers in one place, and connect them to a Redux store.

What Is Redux Toolkit?

Redux Toolkit (RTK) is the official, opinionated way to write Redux. It eliminates boilerplate by combining reducers, action creators, and initial state into a single createSlice() call.

Installation

Install Redux Toolkit and react-redux.

npm install @reduxjs/toolkit react-redux

createSlice

Call createSlice() with a name, initialState, and reducers object. RTK generates action creators and action types automatically.

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1; },
    decrement: state => { state.value -= 1; },
    incrementBy: (state, action) => { state.value += action.payload; },
  },
});

export const { increment, decrement, incrementBy } = counterSlice.actions;
export default counterSlice.reducer;

Immer Under the Hood

RTK uses Immer internally, so you can write mutating reducer logic (`state.value += 1`) safely. Immer converts it to an immutable update behind the scenes.

Configuring the Store

Create the Redux store with configureStore() and add your slices as reducers.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Providing the Store

Wrap your app in a Provider from react-redux, passing the store.

import { Provider } from 'react-redux';
import { store } from './store';

createRoot(document.getElementById('root')).render(
  <Provider store={store}><App /></Provider>
);

useSelector and useDispatch

Read state with useSelector and dispatch actions with useDispatch. Use typed versions for TypeScript.

import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const value = useSelector(state => state.counter.value);
  const dispatch = useDispatch();
  return (
    <>
      <p>{value}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(incrementBy(5))}>+5</button>
    </>
  );
}

TypeScript Types

Export RootState and AppDispatch types from store.ts for fully typed hooks.

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
// Then use typed hooks:
const value = useSelector((s: RootState) => s.counter.value);

Extra Reducers

The extraReducers field handles actions from other slices or createAsyncThunk. Use the builder callback pattern to add cases.

extraReducers: (builder) => {
  builder.addCase(fetchUser.fulfilled, (state, action) => {
    state.user = action.payload;
  });
}

Quick Check

Why can you write mutating code like `state.value += 1` inside a Redux Toolkit reducer?

Recap

createSlice combines name, initialState, and reducers into one object. Immer enables mutable-style reducer code. configureStore assembles slices. useSelector reads state; useDispatch dispatches actions.

Up Next

Next lesson: **Async Logic with createAsyncThunk** — you will handle API calls in Redux with lifecycle action types.

Frequently asked questions

Is the “Redux Toolkit Slices & createSlice” lesson free?

Yes — the full text of “Redux Toolkit Slices & createSlice” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Redux Toolkit Slices & createSlice”?

Create reducer logic with createSlice, define actions, and connect to the Redux store. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Redux Toolkit Slices & createSlice” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy