React Redux Toolkit Query Tutorial and RTK Query CRUD Example App

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.

⭐ 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 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-server
? Font Awesome React Icons: https://fontawesome.com/docs/web/use-with/react/add-icons

? 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 RTK Query and building an example CRUD app helpful? If so, please share. Let me know your thoughts in the comments.

#redux #rtk #query