RTK Query Complete Guide in Hindi | CRUD Operations, Caching & Optimistic Updates | Ep.21
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- Starter Code: github.com/procodrr/redux-cou...
Final Code: github.com/procodrr/redux-cou...
Welcome to our comprehensive tutorial on building a CRUD application using RTK Query! In this video, we delve deep into the advanced features of RTK Query, focusing on efficient data handling techniques like caching and optimistic updates. Whether you're a beginner or an experienced developer, this tutorial will equip you with the skills to create more dynamic and responsive web applications.
🔍 What You'll Learn:
Introduction to RTK Query: A brief overview of RTK Query and its role in modern web development.
Setting Up the Project: Step-by-step guide to setting up your development environment for a CRUD application.
CRUD Operations: Detailed explanation of Create, Read, Update, and Delete operations using RTK Query.
Caching Mechanisms: Learn how to implement intelligent caching to reduce server load and improve user experience.
Optimistic Updates: Master the technique of optimistic updates to instantly reflect changes in the UI, enhancing the perception of your app's responsiveness.
Error Handling: Strategies for handling and displaying errors effectively in a user-friendly manner.
Best Practices: Tips and tricks to write clean, efficient, and maintainable code.
🔧 Technologies and Tools Used:
React.js
Redux Toolkit
RTK Query
RESTful APIs
👨💻 Prerequisites:
Basic understanding of React and Redux
Familiarity with JavaScript and REST APIs
📖 Chapters
00:00 RTK Query enables efficient data fetching, caching, and optimistic updates.
02:27 Using JSON server for backend integration
06:57 Adding and mapping task components with update and delete functions.
09:09 Handling loading, error, and slow network scenarios
13:14 RTK Query provides automatic caching for optimized data fetching.
15:24 RTK Query allows using RT query library inside Redux Toolkit for CRUD operations and optimistic updates.
19:50 Using RTK Query with Redux in a React application
22:06 Using the data and properties for rendering
26:43 Using mutation to create a new task and handle the return object
29:13 Demonstration of adding and refreshing tasks in real time.
33:49 Demonstrating CRUD operations and caching in RTK Query
35:53 Using patch request method to update a task
40:39 Optimistic updates ensure smooth UI even on slow network
43:04 Using optimistic updates for handling request failures
47:44 Optimistic updates are important for providing proper user feedback
49:46 Optimizing network requests for better user experience
54:15 Setting up API reducer and middleware in Redux store
56:33 Completion of Redux and front end course
Telegram Group : t.me/procodrr
Sunday QnA Link: meet.google.com/vbp-hqnm-eiq
Social Media
🌐 Telegram: t.me/procodrr
🌐 Linkedin: / anurag-singh-web-devel...
🌐 Instagram: / procodrr
🌐 Twitter: / anuragsinghbam
🌐 Portfolio: anuragsinghbam.com/
Music by geoffharvey from Pixabay
#react #procodrr #webdevelopment #RTKQuery #CRUDApplication
![[TH] VCT Pacific Stage 2 - Week 4 Day 3 // GEN vs TS | PRX vs ZETA](http://i.ytimg.com/vi/nspkjQuZve0/mqdefault.jpg)
![[페이스캠4K] 베이비몬스터 치키타 'FOREVER' (BABYMONSTER CHIQUITA FaceCam) @SBS Inkigayo 240707](http://i.ytimg.com/vi/x9VRNTV4VDI/mqdefault.jpg)
Sir, please continue this series with more projects. 🙏🙏🙏🙏🙏. Please don't stop...
the best video on RTK query .. visualising the need for RTK query is awesome
bro you nailed it. style of explaining each functions & methods without forgetting and pace is just wonderful combination.
Thanks for Teaching in Hindi Just amazing diffrent from other
I have been working on react and redux previously, but still I don't know that much in detail similarly I know lots of hooks but can you please make some videos on hooks as well so that I will learn new things in detail❤🎉
Hello sir,
I was searching for an rtk query and for the first time I saw your video it was very simple and understandable.
I will request to make a video on how api handling works on big applications.
thank you sir , gratefull
Thank you so much that was really helpful.
Redux khatam 🙏🏻, Dhanyawaad bhaiya ❤🙏🏻
❤️
Bro kya aap bata sakate mai start karu kya react course ye kyuki mai bohot confuse hu bohot sare youtuber hai mene 3 4 you tuber dekhe par itna samaj nahi aya kya mai inki series follow karu main inke other video dekha hu interview wale or other plz reply
Nice
sir i all time your teaching style fan you are great ❤❤❤❤❤❤❤❤❤❤❤❤
Thanks Arvaj 😊
Is it possible to make api call on my will to keep the data updated? I mean how to use buster ?
firse dekhna padenga redux ki series samaj aagaya hai but yad nahi reh pa raha hai
bhai tumhara hindi me samjhaya mast hai bakio se
Sir aapke padhne kaa tarika kaafi aacha hai kya aap backend ki ek separate series laa sakte ho along with this ?
Backend bhi padhayenge, lekin usme abhi 5, 6 mahine kaa time lagega.
Tabtak frontend aur JavaScript achhe se seekho.
Sir update k liay PUT krty hayn ya PATCH
You said cache is implement by default, but in my case api is calling again and again. Any idea what is the issue?
Sir User Authenication me I am facing much difficulty Please help me..
Crud is very important in js aslo but very less people talking about it ?
Sure, I'll make a video on CRUD operation in JavaScript.
Till then keep learning and sharing 😊
How can i clone the starter codeee ????
Clone the whole repository, you can not clone only one folder.
it's look like QraphQL schema
Bhaiya typescript ki series jaldi laao
TypeScript aane mein abhi time lagega.
Bhaiya..react js ke projects aayenge. Or ab firebase ka uskrke projects bnawado plz
Pahle JavaScript ke kuchh projects banwayenge uske baad React ke.
React ke projects ke sath firebase bhi use karenge jab zarurat padegi.
Till then keep learning and sharing 😊
better to use supabase which uses a relational db. i don't know why not many people talking about it?
abhi kaha hua frontend complete abhi to next js and typescript bhe hai bhaiya
TypeScript aur Next.js alag playlist mein padhayenge, unka alag hi course hoga.
Frontend wali playlist mein bas itna hi rahega.
@@procodrr fir kab h inhe padane ka irada
@@arvajkhan683 March April Tak start karenge Typescript.
Sir apney jo Code ka Link dia hai description mai wo dangerous site show kar raha aur agar unsafe per ja kar bhi download kar rahey to chrome download nhi kar raha due to dangerous site please send another code link
BTW YOUR VIDEO IS GREAT ❤️ 👍
Abhi fix kar diya hai, check karo.
THANKS SIR
Sir can you please a complete video on PWA with react
Hi Anurag, you are such a great inspiration for us. Thanks to share the video with us. I need to take a look once more at optmistic point, however I really understand the concept of RTK query easily and fast.
Bro kya aap bata sakate mai start karu kya react course ye kyuki mai bohot confuse hu bohot sare youtuber hai mene 3 4 you tuber dekhe par itna samaj nahi aya kya mai inki series follow karu main inke other video dekha hu interview wale or other plz reply
bhaiya mujhe job nhi mil rhi mai ek mern developer hu aur 3 saal se coding kr rha hu aur u tub se sikh rha hu ..... please help me
i think its better you get placed from college otherwise its very difficult to get placed offcampus.
@@AvikNayak_ tumhare jaise log iske siwa aur kush bol b nhi sakte
@@vishwajeetyadav4480 i know you didn't like what I said but sach toh yehi hai na. Accha problem kaha pe ho raha hai. Resume shortlist hone mein ye online tests nikal ne mein.
BHai tumhe optimistic update dena khud ni aata ha, ye tarika galat ha optimistic update dene ka, jo fetchTasks query diya ha changeQueryData me agar vo paginated hui to kya karoge
Let's connect on LinkedIn or Telegram and help me understand what is the right way to do optimistic updates. So that I can make a new video and correct myself.
LinkedIn: www.linkedin.com/in/anuragsinghbam
Telegram: t.me/procodrr
I genuinely welcome you, let's connect.