Redux Toolkit

Learn simplified Redux with Redux Toolkit.

Redux Toolkit

Redux Toolkit (RTK) is the official package that simplifies the verbose boilerplate of classic Redux. Creating a store with configureStore and writing reducers with createSlice needs less code. In classic Redux every action type, action creator and reducer was written separately; RTK gathers them in one place.

Install with npm install @reduxjs/toolkit react-redux. configureStore takes a reducer key and sets up middleware automatically. The react-redux package provides the Provider and the useDispatch, useSelector hooks. RTK is the default starting point for modern Redux projects.

A store with configureStore

You create a store with configureStore({ reducer: { counter: counterReducer } }). The reducer field is an object; each key represents a slice. RTK combines them automatically; you do not need combineReducers.

You wrap the store at the app root with <Provider store={store}>. This way all components can access the store via useDispatch and useSelector. This pattern is done once in the App component's return.

Exercise Create the store

Complete the empty file. Import configureStore from @reduxjs/toolkit. Define export const store with configureStore({ reducer: { counter: counterReducer } }). Assume counterReducer is exported elsewhere.

Show example solution

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

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

Test yourself

Match the RTK parts

configureStore

Creates the store
createSlice

Writes a slice
Provider

Applies the store
react-redux

Provides the hooks
What does RTK reduce?
- The amount of boilerplate code
- Animation quality
- The app size (none)
- Camera resolution
Show answer

Animation quality — RTK reduces the amount of boilerplate code.

The configureStore call

const store = configureStore({ reducer: { ____: counterReducer } });

Show answer

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

Next lesson: Slice

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies