How do you configure a Redux Toolkit store in a React application?

Create the store with configureStore, add slice reducers to its reducer object, and wrap the React app with Provider.

What are extraReducers in Redux Toolkit used for?

extraReducers let a slice respond to actions defined elsewhere, especially async thunk pending, fulfilled, and rejected actions.

How does Redux Toolkit handle immutable nested state updates?

Redux Toolkit uses Immer, allowing reducer code that looks like mutation while it safely produces immutable state updates.

Free Course Image Redux toolkit tutorial

Free online course Redux toolkit tutorial

Duration of the online course: 3 hours and 24 minutes

New

Master Redux Toolkit for React apps with a free course: cleaner state management, async data fetching, DevTools tips, and a workflow that scales fast.

In this free course, learn about

What Redux is and why it’s used for predictable state management in React apps
Redux core concepts: store, actions, reducers (shop scenario mental model)
Redux principles: single source of truth, state is read-only, changes via pure reducers
How to write action creators, action types, and handle updates in reducers
Store responsibilities: hold state, dispatch actions, subscribe to changes
Managing multiple features with multiple reducers and combineReducers
Using bindActionCreators to simplify dispatching action creators
Using Immer/Redux Toolkit to safely write immutable updates (including nested state)
Middleware purpose and flow; adding logger middleware for debugging
Async Redux patterns: loading/data/error state and async actions with thunk
Why Redux Toolkit exists (boilerplate, complex setup) and its key APIs
Creating slices (cake/ice cream), extraReducers, and async thunks in RTK
Configuring an RTK store and enabling Redux DevTools extension
Integrating RTK with React: Provider, useSelector, useDispatch; setup/tools & TS support

About the free online course

Level up your React web development skills by learning modern state management with Redux Toolkit. This free online course is built to help you move from scattered local state and prop drilling to a clear, scalable architecture that teams rely on in real projects. You will understand not only how Redux works, but why it works, so you can make better decisions when building user interfaces that grow in complexity.

You start by grounding the fundamentals: what Redux is, the problems it solves, and the core ideas behind predictable state updates. With simple scenarios, you will see how actions describe what happened, reducers define how state changes, and the store coordinates everything. From there, the learning shifts into practical patterns you can apply immediately, including organizing logic as your app expands and handling multiple parts of state without turning your codebase into a mess.

As you progress, you will explore essential tools that make Redux easier to work with in everyday development. You will see how immutability is handled more ergonomically, how middleware fits into the request-response lifecycle, and how to reason about side effects. A key focus is asynchronous workflows: fetching data, tracking loading and error states, and keeping your UI responsive and reliable while network requests are in flight.

Next, you transition into Redux Toolkit, the recommended way to write Redux today. You will learn how slices reduce boilerplate, how to configure the store with sensible defaults, and how to structure features so each part of your application stays cohesive. You will also use patterns like extra reducers and async thunks to keep async logic consistent and maintainable, which is crucial for apps that depend on APIs.

Finally, you connect everything to a React project with the Provider setup and the core hooks that teams use in production. You will know how to read state efficiently, dispatch actions with confidence, and take advantage of developer tooling to debug and understand state transitions. By the end, you will be prepared to build React applications that are easier to extend, test, and collaborate on, using a professional Redux Toolkit workflow from start to finish.

Course content

Video class: Redux Toolkit Tutorial - 1 - Intro feat. React 15m
Exercise: _What is Redux?
Video class: Redux Toolkit Tutorial - 2 - Getting Started 02m
Exercise: What is the first step in setting up a Redux project according to the video?
Video class: Redux Toolkit Tutorial - 3 - Three Core Concepts 04m
Exercise: What are the three core concepts in Redux as explained in the shop scenario?

Video class: Redux Toolkit Tutorial - 4 - Three Principles 06m
Exercise: What is the first principle of Redux as described in the video?
Video class: Redux Toolkit Tutorial - 5 - Actions 04m
Exercise: _What is an action creator in Redux?
Video class: Redux Toolkit Tutorial - 6 - Reducers 05m
Exercise: What is a Reducer in a JavaScript Application?

Video class: Redux Toolkit Tutorial - 7 - Store 12m
Exercise: _What is the responsibility of the redux store?
Video class: Redux Toolkit Tutorial - 8 - Restocking Cakes 05m
Exercise: What is the main purpose of restocking cakes in the Redux pattern example?
Video class: Redux Toolkit Tutorial - 9 - Bind Action Creators 02m
Exercise: _What is the purpose of the `bindActionCreators` function in Redux?

Video class: Redux Toolkit Tutorial - 10 - Cakes and Ice Creams 03m
Exercise: What is the main reason for having separate shopkeepers in the shop scenario?
Video class: Redux Toolkit Tutorial - 11 - Multiple Reducers 08m
Exercise: _What is the reason for implementing multiple reducers in the code for managing cakes and ice creams?
Video class: Redux Toolkit Tutorial - 12 - Combine Reducers 03m
Exercise: What is the role of 'combineReducers' in Redux applications?

Video class: Redux Toolkit Tutorial - 13 - Immer 06m
Exercise: _What library can help when working with Redux to update nested states?
Video class: Redux Toolkit Tutorial - 14 - Middleware 05m
Exercise: What is the function of middleware in Redux?
Video class: Redux Toolkit Tutorial - 15 - Async Actions 08m
Exercise: _What are the three properties of the state object typically used for data fetching in Redux?

Video class: Redux Toolkit Tutorial - 16 - Redux Thunk Middleware 08m
Exercise: How to set up asynchronous action creators with Redux?
Video class: Redux Toolkit Tutorial - 17 - Redux Toolkit Intro 03m
Exercise: _What are the two main concerns that developers had when using Redux, which led to the creation of Redux Toolkit?
Video class: Redux Toolkit Tutorial - 18 - Project Setup 03m
Exercise: What is the first step in setting up a Redux Toolkit project?

Video class: Redux Toolkit Tutorial - 19 - Cake Slice 07m
Exercise: _What is the purpose of appending "slice" to the file name in Redux toolkit conventions?
Video class: Redux Toolkit Tutorial - 20 - Configuring Store 05m
Exercise: How do you configure a Redux Toolkit store?
Video class: Redux Toolkit Tutorial - 21 - Ice Cream Feature 05m
Exercise: _What is the purpose of step 2 in the implementation of the ice cream feature using Redux Toolkit?

Video class: Redux Toolkit Tutorial - 22 - Logger Middleware 04m
Video class: Redux Toolkit Tutorial - 23 - Extra Reducers 08m
Exercise: _What are extra reducers in Redux Toolkit and how can they be defined?
Video class: Redux Toolkit Tutorial - 24 - Async Thunks 13m

Video class: Redux Toolkit Tutorial - 25 - React Project Setup 09m
Exercise: _What is the recommended tool to create a new React project in the Redux Toolkit tutorial by Codevolution?
Video class: Redux Toolkit Tutorial - 26 - Provider 03m
Video class: Redux Toolkit Tutorial - 27 - useSelector 03m
Exercise: _What is the purpose of the use selector hook in Redux?

Video class: Redux Toolkit Tutorial - 28 - useDispatch 05m
Video class: Redux Toolkit Tutorial - 29 - Redux Devtools 05m
Exercise: _What is the first step to use the Redux Dev Tools Extension with Redux Toolkit?
Video class: Redux Toolkit Tutorial - 30 - Fetching Data 07m
Video class: Redux Toolkit Tutorial - 31 - TypeScript Support 13m
Exercise: _What libraries are required for the app in the Redux toolkit tutorial by Codevolution?

Learn aboutJavaScript

Explore the best free online JavaScript courses with certificates and build in-demand web development skills at your own pace. Learn JavaScript fundamentals, DOM manipulation, ES6, APIs, frameworks, and more through beginner-friendly and advanced classes. Enroll today, earn a certificate, and strengthen your resume for developer career opportunities.

Learn aboutReact JS

Explore the best free online React JS courses and learn to build fast, interactive web applications with hands-on lessons for beginners and aspiring developers. Study React components, hooks, state, props, routing, and modern front-end development at your own pace. Enroll today for free training and earn a certificate to showcase your React JS skills.