React Redux Toolkit RTK Query Tutorial | RTK Query CRUD | Data Fetching & Caching Tool - 1
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 2024
- In this video we will explore the Redux Toolkit RTK Query in detail with example. RTK Query is a powerful data fetching and caching tool. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.
Node.js: The Complete Guide to Build Backend Projects [2023]🔥
Link - www.dipeshmalvia.com/courses/...
⭐️GitHub link for Reference⭐️
github.com/dmalvia/Redux_RTK_...
⭐️RTK Query Overview⭐️
redux-toolkit.js.org/rtk-quer...
⭐️ Support my channel⭐️
www.buymeacoffee.com/dipeshma...
🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:00:43 - Bootstrap Application
0:01:48 - RTK Query Overview
0:04:12 - Create API using RTK Query
0:05:45 - JSON server
0:11:53 - Create Redux Store
0:15:28 - Provider vs Api Provider
0:17:22 - Data Fetching using hooks
0:19:15 - Fetch All Contacts
0:22:55 - Adding new endpoint
0:24:29 - Fetch Contact Details using hooks
0:28:13 - Outro
**React Roadmap for Developers in 2021**
How to Learn React JS ? - • React JS Roadmap for D...
React in One Project - • Learn React JS with Pr...
React Redux Toolkit Tutorial - • React Redux Toolkit wi...
Learn React Redux with Project - • Learn React Redux with...
What is Redux ? - • Understanding Redux Co...
Learn React Redux Thunk with Project - • Learn React Redux Thun...
Learn React Hooks - • Learn React JS Hooks |...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / programmingwithdipesh
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ Tags ⭐️
- Learn Redux RTK Query
- Redux Toolkit RTK Query Overview
- RTK Query for beginners
- Data Fetching RTK Query Tool
- How to use Redux RTK Query
⭐️ Hashtags ⭐️
#react #redux #toolkit #RTK #beginners #tutorial
Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.
Guys, if the video is helpful to you or you learned something than please appreciate and hit the LIKE and SUBSCRIBE button and help this channel to GROW😉
Thank you for this wonderful tutorial explaining RTK queries in detail and with much needed example for beginners.
Loved it !
Thank you very much for detailed explanation how to configure RTK!
Great Video!!
Good job with this video, thanks!
such great stuff. Haven't found this good of tutorials on current redux. Thanks
Glad you enjoyed it!
HI Dipesh.. Thanks a lot for uploading this video.. very useful and well explained.. can you please make a video using advanced features of rtk query.. like inject endpoints, combining reducers.. etc
Awesome videos - great information - great explanations 😃😃😃
Glad you like them!
The video was helpful. Can you please tell how to export those builder queries as functions as we can't use them as hooks inside a useEffect hook?
Thank you for the grear resource.
I have a question what if we have to do multiple api calls in the same component at different time interval.
At that time how to get isLoading, isFetching, error (since alreday declared for the 1st hook)?
Thanks bro finally aapne mera request sun liya
Maine bi kuch naya sikliya 👍
What's the benefit with RTK query, over, say just putting an axios fetch request inside a use effect? During each page refresh, requests will be executed in both cases, so what's the difference?
Thanks! Could you please do the with NextJs as it gives static pages so do we need to add every API to reducer to cache? Please help
quick question:
So you are passing a id props to ContactDetails component. But In my case I don't want to pass that value as a prop. I just have a dropdown in ContactDetails page and whenever that dropdown value change I want to trigger me useget query.
how I can do that?
Great tutorials, thank you !
Welcome!
Excelent! thanks!
You're welcome!
how if we want to use the query hook with manually triggering, so it's not fetching on the first load, but waiting us for clicking some button or something,,, anybody know???
I was really looking for this crud application because i wanna use rtk query in my project. Thank you
what is conditional check(?.) ??? what , how it works ?
@@PIYUSH-lz1zq we check we have data or not if we don't have data so it shows undefined. if you don't have conditional check then it shows an error
Using rtk query we don't have to write any reducers??
What if I have to customise my reducer it's quite confusing
I didn't understand the reducer part at 14:19 sir can u plz explain it to me , the syntax also
hi brother i have seen ur react videos and i am having one dout how can i ask!! pls bro i am totally confused
First view ..first like ..first comment too
thanks
You're welcome!
How I can use RTK query with async thunk?
Sir you have made a tutorial on redux I have learned redux from there it was amazing but please also add add and update functionality in the redux playlist. Because it has only fetch products and fetch single product concept.
Plus one here 🙏
what is conditional check(?.) ??? what , how it works ?
Could you please make a video on NextJS + RTK + RTK query?
Hi! nice vide, I was wondering when new data merges with previous data like in infinite scrolling, how would you do that? do you know where can I find more info about my question?
you need to pass some identifier so that service will able to understand how many or from where to where data is needed, check react windowing
I saw you defined RTK query createApi(), but createApi can have multiple end points. How do we control, which end point should trigger on load and which not?
You can use skip/skipToken. This will prevent a hook from firing.
where did we use caching
sir, it is possible to implement rtk query in react native?.if possible sir can u make a crash course react native using rtk query
Haven't tried give a try we can look together.
Great video, i have a question for redux toolkit query. I want to custom data in store, how do I do it
what is conditional check(?.) ??? what , how it works ?
Second like for Dipesh From Yassir
Can you please complete this series as soon as possible .. please...
And are you making a curd operation ??
This is only 2 part in the first we see the query and in the second part we see mutations and invalidation.
Can I use it in .js files instead.ts files?
Can anyone answer this?
Yes, you can use - but make changes accordingly to the code.
what is conditional check(?.) ??? what , how it works ?
it is shorthand for {data && {data}}
What's the best way for implement infinity pagination with RTK Query
the problem is "hell i don't use TypeScript i use JavaScript" CMON BRO :/, but anyways thanks
Rtk query, swr, React query, which one we should use...🤔
Confused..😢
hell lot of confusion !! every month some development is coming ..... web me zinda rahena muskil hai !!
@@PIYUSH-lz1zq 😀😀😀
@@shohagkhan3677 bhai which year which clg
@@PIYUSH-lz1zq Vai, mera parhai sesh hua.
@@shohagkhan3677 kiss tech stack me job karte ho .. oor kaha
Mann !! this RTK Query is so complicated !! i better off just using Fetch or Axios... , but this was a great tutorial like always..thankx Dipesh 😎👍
i hate redux. there are too much boiler-plate. why dont we just use zustand and react-query.
The RTK query api is one damn ugly api
At the moment of starting the app it returns this error: ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Cannot find module 'caniuse-lite/data/features/css-unicode-bidi'
Any idea what it could be?