Loading...

#ReduxToolkit #Redux #React

Deep Dive into Redux Toolkit with React - Complete Guide

5,518 views

Loading...

Loading...

Transcript

The interactive transcript could not be loaded.

Loading...

Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Feb 29, 2020

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-too...
Github Finished Code: https://github.com/angle943/redux-too...
Redux Toolkit Official Website: https://redux-toolkit.js.org/
Mark Erikson's blog on Redux Toolkit: https://blog.isquaredsoftware.com/201...
Why RTK uses Redux Thunk over Redux Saga: https://blog.isquaredsoftware.com/202...
Immutable Update Pattern: https://redux.js.org/recipes/structur...
Immer: https://immerjs.github.io/immer/docs/...
RTK v1.3.0-alpha - https://github.com/reduxjs/redux-tool...

🔑 Key Concepts:

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

#ReduxToolkit #Redux #React #Typescript

Loading...

When autoplay is enabled, a suggested video will automatically play next.

Up next


to add this to Watch Later

Add to

Loading playlists...