React Redux Toolkit Query Tutorial and RTK Query CRUD Example App

  Рет қаралды 135,823

Dave Gray

Dave Gray

Күн бұрын

Пікірлер: 280
@medi7573
@medi7573 2 жыл бұрын
This video should be added to the docs, as an easy guide to get started with RTK Query, just amazing!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
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
@viditgoel2909
@viditgoel2909 Жыл бұрын
congratulations and thanks for bringing out this amazing content@@DaveGrayTeachesCode
@saketparasher3762
@saketparasher3762 2 жыл бұрын
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.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad I could help, Saket!
@dustyhordofelbamana279
@dustyhordofelbamana279 2 жыл бұрын
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!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you so much for the kind words, Dusty! 🙏💯
@dustyhordofelbamana279
@dustyhordofelbamana279 2 жыл бұрын
@@DaveGrayTeachesCode 🙏 Dave!
@fancyAlex1993
@fancyAlex1993 2 жыл бұрын
Tried learning rtk query on my own using the documentation, it was hell ! Thank you for simplifying it
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad it helped! 💯
@mohammadumar443
@mohammadumar443 2 жыл бұрын
@@DaveGrayTeachesCode how will we do conditional querying with some data or on button click ?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
@@mohammadumar443 great question! RTK offers a "skip" parameter for this: redux-toolkit.js.org/rtk-query/usage/conditional-fetching
@Pareshbpatel
@Pareshbpatel 2 жыл бұрын
An excellent introduction to RTK Query with a CRUD example. Thanks, Dave {2022-06-20}, {2023-02-27}, {2023-04-03}
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome, Paresh! 💯
@aarondiaz2506
@aarondiaz2506 Жыл бұрын
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.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@randomvideos90-30
@randomvideos90-30 8 ай бұрын
Thank you very much. Your explanation makes me more understanding of the RTK query.
@muhammadhaseebfarooqkhan9597
@muhammadhaseebfarooqkhan9597 Жыл бұрын
Thank you Dave, You really elaborated every thing along side cases which help us to understand more clearly.
3 ай бұрын
Best explanation of RTKQ I have ever seen
@vincent3542
@vincent3542 2 жыл бұрын
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 😉💌
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
I sincerely appreciate the kind words, and am glad I could help! 💯🚀
@vincent3542
@vincent3542 2 жыл бұрын
@@DaveGrayTeachesCode ❤️❤️❤️
@samislam2746
@samislam2746 2 жыл бұрын
Wow, this explanation is literally the best in the universe 🤔 You deserve the GOLDEN BUZZ! 🎉
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you, Sam! 🙏
@robg1395
@robg1395 Жыл бұрын
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
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad to hear that!
@SimPwear84
@SimPwear84 2 жыл бұрын
Great intro! Thank you so much for this lesson. You're such a gem providing useful and real world problems and solutions.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're very welcome!
@baongocnguyen7036
@baongocnguyen7036 Ай бұрын
Thank you. This is help me a lot for non-English learner
@chanchaldutta7778
@chanchaldutta7778 2 жыл бұрын
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?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you, Chanchal! 🙏 I do plan to start a Typescript series this year.
@moretimeproductions
@moretimeproductions 2 жыл бұрын
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.
@stevereid636
@stevereid636 2 жыл бұрын
@@moretimeproductions That's exactly what I've been doing 👍🏾
@CryPoison
@CryPoison 2 жыл бұрын
Thank you very much. I was a bit scared at first but knowing context api and redux makes this one easier than ever.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome!
@hamidturkistani734
@hamidturkistani734 5 ай бұрын
Thank you Dave, we need more people like you.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 5 ай бұрын
You're welcome!
@htmlfivedev
@htmlfivedev Жыл бұрын
This is the BEST tutorial on this topic in the whole youtube ... thanx very much dawwwgh!!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@austinstephens3005
@austinstephens3005 2 жыл бұрын
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.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're very welcome, Austin! Glad I could help!
@ahmedmusawir
@ahmedmusawir Жыл бұрын
This is the best one on the topic by far ... Great job! Thanx!!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Glad it was helpful!
@danielrosenwald
@danielrosenwald 2 жыл бұрын
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?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
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: kzbin.info/www/bejne/Y3utd4Rvl9CImNE ...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.
@danielrosenwald
@danielrosenwald 2 жыл бұрын
@@DaveGrayTeachesCode Thank you for the quick reply Dave! I'll check out those other videos.
@olenadiachenko8943
@olenadiachenko8943 2 жыл бұрын
Hi! I hate to comment, but not today. Information is very structured, clear, and helpful. Thanks a lot for your great work
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you! 💯
@tamalmallick887
@tamalmallick887 2 жыл бұрын
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.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad I could help, Tamal! 💯
@MatheusVictorHenriquedaSilva
@MatheusVictorHenriquedaSilva Ай бұрын
Great video buddy. It really helped me today
@lacascadaobregon
@lacascadaobregon 2 жыл бұрын
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!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome!
@Kisovn
@Kisovn 7 ай бұрын
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 😌
@Mark-iv5dl
@Mark-iv5dl 7 ай бұрын
thanks to you! learn it in 10 minutes haha skipping some parts but awesome
@omarkraidie
@omarkraidie 2 жыл бұрын
I think your vscode theme has an outside effect on the quality of your videos :D It is just beautiful to look at!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you, Omar! I'm using the Github theme. It has several dark mode options.
@shineLouisShine
@shineLouisShine 10 ай бұрын
What a neat introduction. Thank you!
@eslamelwakeil5922
@eslamelwakeil5922 7 ай бұрын
Thanks mr Dav for this amazing content❤️❤️
@tundeadebanjo6579
@tundeadebanjo6579 Жыл бұрын
Very well explained. Thanks Dave
@eleah2665
@eleah2665 2 жыл бұрын
Todo List! Never fails.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Classic CRUD 💯
@johnconnor9787
@johnconnor9787 2 жыл бұрын
The best video on RTK Query
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you!
@ronyortizop
@ronyortizop 11 ай бұрын
Thank you Dave, it helped me a lot!
@mounis
@mounis 2 жыл бұрын
Just what I was looking for, thanks a lot!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome! 💯
@tejalbhavsar4610
@tejalbhavsar4610 2 жыл бұрын
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.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad I could help! 💯
@SanjarKodirov-ww3le
@SanjarKodirov-ww3le 2 жыл бұрын
thank you so much for this lesson. i am e project right now. And this video series helping me a lot )
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Happy to hear that!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad to hear that!
@mertdr
@mertdr 2 жыл бұрын
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?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You are right on! It works very well 💯
@Clash-Roblox
@Clash-Roblox Жыл бұрын
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?
@thimiraakash9024
@thimiraakash9024 Жыл бұрын
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..
@leonidkonstantinovich3418
@leonidkonstantinovich3418 2 жыл бұрын
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?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
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
@leonidkonstantinovich3418
@leonidkonstantinovich3418 2 жыл бұрын
@@DaveGrayTeachesCode Thanks for answering! That's probably it, I'll give it a try
@josesantillan732
@josesantillan732 2 жыл бұрын
Marvelous! Thanks man. Keep it that way
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You got it!
@emanuelmejia4525
@emanuelmejia4525 2 жыл бұрын
Your videos are gold, thanks so much!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad you like them! 💯
@georgy2763
@georgy2763 2 жыл бұрын
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)
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
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.
@sappy12dream29
@sappy12dream29 2 жыл бұрын
Here because HOD sir wants more features in my final semester project.. It's getting hard to come up with any suitable niche to justify my efforts
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
HOD = Head of Department? I'm not sure what class you are taking or what the project requirements are, but RTK Query is a nice addition for many projects. 🚀
@neelnarwadkar5921
@neelnarwadkar5921 7 ай бұрын
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.
@nikolayshatalov5765
@nikolayshatalov5765 9 ай бұрын
amazing content! thank you, sir
@jomaramomas7682
@jomaramomas7682 2 жыл бұрын
Thank you again for an awesome video man! Keep it up!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome and will do! 🚀
@regilearn2138
@regilearn2138 2 жыл бұрын
Really appreciate you Dave ❤
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you, Regi! 🙏🙏
@marziehmokhtari7141
@marziehmokhtari7141 Жыл бұрын
thanks for your great teaching💐
@AbhishekMishra-h3e
@AbhishekMishra-h3e 10 ай бұрын
At 9:50 How can I feed multiple slices to AppProvider if my component relies on data from differnt sources
@moddaman90
@moddaman90 Жыл бұрын
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?
@saketparasher3762
@saketparasher3762 2 жыл бұрын
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.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
This is a good idea for a future video! 🙏🚀
@farnoodlotfali4912
@farnoodlotfali4912 2 жыл бұрын
thanks a lot for this Tutorial!!!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome, Farnood! 🚀
@mariusngaboyamahina9190
@mariusngaboyamahina9190 2 жыл бұрын
Thank you, @Dave Gray
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome, Marius! 🙏💯
@geomukkath5373
@geomukkath5373 2 жыл бұрын
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.
@calebbush7559
@calebbush7559 2 жыл бұрын
Thanks a lot! Question, suppose you have several APIs to perform CRUD operations, how are you going to structure the files?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
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
@artemiuszkuzniecow1283
@artemiuszkuzniecow1283 Жыл бұрын
Thank you so much! Amazing lesson!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
You're very welcome!
@codernerd7076
@codernerd7076 2 жыл бұрын
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?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
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.
@codernerd7076
@codernerd7076 2 жыл бұрын
@@DaveGrayTeachesCode awesome can't wait for the videos but take all the time you need
@michaelscofield5343
@michaelscofield5343 2 ай бұрын
what is the difference if I use createSlice method and do all of in this vedio manualy like in the pervious vedios and if I use RTK Query?
@Thongtele
@Thongtele 2 жыл бұрын
Thank you Dave. You are great.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You are very welcome
@boburmirzomuhibullaev3081
@boburmirzomuhibullaev3081 2 жыл бұрын
love your tutorials! Could you make your videos with typescript, please? I think it will another level
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
I am building a TypeScript for beginners series right now. After it is complete, I will add some additional TS content.
@ABUTAHER-wg7gz
@ABUTAHER-wg7gz Жыл бұрын
Hello if i want to use authorization headers for RTK Query, can i use direct argument? or have to store on redux store?
@srinivasnahak3473
@srinivasnahak3473 Жыл бұрын
Thank you so much for explaining everything so clearly! :) One suggestion: Even if you've to make an even simpler app you can, please write and don't copy and paste the code. Because it can get confusing for some viewers. Again, that's just a suggestion.
@dharmeshgohil9375
@dharmeshgohil9375 2 жыл бұрын
Loved it brother
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you, Dharmesh! 💯
@mindblown9365
@mindblown9365 Жыл бұрын
Excellent tutorial. Thanks alot.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@davithchhung7577
@davithchhung7577 2 жыл бұрын
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
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
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.
@davithchhung7577
@davithchhung7577 2 жыл бұрын
@@DaveGrayTeachesCode thx you for the answer :)
@matthewgrichmond
@matthewgrichmond 2 жыл бұрын
Thanks, this helped me a lot!
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad to hear it! Thank you for the support! 💯🚀
@havefun5519
@havefun5519 Жыл бұрын
After createdSlice, createAsyncThunk, and createApi, it seems createApi is the most comfortable if integrate with API.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
I agree! 💯
@ibehmicheal4192
@ibehmicheal4192 Жыл бұрын
YOU ARE A GENIUS.....NO 🧢
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@somnathdas8922
@somnathdas8922 11 ай бұрын
Thanks for this tutorial.
@waltergermanes4528
@waltergermanes4528 Жыл бұрын
Is it good practice to wrap index using apiprovider?
@aileenchan3741
@aileenchan3741 Жыл бұрын
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? 😎
@farshidghilich1114
@farshidghilich1114 2 жыл бұрын
thank you that was very useful
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad to hear that!
@stonecomstock
@stonecomstock Жыл бұрын
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?
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
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
@stonecomstock
@stonecomstock Жыл бұрын
@@DaveGrayTeachesCode That makes sense! Thanks again!
@anupkubade6449
@anupkubade6449 2 жыл бұрын
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.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome, Anup! In this tutorial (example #1), I show how to create an infinite scroll in React: kzbin.info/www/bejne/gIjPgJZ6qtiSqNU ...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.
@theshortclipper
@theshortclipper 2 жыл бұрын
Thanks - can you please create video how to use customize basequery
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You're welcome, Coach! I do customize a baseQuery in my Redux Auth tutorial: kzbin.info/www/bejne/Y3utd4Rvl9CImNE ...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
@noellel
@noellel Жыл бұрын
Would love to see transformErrorResponse incorporated and tested by forcing an error within the associated API.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
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.
@emmanuelakogwu7761
@emmanuelakogwu7761 Жыл бұрын
Awesome tutorial.....thank you But I'd like to ask, can one use rtkquery and reactquery for data fetching in React native too?
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
You're welcome! I have not, but it seems others have: bionicjulia.com/blog/implementing-rtk-query-in-react-native-app
@dvd34
@dvd34 2 жыл бұрын
Thank you Dave ! At 10:14 , what extension are you using to automatically spread the returned object from useGetTodosQuery ?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
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.
@sonamohialdin3376
@sonamohialdin3376 2 жыл бұрын
Amazing tutorial
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Thank you! Cheers!
@kevinliao5021
@kevinliao5021 2 жыл бұрын
I really like ur video. keep doing it👍
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad to hear that - I'll keep going!
@digitalpartner7598
@digitalpartner7598 2 жыл бұрын
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
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
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.
@digitalpartner7598
@digitalpartner7598 2 жыл бұрын
@@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
@anonymousmangalorean
@anonymousmangalorean 2 жыл бұрын
Hey Dave . I would like to see a redux toolkit/ RTK query + firebase authentiction flow video. Please try to make this video.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Firebase would make an interesting addition! Thank you for the request! 💯
@ogt1407gabriel
@ogt1407gabriel 2 жыл бұрын
Wow there so much you can do with redux and I thought i knew it all about redux and now i know that i dont.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
Glad I could help!
@amin001001
@amin001001 Жыл бұрын
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!
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
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
@sagarramaswamy8368
@sagarramaswamy8368 Жыл бұрын
Thanks a lot for the tutorial
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@hatembenechikh7035
@hatembenechikh7035 Жыл бұрын
a side question , what is the theme that you are using in vscode it look great :D
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
My theme choices: kzbin.infodp4u1NNFhtE
@headlikeahole6548
@headlikeahole6548 10 ай бұрын
Good video, thanks.
@benarbiamohamedtaher546
@benarbiamohamedtaher546 Жыл бұрын
Thanks a lot Dave
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
You're welcome!
@jiweihe3413
@jiweihe3413 2 жыл бұрын
Thanks for the great tutorial! RTK query seems very useful. 19:30 tagTypes for cache. I am not familiar with cache. Where is cached data stored? Is it something like local storage?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
"A key feature of RTK Query is its management of cached data. When data is fetched from the server, RTK Query will store the data in the Redux store as a 'cache'." - Reference: redux-toolkit.js.org/rtk-query/usage/cache-behavior#default-cache-behavior
@jiweihe3413
@jiweihe3413 2 жыл бұрын
@@DaveGrayTeachesCode thank you! this is very helpful. It seems if we close the page that calls the useQuery hook or after the default 60s, the data in the cache will be gone. It is quite different from local storage.
@fooked1
@fooked1 2 жыл бұрын
So is redux useful anymore? Seems RTK query is all you need. What am I missing?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
You can use them together when you need both a local global state AND timely data from an API layer. For example, you might store your user auth data in local state after login and still need the API layer to request and update records.
@mnmnisrat
@mnmnisrat 8 ай бұрын
Will u please cover this with netlify hosting in a new video
@CKNMEDIA
@CKNMEDIA 3 ай бұрын
What if we are using GraphQL Api
@jritzeku
@jritzeku Жыл бұрын
Would it be acceptable to use Redux with React query instead of Rtk Query? It seem like they both serve same/similar purpose. Im currently watching your React Query tutorial so was hoping to implement that in my project that uses redux toolkit.
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
It would be a strange combination. I'm not saying it isn't possible, but React Query will cache data for you also. If you need separate global state, React's context API might be enough.
@jritzeku
@jritzeku Жыл бұрын
@@DaveGrayTeachesCode That makes sense! I had used redux over contextAPI primarily due to performance benefits but now with React query it def changes things. I think I'll stick with useEffect and redux for now since there is lot of codebase with it. Thanks.
@komilolimov2257
@komilolimov2257 Жыл бұрын
Thats was awesome
@Adam-tz6gk
@Adam-tz6gk 2 жыл бұрын
Hey great guide, super helpful and to the point. Quick question: When would you use a Redux Thunk Middleware and when would you use an RTK API slice with createQueryApi?
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
While both are possible, I find myself using RTK Query all the time now.
@Adam-tz6gk
@Adam-tz6gk 2 жыл бұрын
@@DaveGrayTeachesCode Thanks for the reply!
@iUniverse
@iUniverse 2 жыл бұрын
I am wondering why my sorting does not work, I also try different way but it still did not worked.
@trentcox9239
@trentcox9239 2 жыл бұрын
gday mate, fantastic content. quick question that im driving myself insane over here trying to figure out. With the way rtk query is implemented when it comes to building api's, the only response validation (if you can call it that) that can be done is via typescript to infer the type of the response. thats great in a development environment, but correct me if im wrong, but id rather assume any and all third party responses are unknown until i pass the response through something like zod to validate/parse the response before passing it on to my application, thus making invalid states unrepresentable, and my application predictable. so far i cannot for the life of me figure out how to parse the response of an individual query and return either an error or data state. the only solution is to create your own base query for each endpoint, which in my opinion, negates the whole createApi thing in the first place, plus the validation should be at the resource level and not the base query level. my two cents. I feel like they've shipped a car with a great engine, but forgot to install the suspension with this one....if theres a way to validate a response and return the response or an error object for a slice or the application to pick up in its 'validated' form, im seriously all ears. Cheers mate.
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
I'd think you could use the transformResponse method to do some custom validation: redux-toolkit.js.org/rtk-query/usage/customizing-queries#examples---transformresponse and redux-toolkit.js.org/rtk-query/usage/customizing-queries#customizing-query-responses-with-transformresponse
@trentcox9239
@trentcox9239 2 жыл бұрын
@@DaveGrayTeachesCode cheers for the reply mate. intuitively that felt like the appropriate place for it, however any validation at this level that you would like to resolve to an error response wont happen because regardless of the result of the validation, it will be attached to the {data: ....} property that goes on to the application instead of the {error:...} object which is a real shame...because I use a typescript functional programming library (fp-ts), i could have my final data type as an Either but that then forces error checks in two separate areas (the error object itself and the possibility of a validation error against the data object) at the application level
@DaveGrayTeachesCode
@DaveGrayTeachesCode 2 жыл бұрын
I understand you are transforming the data, but have you tried throwing a custom error at that point in a try / catch? I do that inside of an onQueryStarted portion of an api slice and it works for me. At that point, you should have an error object that you can manipulate including the response status.
@trentcox9239
@trentcox9239 2 жыл бұрын
@@DaveGrayTeachesCode if that works im going to prescribe myself a few well placed uppercuts haha hopefully this is a case of missing the proverbial elephant in the room, cheers again for the reply mate!
@marvellousadesanya8480
@marvellousadesanya8480 Жыл бұрын
When are we to use async thunk and when are we to use rtk query?
@DaveGrayTeachesCode
@DaveGrayTeachesCode Жыл бұрын
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
From Small To Giant 0%🍫 VS 100%🍫 #katebrush #shorts #gummy
00:19
Ice Cream or Surprise Trip Around the World?
00:31
Hungry FAM
Рет қаралды 22 МЛН
كم بصير عمركم عام ٢٠٢٥😍 #shorts #hasanandnour
00:27
hasan and nour shorts
Рет қаралды 11 МЛН
Redux Toolkit Query vs React Query
22:12
Jack Herrington
Рет қаралды 109 М.
Redux - Complete Tutorial (with Redux Toolkit)
37:01
Cosden Solutions
Рет қаралды 244 М.
This is the Only Right Way to Write React clean-code - SOLID
18:23