Deep Dive into Redux Toolkit with React – Complete Guide

In this video we will take a comprehensive view into Redux Toolkit (RTK) – the official way of setting up a redux application. We will look into all the features it comes with, go over the various functions it comes included with, and we will also set up a simple redux application in React in both the traditional way and also the redux toolkit way to compare.

️ Corrections:
– At 3:12:43 I compare the bundle size of Redux and Redux Toolkit using npm page’s “Unpacked Size” number. This is misleading because this size includes all parts of the package, including dev-only packages. A better measure to compare the actual size of the package that will impact your code is using Bundlephobia. According to Bundlephobia, the size of redux-toolkit (as of version 1.2.5) is 29.8kb, whereas redux is at 7.3kb. While RTK is still bigger, it is no way as big as I show in the video. Not only that, the redux team + immer team is still hard at work to better tree-shaking within the Immer library, so we will most definitely see a decrease in this size in the near future


0:30 Quick overview on Redux Toolkit
2:42 Video roadmap
4:50 Pre-requisites
6:35 What are the packages included in RTK?
14:13 What is Immer (And Immutable Update Patterns)?
19:40 Quick overview of the functions in RTK
34:22 How to install RTK into our apps

37:48 Get your starter code!
46:00 Old Redux Setup Begins
48:01 Visual Model of our app
51:50 (Old) Creating our action type constants
53:26 (Old) Creating our action creators
1:05:09 (Old) Creating our reducers
1:18:52 (Old) Setting up our redux store
1:25:21 (Old/RTK) Connecting our functional component with Redux
1:40:02 New RTK setup begins
1:43:02 (RTK) Creating our slices via createSlice
2:12:24 (RTK) Setting up our store via configureStore
2:27:48 Comparing old code vs RTK code

Going over RTK Functions:
2:29:53 configureStore() and getDefaultMiddleware()
2:36:09 createSlice()
2:45:05 Immutable Update logic vs Immer logic comparison
2:49:43 Pitfalls of Immer to watch out for
2:57:03 createAction()
3:02:01 createReducer()
3:04:43 other RTK functions

Q&A & Summary:
3:05:49 How do we handle async logic using RTK???
3:12:43 How big is the package compared to redux?
3:14:02 Didn’t useContext and useReducer kill off redux?
3:14:51 Summary


Github Starting Repo:
Github Finished Code:
Redux Toolkit Official Website:
Mark Erikson’s blog on Redux Toolkit:
Why RTK uses Redux Thunk over Redux Saga:
Immutable Update Pattern:
RTK v1.3.0-alpha –

Key Concepts:

– Redux Toolkit (RTK)
– React
– Typescript
– Immer
– configureStore
– createSlice

#ReduxToolkit #Redux #React #Typescript


Leave a Reply

Your email address will not be published. Required fields are marked *