Рет қаралды 80,425
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this Redux advanced tutorial, we will use React, Redux Toolkit, and RTK Query to completely transition a blog project from Axios async thunks to RTK Query, normalized state and optimistic updates.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React & Redux: bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: bit.ly/FAANGInterview
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: • React JS Full Course f...
👀 React Redux Toolkit tutorial series - • React Redux Toolkit Tu...
📬 Course Updates ➜ courses.davegray.codes/
🔗 Source Code and Resources for this Redux Toolkit Series: github.com/gitdagray/react_re...
Redux Advanced Tutorial - React, Redux Toolkit, RTK Query Project
(00:00) Intro
(00:34) Welcome
(00:48) Prerequisite knowledge
(01:05) Starter Source Code
(01:46) JSON Server
(03:50) Create an api slice
(05:43) Update postSlice to an extended api slice
(08:54) getPosts endpoint method
(13:19) Update the postsSlice selectors
(15:50) Reconfigure the store
(17:51) Update index.js
(18:59) PostsList component
(21:18) PostAuthor component
(22:21) getPostsByUserId endpoint method
(24:50) addNewPost endpoint method
(26:09) updatePost endpoint method
(27:13) deletePost endpoint method
(27:58) Export the auto-generated hooks
(28:30) AddPostForm component
(30:57) EditPostForm component
(33:13) UserPage component
(36:04) Header component
(37:00) Optimistic Updates for Reactions
(42:49) ReactionButtons component
(44:57) View Redux state cache and network requests with dev tools
☕ Buy Me A Coffee: www.buymeacoffee.com/davegray
📚 Tutorial References:
🔗 NPM JSON-Server: www.npmjs.com/package/json-se...
📚 General Redux Toolkit References:
🔗 Official Site for Redux Toolkit: redux-toolkit.js.org/
🔗 Redux Devtools: github.com/reduxjs/redux-devt...
🔗 Immer.js: immerjs.github.io/immer/
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/de...
📚 General React References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.org/wiki/React_(...)
React Jobs: www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about Advanced Redux with RTK Query and React helpful? If so, please share. Let me know your thoughts in the comments.
#react #redux #advanced