Learn how to implement async actions using Redux Thunk middleware and Axios in Redux Toolkit. Explore the concept of thunks, create async thunks for fetching posts and users, and build a PostsExcerpt component. Discover how to handle loading states, dispatch async thunks at app load time, and create an addNewPost async thunk. Gain insights into adjusting initial state, adding extraReducers with builder cases, and avoiding common pitfalls when working with promises in Redux.
React Redux Thunk Middleware in Redux Toolkit for Async Actions with Axios
Overview
Syllabus
Intro
Welcome
Prerequisite knowledge
Faster Pace Ahead
What is a thunk?
Changing the initial state
Adjusting to the state shape
Creating a fetchPosts async thunk
Adding extraReducers and builder cases
Dispatching fetchPosts async thunk
Building a PostsExcerpt component
Displaying the loading state
Creating a fetchUsers async thunk
Dispatching fetchUsers at App load time
Creating an addNewPost async thunk
Dispatching the addNewPost async thunk
Quick Correction
Do not use try / catch blocks here as the video shows. You need the promise to be fulfilled or rejected which will have the appropriate response in the extraReducers.
Taught by
Dave Gray
Related Courses
-
Modern Redux with Redux Toolkit (RTK) and TypeScript
-
Redux Fundamentals (feat. React)
-
Building React Applications with Idiomatic Redux
-
Blog App Project with React.js, Redux Toolkit CRUD Examples
-
React Redux Example Project with Redux Toolkit
-
React Redux Toolkit Tutorial for Beginners - Learn Modern Redux
