Modern Redux with Redux Toolkit (RTK) and TypeScript

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.

• 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