Coursera Plus Annual is 40% Off — Ends July 13.

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Modern Redux with Redux Toolkit (RTK) and TypeScript

via egghead.io

Go to class Write review
Simplilearn Ad

Lead AI-Native Products with Microsoft's Agentic AI Program

Learn More → Scrimba Ad

Get 20% off all career paths from fullstack to AI

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
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

Taught by

Jamund Ferguson

Reviews

Start your review of Modern Redux with Redux Toolkit (RTK) and TypeScript

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.