Web Dev Roadmap for Beginners (Free!): https://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 ➜ https://patreon.com/davegray
⭐ 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
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: https://www.buymeacoffee.com/davegray
📚 Tutorial References:
🔗 NPM JSON-Server: https://www.npmjs.com/package/json-server
📚 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 Advanced Redux with RTK Query and React helpful? If so, please share. Let me know your thoughts in the comments.
#react #redux #advanced