Modern Redux with Redux Toolkit (RTK) and TypeScript

Overview

In this course we take a basic shopping cart application built with React and fully power it with Redux and RTK using TypeScript. For those of you familiar with Redux Hooks, we use those here, but the emphasis is more on how the Redux Toolkit simplifies the process of setting up your redux application including building slices, reducers, selectors and thunks. Everything we do in the course is typed with TypeScript to make your application development process as smooth and powerful as possible.

Syllabus

Intro to Modern Redux with RTK and TypeScript
Setup and Explore our Shopping Cart Application to Learn Redux with TypeScript
Add Redux and the Redux Toolkit (RTK) to an Existing Application
Splitting our Redux Store into Multiple Slices using the createSlice Method
Creating a RootState type and Typed Hooks for Type-Aware Redux Interactions
Access Redux Data in a Component with the TypeScript-enabled useAppSelector hook
Create a Reducer with Redux Toolkit and Dispatch its Action with the useAppDispatch hook
Building a Reducer Method to add an Item to the Shopping Cart
Create a Selector to Aggregate Data from our Redux Store
Use createSelector from Redux Toolkit to build a Memoized Selector
Combining Data from Two Redux Slices to Build our Shopping Cart
Aggregate Price Information From Two Different Slices with createSelector
How to Apply Types to Redux Selectors
Adding a Button that Dispatches an Action To Redux to Remove an Item from the ShoppingCart
Dispatching Actions to Redux when an Input Field Fires its Blur Event with TypeScript
Using TypeScript and Redux to Model the Different States of our Checkout Form
Handling Custom Actions in our Slice with extraReducers and the Builder API
Using Thunks to Dispatch Actions Over Time
Using createAsyncThunk and the builder API to Generate Redux Actions for an API call
Handling Errors in Async Thunks with builder.addCase()
Using the Response from an Async Thunk to Update the Redux State
Accessing Global State inside of Async Thunks with TypeScript
Using the Redux DevTool Support Built-in to Redux Toolkit