React Redux Toolkit Query Tutorial and RTK Query CRUD Example App
129.7 هزار بار بازدید -
2 سال پیش
-
Web Dev Roadmap for Beginners
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
In this React Redux Toolkit Query tutorial, you will build a CRUD example app with RTK Query and React. RTK Query abstracts API logic from your code and creates custom React hooks for easy implementation.
💖 Support me on Patreon ➜ Patreon: 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: React JS Full Course for Beginners | ...
👀 React Redux Toolkit tutorial series - React Redux Toolkit Tutorials
📬 Course Updates ➜ https://courses.davegray.codes/
🔗 Source Code and Resources for this Redux Toolkit Series: https://github.com/gitdagray/react_re...
React Redux Toolkit Query Tutorial and RTK Query CRUD Example App
(00:00) Intro
(00:14) Welcome
(00:28) Prerequisite knowledge
(00:46) Project dependencies
(01:41) React v18 index changes
(02:17) JSON Server
(03:48) App and TodoList components
(05:07) Create an api slice
(08:47) ApiProvider
(09:57) Apply useGetTodosQuery in TodoList
(12:30) Adding mutations to the slice
(15:21) Apply mutation hooks in TodoList
(18:08) Cached data
(19:14) Tags, invalidating cache, and auto-refetching
(21:48) Transforming the response
☕ Buy Me A Coffee: https://www.buymeacoffee.com/davegray
📚 Tutorial References:
🔗 NPM JSON-Server: https://www.npmjs.com/package/json-se...
🔗 Font Awesome React Icons: https://fontawesome.com/docs/web/use-...
📚 General Redux Toolkit References:
🔗 Official Site for Redux Toolkit: https://redux-toolkit.js.org/
🔗 Redux Devtools: https://github.com/reduxjs/redux-devt...
🔗 Immer.js: https://immerjs.github.io/immer/
🔗 ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/de...
📚 General React References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(...)
React Jobs: https://www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
Blog: https://yesdavidgray.com
Reddit: Reddit: DaveOnEleven
Was this tutorial about RTK Query and building an example CRUD app helpful? If so, please share. Let me know your thoughts in the comments.
#redux #rtk #query
In this React Redux Toolkit Query tutorial, you will build a CRUD example app with RTK Query and React. RTK Query abstracts API logic from your code and creates custom React hooks for easy implementation.
💖 Support me on Patreon ➜ Patreon: 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: React JS Full Course for Beginners | ...
👀 React Redux Toolkit tutorial series - React Redux Toolkit Tutorials
📬 Course Updates ➜ https://courses.davegray.codes/
🔗 Source Code and Resources for this Redux Toolkit Series: https://github.com/gitdagray/react_re...
React Redux Toolkit Query Tutorial and RTK Query CRUD Example App
(00:00) Intro
(00:14) Welcome
(00:28) Prerequisite knowledge
(00:46) Project dependencies
(01:41) React v18 index changes
(02:17) JSON Server
(03:48) App and TodoList components
(05:07) Create an api slice
(08:47) ApiProvider
(09:57) Apply useGetTodosQuery in TodoList
(12:30) Adding mutations to the slice
(15:21) Apply mutation hooks in TodoList
(18:08) Cached data
(19:14) Tags, invalidating cache, and auto-refetching
(21:48) Transforming the response
☕ Buy Me A Coffee: https://www.buymeacoffee.com/davegray
📚 Tutorial References:
🔗 NPM JSON-Server: https://www.npmjs.com/package/json-se...
🔗 Font Awesome React Icons: https://fontawesome.com/docs/web/use-...
📚 General Redux Toolkit References:
🔗 Official Site for Redux Toolkit: https://redux-toolkit.js.org/
🔗 Redux Devtools: https://github.com/reduxjs/redux-devt...
🔗 Immer.js: https://immerjs.github.io/immer/
🔗 ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/de...
📚 General React References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(...)
React Jobs: https://www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
Blog: https://yesdavidgray.com
Reddit: Reddit: DaveOnEleven
Was this tutorial about RTK Query and building an example CRUD app helpful? If so, please share. Let me know your thoughts in the comments.
#redux #rtk #query
2 سال پیش
در تاریخ 1401/02/02 منتشر شده
است.
129,766
بـار بازدید شده