RTK Query Tutorial - How to Fetch Data With Redux Toolkit Query | React Beginners Tutorial
ฝัง
- เผยแพร่เมื่อ 11 ต.ค. 2022
- The first 1,000 people to use the link will get a 1 month free trial of Skillshare: skl.sh/pedrotech10221
In this video I will teach you guys how to use redux toolkit to fetch data from API's in react.
Code: github.com/machadop1407/redux...
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #coding - วิทยาศาสตร์และเทคโนโลยี
The first 1,000 people to use the link will get a 1 month free trial of Skillshare: skl.sh/pedrotech10221
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.
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.
This is awesome! without even writing a single line of code, i understood what's going on 90%! thanks pedro!
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
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
I love your lessons & explanations! So simple & concise!
you really know how to explain very well.
when I'm stuck on anything I directly come to you, thank you very much.
Super introduction Pedro ! Hoping to see a deep-dive in te future ! Love Bart
I had knowledge of RTK query, but couldn't understand it very well.
This video made it very clear all my previous confusion.
Excellent video to introduce RTK Query basics! You made it very clear and simple, thank you 🙏
Wow. You explained it absolutely great. Now it is much more clear for me. Thank you buddy
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!
Great to hear!
@@PedroTechnologies with typescript + rtkQuery with some advanced MERN project would be grate
I just searched this video from u yesterday & dodnt find any, and then next day, today, u are releasing it😂
Great video, it was really helpful!
Very clear explanation. Thank you for sharing
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?
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
.
Kent C Dods has nice content about TDD in React. Check it out
amazing man! thank you very much!
Thanks for the video pedro
nice tutorial @pedro what vscode theme are you using here?
Awesome explaination!
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
Very welly explained!!
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
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.
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
very helpful. thank you
✅ You def did a boss job explaining rtk query!
great shit bro keep it up
Please Please Create a React Native course, I really like how you teach! If possible thanks
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?
Nice video. Thanks.
So good tutorial thank you
tutorial actually starts at 2:02
Can I use the CreateApi and fetchBasequery to fetch some data from my mongodb.
Top notch
Great tutorial
Amazing!!!!!!!!
Bro you're great
Really awesome tool
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
Hey pedro can you make a video on firebase authentication useing typescript and create context hook
Bless you bro
How to use Selectors when using RTK query and with arguments
Nice tutorial
is there any video explain about mutation
Thanks a lot. You just make it very easy to understand.
If I could give x1000 likes, I would do it
Great video!!!!!
11:27
so if I have 100 api endpoints I should wrap 100 providers?! 🤔
Thanks
Please do the video on react native and ionic + react
Thanks!
Thank you for the support :)
Is this video on the 9h React that you uploaded yesterday> ? Thank you
No! That series is over now :)
thank you
way to 100k
Please make a video about redux-thunk
I got an error it says: "Existing Redux context detected. If you already have a store set up, please use the traditional Redux setup."
Pedro can you make a video on usecontext hook and how it used in authentication
I think he has something on using context api
check here: th-cam.com/video/LlvBzyy-558/w-d-xo.html
How to create an search engine with Redux and createApi?
Can you do a video on the T3 stack and tRPC? Id really appreciate it.
Hahaha maybe a collab with Theo!
@@PedroTechnologies that would be awesome!!
How to make isLoading take longer?
store ekada vaadinav bro?
ApiProvider can't use with Provider!!!
First to like:-)
Does anyone know of testing this components ?
Is this better than normal fetch ?
Hi Pedro.
Thanks for tutorials.
What's the difference between React Query fetching and Redux toolkit fetching?
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!
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
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
@@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;
Can I use RTK query with firebase?
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
First
Boss, you're not supposed to use both a Provider and ApiProvider.
I was thinking the same
yep
exactly!!
ApiProvider should only be used when we're not using any store for our APP 😒
where should it be?
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
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?
are you Spanish speaker?
Terrible tutorial
What can i do to improve? :)
Excellent tutorial on Redux Toolkit Query. Thanks, Pedro.
{2022-12-12}