RTK Query Tutorial - How to Fetch Data With Redux Toolkit Query | React Beginners Tutorial

[@PedroTechnologies]

The first 1,000 people to use the link will get a 1 month free trial of Skillshare: ​skl.sh/pedrotech10221

[@ankush0094]

Hi pedro tech i am learning react and came to know redux for state management, but now i am confused with thunk and rkt query. As i know, thunk is used for handling api, same doing with rtk. So confused about what to use.

[@ravhundal]

I was struggling to grasp RTK Query for the past couple of days. This tutorial helped me understand it in a much simpler way. Thank you!

[@akshaychoudhry]

Timestamps: 0:00 Intro 0:40 Target Audience (1:15-2:01 Skillshare) 2:02 Project Intro 2:59: createAPI() function 9:05 hooks can be used to get data

[@zuccidaniel8926]

This is awesome! without even writing a single line of code, i understood what's going on 90%! thanks pedro!

[@daemonelectricity]

The example I saw on the Redux documentation did not create another provider. It added the API as a reducer in the store and as a middleware concatenated on getDefaultMiddleware. That approach makes a lot more sense because it would be insane to be nesting 20 providers for 20 API slices.

[@ScoreMatch_099]

Except this thing he explained very well

[@eshw23]

Just wanna say your channel has helped me build some awesome projects the past few months! An updated MERN project would be amazing if you can anytime soon!

[@PedroTechnologies]

Great to hear!

[@regilearn2138]

@@PedroTechnologies with typescript + rtkQuery with some advanced MERN project would be grate

[@NyiNyiSoe-v2p]

I had knowledge of RTK query, but couldn't understand it very well. This video made it very clear all my previous confusion.

[@josefreitas6997]

Been using it recently with redux, a bit more complex than react-query but a really great tool! Keep up with the good work. Shotout from Portugal

[@ALi-Sloom]

you really know how to explain very well. when I'm stuck on anything I directly come to you, thank you very much.

[@ToveriJuri]

When I was reading the RTKQuery docs I though they said you only need to wrap the app inside ApiProvider if you weren't already using a redux store with a Provider. Essentially, it's a way to isolate the RTKQuery functionality from other features of the toolkit. If you are already using Redux store you can just add it to your configureStore as is intructed in the docs.

[@marvinfok65]

I love your lessons & explanations! So simple & concise!

[@bartjan83]

Super introduction Pedro ! Hoping to see a deep-dive in te future ! Love Bart

[@amirhosseinnazari2699]

Wow. You explained it absolutely great. Now it is much more clear for me. Thank you buddy

[@BobbyW0nder]

Excellent video to introduce RTK Query basics! You made it very clear and simple, thank you 🙏

[@johnadepelumi93]

Hi Pedro, thanks for all you do to put these tutorials out here for free. I was wondering if you will be doing any tutorials on TDD in react with jest or react testing library .

[@rafaelarantes4804]

Kent C Dods has nice content about TDD in React. Check it out

[@davidriches6452]

nice tutorial @pedro what vscode theme are you using here?

[@GeneralPensionAuthority]

Very clear explanation. Thank you for sharing

[@developedbyjs]

Please Please Create a React Native course, I really like how you teach! If possible thanks

[@FaezehForoohar]

Great video, it was really helpful!

[@oncoding4520]

Is this video on the 9h React that you uploaded yesterday> ? Thank you

[@PedroTechnologies]

No! That series is over now :)

[@sudiptokumarmitra9845]

Thanks for this tutorial. But Please make a complete tutorial on Redux toolkit and rtk query and show how to use it for post request and for complex web apps.

[@kellyncodes7421]

Thanks for the video pedro

[@Chris-qg6kc]

✅ You def did a boss job explaining rtk query!

[@RoniJackVituli]

amazing man! thank you very much!

[@rajibhossainprejon5627]

Very welly explained!!

[@johanmirzaahmedov7987]

I'm just curious if you will have more courses on RTK query, as im not sure how to add more api slices and combine then

[@sebastianmihaiprisacariu8975]

Can you do a video on the T3 stack and tRPC? Id really appreciate it.

[@PedroTechnologies]

Hahaha maybe a collab with Theo!

[@sebastianmihaiprisacariu8975]

@@PedroTechnologies that would be awesome!!

[@salvaborit]

great shit bro keep it up

[@ricko13]

Good tutorial, I like it 💪 I got a question: how set the query parameters in a more elegant way (not hardcoded) like you did with template literals 13:30

[@AbhishekMishra-h3e]

11:46 If there are more than one Api slice I would like my component to acess? How do I add multiple apis in API provider

[@isha25tripathi12]

hey let me know if you found the answer , I am not adding it in the API Provider as I have the normal provider but I also wanted to know how to handle multiple slices

[@GamerSharp]

@@user-nb4tw1ju6u @isha25tripathi12 There you go! store.js file: import { configureStore } from "@reduxjs/toolkit"; // Redux Toolkit: slices import counterReducer from "./counterSlice"; // RKT Query: slices import { profileApi } from "./profileQuery"; import { timezoneApi } from "./timezoneQuery"; const store = configureStore({ reducer: { counter: counterReducer, [profileApi.reducerPath]: profileApi.reducer, [timezoneApi.reducerPath]: timezoneApi.reducer, }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(profileApi.middleware, timezoneApi.middleware), }); export default store; __________________________ import { Provider } from "react-redux"; import store from "../redux/store"; function App({ Component, pageProps }) { return ( (here your app) ); } export default App;

[@aslamhussain9186]

use them as a reducer in store and concate defaultmiddleware

[@takek7739]

Pedro can you make a video on usecontext hook and how it used in authentication

[@johnadepelumi93]

I think he has something on using context api check here: kzbin.info/www/bejne/gp3Zc62vrpJoa5o

[@dedenapraia]

Thank you for this tutorial, a thing that is not clear to me is how to store the data in the redux store. When I open the redux chrome extension I see only query, mutation, etc but not the actual data

[@junior.antunes]

Thanks a lot. You just make it very easy to understand. If I could give x1000 likes, I would do it Great video!!!!!

[@ayyappaalampalli4632]

How to use Selectors when using RTK query and with arguments

[@mujahidansorimajid1524]

is there any video explain about mutation

[@kirito3082]

Hooks can only be called at the top level of the component, what do I do if I want to pass the value of an input as a filter to the query?

[@shinobi_coder88]

Hi Pedro, thanks for the course. I wanna do SSG fetching with RTK Query in next js. However, I don't feel like wanna use next-redux-wrapper as it's quite overwhelming. Is there any easier alternative?

[@NAYY_STUDIOS]

Can I use the CreateApi and fetchBasequery to fetch some data from my mongodb.

[@akhilchandra5935]

Thanks!

[@PedroTechnologies]

Thank you for the support :)

[@neiledwarddelacruz9419]

very helpful. thank you

[@developertak]

Hey pedro can you make a video on firebase authentication useing typescript and create context hook

[@sameerdewan881]

Boss, you're not supposed to use both a Provider and ApiProvider.

[@Pharizer]

I was thinking the same

[@coffee0919]

yep

[@dawnishere775]

exactly!! ApiProvider should only be used when we're not using any store for our APP 😒

[@waltergermanes4528]

where should it be?

[@chrisstucker1813]

Yeah if you’re not using a redux store then api provider is fine. But if you are using redux store then add the apislice to the store and no need to also provide an api provider

[@klyist]

way to 100k

[@yashwanthsrini]

Nice video. Thanks.

[@jonathankayizzi1241]

Great tutorial

[@Blenberg]

Hi Pedro. Thanks for tutorials. What's the difference between React Query fetching and Redux toolkit fetching?

[@PedroTechnologies]

Two different tools to achieve the same thing. I would chose react query if I am not using redux and RTK query when I am. Both are good!

[@lopghkt]

how about authentication firebase with rtk query? im struggling to find some material, im trying but its hard. And what will be the propperly react-redux-toolkit method of using firebase auth and storage?

[@sonamohialdin3376]

So good tutorial thank you

[@InsaaZayn]

Bro you're great

[@piyushaggarwal5207]

Really awesome tool

[@geoego23]

Thank you for your work. I have a question: how to get base url using hooks? I want to render pictures from API, but API returns only the name of file name, so when I try to render img tag with src from api results, it tries to get it from my url, not from api server. How to write img tag correctly? Thank you in advance, greetings from Odessa, Ukraine

[@jehnzcode]

I got an error it says: "Existing Redux context detected. If you already have a store set up, please use the traditional Redux setup."

[@soyebmohammad07]

Top notch

[@sohadmad1823]

Amazing!!!!!!!!

[@dever312]

Bless you bro

[@woolygan1529]

Nice tutorial

[@alirabiei2344]

11:27 so if I have 100 api endpoints I should wrap 100 providers?! 🤔

[@exkoi]

thank you

[@prashantindurkar]

Thanks

[@suryateja2524]

Please do the video on react native and ionic + react

[@raulygo6709]

How to create an search engine with Redux and createApi?

[@avishkadevinda6097]

Please make a video about redux-thunk

[@rotocub6963]

How to make isLoading take longer?

[@shineLouisShine]

07:05 - "Right?" Mmm... I don't know anything about it. But you can always not take for granted that everyone knows what you're talking about, and teach us... Right?

[@FlynnHogan-o3w]

Spinka Green

[@shahlakamal1120]

Can I use RTK query with firebase?

[@lopghkt]

i think u can, just rly dont know how, i tried today and i could register an user, but couldnt get the user curr state

[@coffee0919]

ApiProvider can't use with Provider!!!

[@oscarrojas3968]

Does anyone know of testing this components ?

[@DavidBrochu-o2t]

Christiansen Road

[@ThomasJohnson-q3t]

Satterfield Squares

[@DeneenDaghita-m2x]

Williamson Divide

[@JoseConley-n9i]

Stephany Street

[@mosesukwenya5605]

First to like:-)

[@KeithKerrick-g3f]

Moore Garden

[@CoverdaleAdelaide-l1r]

Louie Ville

[@pauleedavidson9251]

Hernandez Donna Anderson Elizabeth Clark Timothy

[@Atillailhan-l5l]

Hilton Pines

[@MorseMiles-u3u]

Zulauf Trafficway

[@PaulaEldridge-f6g]

Annette Brooks

[@JoeMichell-x2h]

Jayde Ridges

[@waleedsharif618]

Is this better than normal fetch ?

[@alfonsopayra]

are you Spanish speaker?

[@kdot78]

First

[@AwkwardFX]

Terrible tutorial

[@PedroTechnologies]

What can i do to improve? :)

[@Pareshbpatel]

Excellent tutorial on Redux Toolkit Query. Thanks, Pedro. {2022-12-12}

[@DashFactsCentral]

Awesome explaination!

[@saalimbhatkar6403]

Very helpful tutorial!