Deep Dive into Redux Toolkit with React - Complete Guide

Video Description

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 #ReduxToolkit #Redux #React #Typescript