React Redux Thunk Middleware in Redux Toolkit for Async Actions with Axios

In this React Redux Thunk Middleware tutorial, you will learn how to create async actions using Axios in Redux Toolkit. You will learn what a thunk is and how we create async thunks outside of a Redux slice.

⭐ Become a full-stack web dev with Zero To Mastery Courses:
– Advanced React & Redux: https://bit.ly/AdvReactDev
– Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
– Master FAANG Coding Interviews: https://bit.ly/FAANGInterview

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

🚀 React JS for Beginners full course – 9 hours: https://youtu.be/RVFAyFWO4go

👀 React Redux Toolkit tutorial series – https://www.youtube.com/playlist?list=PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo

📬 Course Updates ➜ https://courses.davegray.codes/

🔗 Source Code and Resources for this Redux Toolkit Series: https://github.com/gitdagray/react_redux_toolkit

React Redux Thunk Middleware in Redux Toolkit for Async Actions with Axios

(00:00) Intro
(00:15) Welcome
(00:26) Prerequisite knowledge
(00:43) Faster Pace Ahead
(01:06) What is a thunk?
(01:34) Changing the initial state
(02:58) Adjusting to the state shape
(04:44) Creating a fetchPosts async thunk
(07:02) Adding extraReducers and builder cases
(10:08) Dispatching fetchPosts async thunk
(13:51) Building a PostsExcerpt component
(15:31) Displaying the loading state
(19:00) Creating a fetchUsers async thunk
(21:50) Dispatching fetchUsers at App load time
(23:25) Creating an addNewPost async thunk
(25:39) Dispatching the addNewPost async thunk
(29:15) Quick Correction

Corrections:
(06:22) 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.

☕ Buy Me A Coffee: https://www.buymeacoffee.com/davegray

📚 General Redux Toolkit References:
🔗 Official Site for Redux Toolkit: https://redux-toolkit.js.org/
🔗 Redux Devtools: https://github.com/reduxjs/redux-devtools
🔗 Immer.js: https://immerjs.github.io/immer/

🔗 ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

🔗 React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

📚 General React References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=

✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

Was this tutorial about Redux Thunk middleware for async actions with Axios in Redux Toolkit and React helpful? If so, please share. Let me know your thoughts in the comments.

#redux #thunk #middleware