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
🕒 Timestamps:
Intro:
- 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
CodeAlong:
- 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
🗄 Resources:
Github Starting Repo: https://github.com/angle943/redux-toolkit-comparison
Github Finished Code: https://github.com/angle943/redux-toolkit-comparison/tree/finished-version
Redux Toolkit Official Website: https://redux-toolkit.js.org/
Mark Erikson’s blog on Redux Toolkit: https://blog.isquaredsoftware.com/2019/10/redux-starter-kit-1.0/
Why RTK uses Redux Thunk over Redux Saga: https://blog.isquaredsoftware.com/2020/02/blogged-answers-why-redux-toolkit-uses-thunks-for-async-logic/
Immutable Update Pattern: https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns/#immutable-update-patterns
Immer: https://immerjs.github.io/immer/docs/introduction
RTK v1.3.0-alpha - https://github.com/reduxjs/redux-toolkit/releases/tag/v1.3.0-alpha.10
🔑 Key Concepts:
- Redux Toolkit (RTK)
- React
- Typescript
- Immer
- configureStore
- createSlice
#react #redux #javascript #web-development #programming
