React Redux Toolkit Query Tutorial and RTK Query CRUD Example App
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- Web Dev Roadmap for Beginners (Free!): 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 ➜ / 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...
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: www.buymeacoffee.com/davegray
📚 Tutorial References:
🔗 NPM JSON-Server: www.npmjs.com/package/json-se...
🔗 Font Awesome React Icons: fontawesome.com/docs/web/use-...
📚 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 RTK Query and building an example CRUD app helpful? If so, please share. Let me know your thoughts in the comments.
#redux #rtk #query
This video should be added to the docs, as an easy guide to get started with RTK Query, just amazing!
Thanks! 🙏💯 They actually did add my full course video that includes this video chapter. You can find it here: redux.js.org/tutorials/videos#redux-toolkit-complete-tutorial-with-dave-gray
congratulations and thanks for bringing out this amazing content@@DaveGrayTeachesCode
Hello Dave, I would like to thank you for your multifaceted contribution in the life of several developers in the world and in particular mine. I am in full reconversion, and your videos are a breath of oxygen, so much it allows me to apprehend the thing differently. GOD Bless You, one of your admirers from France!
Thank you so much for the kind words, Dusty! 🙏💯
@@DaveGrayTeachesCode 🙏 Dave!
Great intro! Thank you so much for this lesson. You're such a gem providing useful and real world problems and solutions.
You're very welcome!
hi Dave! I just want to say a big thank you for your efforts in creating a lot of tutorial playlists, especially React and Redux.
The playlist on your channel is my main intake when learning new technology, because you really don't just present shallow content for tutorial size, but you dare to explore topics that are much more advanced. Even now I have got a job as a web frontend, your channel is still the first place I'm looking for 😉💌
I sincerely appreciate the kind words, and am glad I could help! 💯🚀
@@DaveGrayTeachesCode ❤️❤️❤️
Thank you very much. Your explanation makes me more understanding of the RTK query.
Thank you Dave, You really elaborated every thing along side cases which help us to understand more clearly.
I asked for rtk query at beginning of redux toolkit series, and got it. Thanks Dave. ❤❤
Learn a lot from your react authentication and authorization series.
Glad I could help, Saket!
Dave, Thanks for this breif tutorial on RTK Query. My team at work is using it in our project and I was looking for a quick and decent video on the topic to ease myself into learning it. This video did just that. Thank you sir.
You're very welcome, Austin! Glad I could help!
This is the best tutorial of RTK Query i've found so far! Thanks a lot!!
You're very welcome! 💯
Tried learning rtk query on my own using the documentation, it was hell ! Thank you for simplifying it
Glad it helped! 💯
@@DaveGrayTeachesCode how will we do conditional querying with some data or on button click ?
@@mohammadumar443 great question! RTK offers a "skip" parameter for this: redux-toolkit.js.org/rtk-query/usage/conditional-fetching
Thank you Dave, it helped me a lot!
Thank you very much. I was a bit scared at first but knowing context api and redux makes this one easier than ever.
You're welcome!
What a neat introduction. Thank you!
Very well explained. Thanks Dave
Thanks for the great tutorial. I have been dabbling a bit in RTK and so many things clicked for me while I was watching this
Glad to hear that!
Just what I was looking for, thanks a lot!
You're welcome! 💯
Thank you Dave, we need more people like you.
You're welcome!
This is the best one on the topic by far ... Great job! Thanx!!
Glad it was helpful!
Wow, this explanation is literally the best in the universe 🤔 You deserve the GOLDEN BUZZ! 🎉
Thank you, Sam! 🙏
Thank you again for an awesome video man! Keep it up!
You're welcome and will do! 🚀
This is really helpful Dave, thanks!
You're welcome! 💯
Thanks mr Dav for this amazing content❤️❤️
Hi Dave, I am looking for something that you explain. It's amazing. Your explanation is very clear to understand RTK query with CRUD projects.
Glad I could help, Tamal! 💯
Marvelous! Thanks man. Keep it that way
You got it!
Your videos are gold, thanks so much!
Glad you like them! 💯
amazing content! thank you, sir
I'm not really experienced to talk but i have Associate Degree in web development. I have never worked as dev but i graduated when first version of AngularJs was being released and i learned to code with js, php, java, pyhton and SQL with Mysql. Now i'm back to coding for fun and i love how easy everything has become, well maybe not easy for a beginner because most difficult part are concepts but a lot of work has been simplified, rtk query is a perfect example, love it! Thanks great explanation.
Thank you!
Thank you so much! Amazing lesson!
You're very welcome!
Really appreciate you Dave ❤
Thank you, Regi! 🙏🙏
Thank you Dave. You are great.
You are very welcome
Dave, thanks a lot for your brilliant tutorials. I learnt a lot from those. My humble request to you, is it possible to create react tutorials using typescripts as many organizations nowadays are moving to it?
Thank you, Chanchal! 🙏 I do plan to start a Typescript series this year.
It's a great idea, but also it is a nice challenge to do these tutorials and add Typescript yourself, I learned a lot doing that, because I could use. what I already know and also had to do quiet a bit of research to find out about all the stuff I didn't know.
@@moretimeproductions That's exactly what I've been doing 👍🏾
thanks to you! learn it in 10 minutes haha skipping some parts but awesome
thanks for your great teaching💐
Thanks, this helped me a lot!
Glad to hear it! Thank you for the support! 💯🚀
I think your vscode theme has an outside effect on the quality of your videos :D
It is just beautiful to look at!
Thank you, Omar! I'm using the Github theme. It has several dark mode options.
thanks a lot for this Tutorial!!!
You're welcome, Farnood! 🚀
Thanks for this tutorial.
Dave, this is by far the best RTK Query tutorial I've watched. Very in-depth yet easy to understand. The application I'm building uses Redux for more than API calls - it also includes the state of some UI items, for example which "Todo" is currently selected for editing. How would you go about combining the RTK Queries with regular Redux state that does not depend on an API call?
Thanks Daniel! You can do both. Here is a tutorial where I use RTK Query for login authentication, but then I store the auth state in Redux: th-cam.com/video/-JJFQ9bkUbo/w-d-xo.html ...I also apply this strategy in my recent MERN Stack Project series. Just an example that you can apply to any state you want to store in Redux when you are using RTKQ.
@@DaveGrayTeachesCode Thank you for the quick reply Dave! I'll check out those other videos.
hey dave thak you for creating this video, I read the docs but wan not clear about transfer response and cache, now i got them all.
Glad I could help! 💯
Great tutorial Dave, quick and easy! I’m reading the documentation now and maybe I might find the answer but I’d like ask. Apparenty RTK query is caching the data by default. I’m not sure about the use cases of caching since the state must be changed after any action taken by visitor. I noticed that invalidateTags is an array and it might be possible to invalidate certain keys only and cache the rest, am I right?
You are right on! It works very well 💯
Good video, thanks.
Loved the tutorial. Just one question, why not use .reverse() method instead of .sort() ? That's far simpler. Let me know if there is a problem that I am not aware of.
Excellent tutorial. Thanks alot.
You're welcome!
An excellent introduction to RTK Query with a CRUD example. Thanks, Dave
{2022-06-20}, {2023-02-27}, {2023-04-03}
You're welcome, Paresh! 💯
This is the BEST tutorial on this topic in the whole youtube ... thanx very much dawwwgh!!
Thank you!
thank you that was very useful
Glad to hear that!
love your tutorials! Could you make your videos with typescript, please? I think it will another level
I am building a TypeScript for beginners series right now. After it is complete, I will add some additional TS content.
Thats was awesome
Thanks a lot Dave
You're welcome!
Thank you, @Dave Gray
You're welcome, Marius! 🙏💯
Hi Dave, thanks a lot for your amazing videos. I am curios what do you think about the typescript and if you going to cover it with React/Redux later? In my current junior internship position, it is required to know it, and it seems that many companies want you to know it these days (at least in Russia)
I'm planning on covering it soon because I agree that many now want their devs to know it. I don't think it is essential as JS and React work without it, but it is currently in demand.
Thanks a lot for the tutorial
You're welcome!
Hi! I hate to comment, but not today. Information is very structured, clear, and helpful. Thanks a lot for your great work
Thank you! 💯
Dave, I like the VS Code plugin or extension that is highlighting vertically from open line to the end line (at 17:01 minutes). Do you remember the name by any chance? 😎
The best video on RTK Query
Thank you!
Loved it brother
Thank you, Dharmesh! 💯
Great content! How do i perform basic operations on fetched data that don't require an API such as increasing or decreasing quantity of a product in the cart, filter list by name.
Thank you for your RTK query lesson but in my project, I have a lot endpoints and Slices to deal with. So in index.js file, how can I add others slices to api in ApiProvider?
Nice tutorial! Helped a lot.
One question regarding RTX: I see that both in your tutorial and documentation the flow goes like this:
- Get All Elements
- Update (mutate) one element, then invalidate get all elements
- Get all elements
Seems to be overfetching.Usually when I update one element I would just fetch that updated version and update only that element in the list. Is this not best practice? I can´t figure out how to just fetch the updated element and update that in the list. Do you know?
I really like ur video. keep doing it👍
Glad to hear that - I'll keep going!
thank you so much for this lesson. i am e project right now. And this video series helping me a lot )
Happy to hear that!
Glad to hear that!
Hi Dave, the app on my side works mostly fine, but the delete method is always returning “500 internal server error”.
I have the same code and the post/patch methods work as intended. Thanks for your courses 😌
Hello
if i want to use authorization headers for RTK Query, can i use direct argument? or have to store on redux store?
Is it good practice to wrap index using apiprovider?
Thank you Dave ! At 10:14 , what extension are you using to automatically spread the returned object from useGetTodosQuery ?
I think at 10:14 you are referring to "destructuring" the object from useGetTodosQuery. There is no extension for that. I just quickly pasted it into the code - while saying I was pasting it - but you just need to type that out.
Are you planning to update react auth series to use RTK Query insted of axios.
Would love to work on conversion as I have implement user auth including retry and auto access token fetch in rtk query.
This is a good idea for a future video! 🙏🚀
wow! thanks
You're welcome!
Hi Dave! Very cool content. Thanks.
I had a question. I'm trying to call the API in a component, and read the value in another component (using lazy queries), however it never shows the result where I want to read it.
I've checked and the value is written to the store, and is actually readable using useSelector with some hacky tricks.
Do you know how can I possibly read the value in the destination component? Thank you!
With RTK Query, you want to use the same useQuery hook you used in the parent component - but use selectFromResult to get the data that was already requested. You can see an example of this here: github.com/gitdagray/react_redux_toolkit/blob/main/08_lesson/src/features/posts/SinglePostPage.js ..I had already used the useGetPostsQuery hook in the PostsList and did not want to create another request just to view one of the posts. Link to the parent component code here: github.com/gitdagray/react_redux_toolkit/blob/main/08_lesson/src/features/posts/PostsList.js
At 9:50
How can I feed multiple slices to AppProvider if my component relies on data from differnt sources
thanks
Amazing tutorial
Thank you! Cheers!
Hi Dave, thanks for the video. I understand everything you have covered but what about if you want to set up a mutation in apiSlice with data that is a manipulated version of what was fetched from a query? I tried pulling an object array into a component using a RTKQ query hook but when I duplicated the array and tried to make changes to it inside the component I got an error saying that the object elements are read-only.
I think you are looking for something like transformResponse: redux-toolkit.js.org/rtk-query/usage/customizing-queries#customizing-query-responses-with-transformresponse
@@DaveGrayTeachesCode thanks, I’ll give that a go.
Hi! Excellent tutorial, super informative and clear. Thank you very much. Could you say a few words about how to manipulate state using RTK Query? When using createAsyncThunk one sets up extrareducers where it is possible to change any state variable while handling api call "status" (pending, fullfilled, rejected). Should one create another slice for state management that will interact with the api slice? Or is it possible to incorporate the initial state in the api slice and change it based on data received from api?
Hi Leonid, and great question! I think what you are looking for is the transformResponse option in RTK Query. I'll be using it in the MERN Stack series I'm currently creating. redux-toolkit.js.org/rtk-query/usage/customizing-queries#customizing-query-responses-with-transformresponse
@@DaveGrayTeachesCode Thanks for answering! That's probably it, I'll give it a try
Tks sir :)
You're welcome!
What of the AddTodo has an error from the backend, how do you resolve it.
YOU ARE A GENIUS.....NO 🧢
Thank you!
Amazing. Love the way you put this together. I've not had a piece of code make so much sense in quite some time. Thanks!
You're welcome!
Todo List! Never fails.
Classic CRUD 💯
Thank you Dave. Very helpful! I am a little confused about the caching part though, where is the data being cached? Is it in our redux store/state? Or is it separate? For example are we able to target it with a useSelector and use the cached data in other components?
I understand the confusion. It is best to target it with one of the RTK Query hooks but then add the selectFromResult option for the hook. That way, a new request will not be issued for data you already have. Reference: redux-toolkit.js.org/rtk-query/usage/queries#query-hook-options
@@DaveGrayTeachesCode That makes sense! Thanks again!
Thank you for the tutorial Dave.
Can you please guide me how can I implement Infinite scroll using RTK Query?
I have a table, when I scroll to bottom, I need to fetch and append next batch of records till I fetch all the records.
You're welcome, Anup! In this tutorial (example #1), I show how to create an infinite scroll in React: th-cam.com/video/JWlOcDus_rs/w-d-xo.html ...it is not specifically for RTK Query but the concept is the same. You will also see example #2 uses React Query. I could make a video on this for RTK specifically in the future.
Thanks a lot! Question, suppose you have several APIs to perform CRUD operations, how are you going to structure the files?
That's definitely more complicated. A good discussion of that with answers from one of the primary RTKQ maintainers here on Stackoverflow: stackoverflow.com/questions/69971375/how-to-use-two-api-reducer-with-rtk-query-in-configuration-store
Thank you very much this is a really good video❣ Would u please tell me that how or from where did u take that ===>tagTypes:['Todo']. I had the idea what was the purpose for using that but need to know that how did u decide that 'Todo' is the tag. Thank you Dave! Cheers..
Cool
hello dave or guyz anyone can help 16:06 dave added a new todo but he didnot add an id "like using nanoId" why he left this new todo without and id, and i didnot get whats the difference between userId and id, i guess userId shows specific todo for same person i guess. but why he didnot add an id for the new todo plz help
you can’t sort the posts with nanoid’s ids, but adding a date property to each todo would suffice as another way
I love this video it's one of the more clear explanation I saw on this topic, however keep with one big question.
How do I use this with redux toolkit normal reducers, can I call the api slide from the reducer slides, what about using it to save one user login status? This seems to handle server state level data while redux handling client side data?
Good questions - and most of that is coming in the next one where I integrate RTK Query with the blog project and normalized state from the previous tutorials. You are correct that this interacts with the server data but it does keep a cache which is used until invalidated - then auto-refetch occurs.
@@DaveGrayTeachesCode awesome can't wait for the videos but take all the time you need
The mutation hooks doesn't provide loading, isError properties.
So, in context of above point. I want to show loading button when saving a todo and clear the loading sate of the button only when the post request is successful (i.e a todo is created or deleted successfully)
How it would be possible?
If you move on to the next tutorial in this series (just released it), you will see something like this: const [updatePost, { isLoading }] = useUpdatePostMutation()
nice one
Thanks!
Awesome tutorial.....thank you
But I'd like to ask, can one use rtkquery and reactquery for data fetching in React native too?
You're welcome! I have not, but it seems others have: bionicjulia.com/blog/implementing-rtk-query-in-react-native-app
Would love to see transformErrorResponse incorporated and tested by forcing an error within the associated API.
Good idea! transformErrorResponse should work in much the same way as transformResponse - to try it out, possibly disconnect your wifi / web while running the app in dev mode. You should get a 408 request timeout or similar.
hello dave i hope you're doing ok , i'll never thank you enough for what you're doing , i have a question though, it's about the primary ids of the data entries should we hide them or hash them especially when we're using them along with the HTML or there will be no vulnerabilities issues if we let them as they are i mean the real values stocked in the database , any advice will be appreciated. thanks
I don't see an issue with using the ids. If you are concerned with security, that will not help much for gaining unauthorized access.
@@DaveGrayTeachesCode thank you sir, I have always have been concerned about users manipulating other users data, this is why I try to hide users ids and assure that the user can only manipulate the data that belongs to him so I stock the connected user Id in the token
Do you know if there's a way to deploy this project and run that db.json as you db? I mean... is it posible to use that json as an easy way to store data when you app is deployed?
It is not ideal, but I do think you could Google how to deploy it for your backend if you want to. The jsonplaceholder site runs on it if I remember correctly: jsonplaceholder.typicode.com/
Hi Dave, is there a way to trigger the default GET request by the click of a button? Does the "useGetTodosQuery" also provide a getToDos function that can be used to make a GET request on the click of a button just like the other mutation method hooks do?
Yes, look into refetch: redux-toolkit.js.org/rtk-query/usage/cache-behavior#re-fetching-on-demand-with-refetchinitiate
@@DaveGrayTeachesCode thanks, just looked it up now
So does rtk query re fetch all the todos after every change ?
For this intro example and to provide an updated list of todos, yes. The next lesson in this series dives into the blog example and shows how to update, invalidate, and retrieve specific records.
Thanks - can you please create video how to use customize basequery
You're welcome, Coach! I do customize a baseQuery in my Redux Auth tutorial: th-cam.com/video/-JJFQ9bkUbo/w-d-xo.html ...And I will be doing much the same in the MERN Stack Project series I just started. Also, if you haven't seen the docs on this part, they are helpful, too: redux-toolkit.js.org/rtk-query/usage/customizing-queries#customizing-queries-with-basequery
TodoList.js:15 Uncaught TypeError: (0 , _api_apiSlice__WEBPACK_IMPORTED_MODULE_2__.useGetTodosQuery) is not a function. i am having these error
a side question , what is the theme that you are using in vscode it look great :D
My theme choices: th-cam.com/users/shortsdp4u1NNFhtE
I am wondering why my sorting does not work, I also try different way but it still did not worked.
Can we make a button for deleting all todos? I tried but couldn't figure it out.
On the frontend, you would need to issue a request for each id. It would be more efficient to have a specific endpoint in your REST API code for the backend that handled deleting all.
great video Dave! But I am a bit lost again :3 Can you explain when to use createAsyncThunk and when to RTK query? What are actually the differents? Thx
Hi Davith - they are both options, and you can use either one. It is good to know both as you might work on a codebase that uses either. I prefer RTK Query when creating new projects now.
@@DaveGrayTeachesCode thx you for the answer :)
When are we to use async thunk and when are we to use rtk query?
Async thunk can work with a traditional Redux store. RTK Query will create an API layer and use a cache of data which can be invalidated. The docs shed some light on this question, too: redux-toolkit.js.org/rtk-query/comparison#when-should-you-use-rtk-query