I have no intention of switching to Angular but can you please tell me in comparison to Angular and React which is tool is easier to make websites with??
@@mazharansari7813 Definetely react is easier for the webtsites, because you can control a lot of stuff which are not needed depends on the size of your website. BUT if we are talking about enterprise, picture here could be different, because here you need to consider business requirenments also, learning curve for Angular could be faster if you have a lot of BE devs who want to become fullstacks, and many other reasons
The problem with these videos is that after watching I always get an urge to do major refactoring on existing projects to try all these new cool techniques or packages. Inspiring content as always Jack. Really liked the React Query + Axios style of API calls, I'm going to have to give this a try. I would love to see an elegant way to combine this or SWR with something like Auth0 where you may have a short-lived authentication token that needs to be refreshed (with a refresh token) at a certain interval.
Its finally here. Jack you're a godsend. Just a couple of months ago I swapped rtk query with react query since I couldn't grasp rtk query that well. This is much appreciated. Looking forward to more great stuff 😄
I was migrating from react query to rtk query - one very important difference - RTK Query has the serializable state inside - it requires you to use only serializable data in parameters and returns. No class instances (fine in RQ). Also, in react query you define the endpoint as a hook - you can easily access other hooks (even api) from there. While in rtk you have to make such wrapper hook by yourself, if you depend on hooks (and pass the data as endpoint parameters, not a big deal, but some extra boilerplate). RTK idea is that your api code is a pure transport layer - it doesn’t allow you to mix some complex processing in it (while react query is ok with that) - in rtk you add extra processing on the higher level - in api consumers. In short, RTK query is a handy transport to a RAW (most important) api data, restrictive/opinionated. While react query might look more flexible out of the box. Both are great though
One thing is that rtk-query doesn't have support for infinite scrolls (at least for now), while react-query has a useInfiniteQuery hook that performs really well.
Wow thank you so much for listening my request 😭 really appreciated. Redux(state management) is still difficult but trying my best to gain the knowledge
Just went through the process of migrating our redux store to RTK and using RTK Query for all calls. It is a bit complex but its far better than dealing with unopinionated redux, which I've found filled with boilerplate and different styles of structuring redux. So much of what we did was boilerplate for pending, success, and failing for each action, and getting rid of all that with rtk query was a joy.
They are very similar, redux toolkit is very similar, it seems to me equal to react-query- If in a project I use redux it's obvious that I don't have to add react-query and it's recommended to use redux. If in a project I use Recoil, well it's strongly recommended to think to use react-query toghether with recoil. This could be the winner solution for state management in 2022
whenever i am faced with a challenge in typescript or react i think to myself "i bet jack herrington has a video for this, ohhh but what if he doesn't? maybe i can make a suggestion and he'll do a video on it and it'll be awesome because it was my idea!" I am forever at a crossroads between disappointed and ecstatic, because jack ALWAYS has a video to fit my needs... thanks jack!
Agreed. RTK can claim it abstracts all the boilerplate away, but ultimately it's still there. And complexity will always be there. We adopted it and found it overkill. Moving to react query now.
A very good comparison of rtk-query and react-query, but I got a little confused with useCallback since it didn't look like we had performance problems
I just feel like rtk query is still limited to what we can do with it in complex scenarios since we can't just access the api responses without their hooks unlike redux, where we can just use the variables (in multiple components) we store our responses in
Good content as always! I have a question. Why would you use RTK Query instead of React Query if you were using Redux in your app? Is it just to avoid adding a new dependency? Or are there other reasons? Other than that, do you see any downsides of using React Query in a app that's already using Redux?
thank you for a great content. Mr.Jack, can you make a video on axios error handling with react/typescript best practice? with this new "unknown" type and how to access response property on error if Error does not have it. And how to make it reusable pattern as a single source of error handling. thank you once again.
I find it really hard to follow along when the screen is zoomed in that close on the code. My brain doesn’t go very fast. I need to read stuff in context if the overall component, which I can’t do when what I’m ready is constantly rolling off the screen. Otherwise an excellent presentation,
So you MUST use typescript to use RTK query? I have yet to see an example where they don't give the builder.query a type. Seems weird to me that it requires typescript.
So am I right that with RTK Query I can totally discard my usual slice with the reducers I used before? So no need for useAppDispatch and useRootState etc? Also means that I am making a lot more http calls when I need the state in multiple nested components, doesn't it?
Thank you so much for this video! Is there a reason why you are using `ref` for the input and not using controlled component via useState (inside a form maybe?)
Hi Jack, have you already tried react-query in context of WMF. Did you know that different federated apps can share the same provider and thus the same cache? With all the good parts like query invalidation and optimistic update strategy working out of the box with no additional setup across all the apps. Let me know what you think about it. Thanks for amazing content 🙌
I find RTK Query a little convoluted. Even this terrific tutorial still leaves me feeling like "Huh?". I much prefer useSWR or React Query. Personally coding preference though.
Why u defined the onToggle in a useCallback? there is a reason for that? what is the value of updateTodo in every mutation? why just not a regular function? for the react-query version I see more convenient create just a todoMutation function with useCallback since the only value you're changing is the fetching function and passing that value as a dependency for the callback, the when calling idk updateTodo will just use todoMutation(updateTodo, { ...todo, done: !todo.done })
in RTK, I can see in all cases the endpoint return the full list, which is not the case in most of time, and mostly the endpoint will return only the modified object, so how manuly we can update the store
What magic is this? Immediately I was looking for it. Awesome ❤. Now, let's watch... Edit: React Query seems sooo cool especially with Axios. In my current project I am using Redux Toolkit (without the query part). I was actually using it to manage Server data. Maybe I can replace RTK entirely with React query especially if I no longer have the need for Redux. I am also switching to Next JS... Does this work there?
Nice, but invalidating the whole list every time you mutate only one element is pretty inefficient. It's much better to selectively choose which elements should be refreshed in the list, i.e. only the ones that you mutated.
I know that in react query, that if your post returns a body of the updated record, you can pass that data to the cache so it uses that (since you already have it which avoids a round trip to the server)
Great video. How Can we fetch data on the server with next.js and put it to the cash as initial data? With react query we can, but I can't find the recipe with rtk query
The real question is though what do you do when you actually want to mix-and-match? When e.g. you have your local frontend global state but on certain interaction (e.g. user presses the "Submit" button in a wizard form entry situation) you have to actually post data to the backend? How could RTK accommodate this?
Hi jack, awesome comparison, but i would like to see more architecture strategies than tools, for e.g: clean, hexagonal, DDD architecture in the frontend, is it possible? Greetings!
I get this question now and again, could you join the Discord server (linked to in the description), so that we can talk about what you'd like see in some more detail?
Great video again 👏 can't stop thinking that it's not DRY to write write the types "again" on the front end. Is mono repo the only way to make it DRY? Would love to hear your advice on DRY sharing of types between front and back?
hello Jack, great tutorials, thanks ! but when I try to run the code with npm install and then npm run start I get the following error : Package subpath './lib/tokenize' is not defined by "exports"
then after I solve this by running this from bash export NODE_OPTIONS=--openssl-legacy-provider, I moved past but I got stopped by another error - @reduxjs/toolkit/dist/query/react/rtk-query-react.legacy-esm.js 59:23 Module parse failed: Unexpected token (59:23) File was processed with these loaders: * ./node_modules/babel-loader/lib/index.js
Thanks for the video it really helped me alot, btw what's that plugin which autocompletes yarn command and lists node packages whenever you type something??
That means that the tagTypes array is defined by an inferred array value `[]`. Which is interpreted by TypeScript as `never[]`. You need to declare `tagTypes` as `string[]`.
Hello Jack, Thanks for this amazing tutorial I have a question please, whats the purpose of using useCallback in 9:01, you havent passed onToggle to an other component, i want please to understand why you choosed to use usecallback here ?
I mean for example if I want to return todos.text instead of todos 6:30. I have more complex data and it return me response.response.player but I want to return only player how to do this?
@@piotrkrysiak9414 Gotcha, well, first of fetchBaseQuery is just a helper function, you can provide your own version of it. But... you could also just add on fetchBaseQuery(...).then(resp => { ... }); And mutate the data version of the response in that then block to restructure the response however you want.
To get the current value. In react terms that’s an “uncontrolled input”. The other way to do it is to have some state and the set the value to the state and update the state during onChange.
How can I implement api if I have for example 5 endpoints for users and 5 endpoints for products and 5 endpoints for something else , I need to call createApi three times ? And where I can combine them in the root level ?
Create an apiSlice, add createApi as the tutorial said, use localhost:5000 as the baseUrl for example , add everything and leave your end points empty then create new files for your endpoints, this time instead of using createApi, use ApiSlice.injectEndpoints
No. Create multiple createApi is an anti-pattern. There should only be ONE createApi! Just like only one redux store. You have 2 choices: 1) define all of these endpoints in createApi 2) split these endpoint to it's according slices by using injectEndpoints api. This will enable code-splitting of createApi. So you can create 1 injectEndpoint for users with 5 endpoints described here, 1 injectEndpoint for products with 5 endpoints described etc... All these injectEndpoints will be merged to single createApi under the hood. Just like reducers to single redux store
Well from architectonic point of view: redux toolkit should solve balast of plain imutabile redux store, every side effects containing rest api should handle react-query, why? Because why not, i will pick best of the two worlds and don't care about few dependencies.. who does app in react to work in super strict mode of bestly optimalizations anyway (personal experience from multiple large production codebases) Redux is not even necessary in most of the apps especially next js ones, if you have control over server and do large app with micro frontends, even Dan Abramov says: redux is only for data storage if you not know where else it could be put. Good comparsion, but imho if you compare these just a mention that RTK is not necessary with redux toolkit, a lot of "inexperienced" programmers will start to rewrite react query into RTK just because they want to use redux toolkit which is fundamentaly bad decision
Thank you for this example Jack! Really helpful! Is there a way to use axios with RTK Query as well? And attach the token from next-auth session for example?
I haven't looked too deeply into this yet but what would you say is the main advantage of this approach instead of just Redux toolkit with Redux thunk?
You don't have to manually manage loading and error states for each thunk, RTK query will do it for you. Also, response are all cached so the application feels faster because it displays the cached data even tho in the background is updating the cache refetching
I just don't like how you skimmed over 80% of the project in the first 30 seconds. When I try to apply this knowledge, there's literally a giant gap in the steps I need to take.
The best teacher ever. You are my favorite, please do not stop. Jack you inspired me to switch from Angular to React, thank you so much.
Same here! Amazing stuff, congratulations and a big thank you!
I have no intention of switching to Angular but can you please tell me in comparison to Angular and React which is tool is easier to make websites with??
@@mazharansari7813 Definetely react is easier for the webtsites, because you can control a lot of stuff which are not needed depends on the size of your website. BUT if we are talking about enterprise, picture here could be different, because here you need to consider business requirenments also, learning curve for Angular could be faster if you have a lot of BE devs who want to become fullstacks, and many other reasons
@@mazharansari7813 Next.js You need server side rendering
I have resisted learning redux my whole dev career. So far so good haha
The problem with these videos is that after watching I always get an urge to do major refactoring on existing projects to try all these new cool techniques or packages. Inspiring content as always Jack.
Really liked the React Query + Axios style of API calls, I'm going to have to give this a try. I would love to see an elegant way to combine this or SWR with something like Auth0 where you may have a short-lived authentication token that needs to be refreshed (with a refresh token) at a certain interval.
th-cam.com/video/-JJFQ9bkUbo/w-d-xo.html#dialog
Its finally here. Jack you're a godsend. Just a couple of months ago I swapped rtk query with react query since I couldn't grasp rtk query that well. This is much appreciated. Looking forward to more great stuff 😄
I was migrating from react query to rtk query - one very important difference - RTK Query has the serializable state inside - it requires you to use only serializable data in parameters and returns. No class instances (fine in RQ). Also, in react query you define the endpoint as a hook - you can easily access other hooks (even api) from there. While in rtk you have to make such wrapper hook by yourself, if you depend on hooks (and pass the data as endpoint parameters, not a big deal, but some extra boilerplate). RTK idea is that your api code is a pure transport layer - it doesn’t allow you to mix some complex processing in it (while react query is ok with that) - in rtk you add extra processing on the higher level - in api consumers. In short, RTK query is a handy transport to a RAW (most important) api data, restrictive/opinionated. While react query might look more flexible out of the box. Both are great though
React Query is the winner because you can choose how much of it's features you need. I love it.
One thing is that rtk-query doesn't have support for infinite scrolls (at least for now), while react-query has a useInfiniteQuery hook that performs really well.
good to know
That can be fixed in many ways.
@@juanhuenchun8908 Such as?
The concept of infinite scroll is the one and only thing that I loathe in this entire existence. Other than that, I'm quite happy that I was born...
@@shineLouisShine😂😂😂
Wow thank you so much for listening my request 😭 really appreciated. Redux(state management) is still difficult but trying my best to gain the knowledge
Just went through the process of migrating our redux store to RTK and using RTK Query for all calls. It is a bit complex but its far better than dealing with unopinionated redux, which I've found filled with boilerplate and different styles of structuring redux. So much of what we did was boilerplate for pending, success, and failing for each action, and getting rid of all that with rtk query was a joy.
Yes. ^^^^
They are very similar, redux toolkit is very similar, it seems to me equal to react-query- If in a project I use redux it's obvious that I don't have to add react-query and it's recommended to use redux. If in a project I use Recoil, well it's strongly recommended to think to use react-query toghether with recoil. This could be the winner solution for state management in 2022
whenever i am faced with a challenge in typescript or react i think to myself "i bet jack herrington has a video for this, ohhh but what if he doesn't? maybe i can make a suggestion and he'll do a video on it and it'll be awesome because it was my idea!" I am forever at a crossroads between disappointed and ecstatic, because jack ALWAYS has a video to fit my needs... thanks jack!
I am so glad that I came to this hidden gem. Your videos are so amazing! Learning so much from you.
Wow, just explored this hidden gem 💎. Such a quality tutorials! Especially the fact that there's github code linked almost to each video. Thank you!
Thanks again, Jack! Amazing video as usual!
You always make it look easy!
I think RTK is really complex, so that I would rather using React Query with React Hooks
No at all! RTK is abstracted the way complexity of redux working.
Agreed. RTK can claim it abstracts all the boilerplate away, but ultimately it's still there. And complexity will always be there. We adopted it and found it overkill. Moving to react query now.
Another great video! Been binging your stuff all day
HI from Brazil Jack, this video was amazing. I've just subscribed!
Thanks, Jack. Love all your videos. Straight to the code.
A very good comparison of rtk-query and react-query, but I got a little confused with useCallback since it didn't look like we had performance problems
Can you give a time reference?
@@jherr around 9 minute mark
@@jherr 8:05 and 9:45 you use useCallback.
This channel need more subs the contents are amazing
Such a great video. It's funny that anything to do with Redux suddenly make things complex..
This is such a great stuff! Thanks for that!
10:04 - I've been through all major UI frameworks and i find Angular the worst. I also use Azure often. You read my mind. Subbed.
I just feel like rtk query is still limited to what we can do with it in complex scenarios since we can't just access the api responses without their hooks unlike redux, where we can just use the variables (in multiple components) we store our responses in
Good content as always! I have a question. Why would you use RTK Query instead of React Query if you were using Redux in your app? Is it just to avoid adding a new dependency? Or are there other reasons? Other than that, do you see any downsides of using React Query in a app that's already using Redux?
Was wrapping onToggle handler in useCallback necessary?, referring to rtk query part of the video, great video 👍.
No. You don’t really need to in this case.
Thanks. Very Useful!
Thanks Jack for the high quality content
i chose the RTK Query because i aldready used the redux-toolkit for global state management
Seem that if you already have your api calls setup using AXIOS that react-query would be the way to go.
All these variables [ todo, TODOS, Todo, addTodo] how to keep track on them and not get messed up?
That was so smooth. thanks a lot.
thank you for a great content.
Mr.Jack, can you make a video on axios error handling with react/typescript best practice?
with this new "unknown" type and how to access response property on error if Error does not have it.
And how to make it reusable pattern as a single source of error handling.
thank you once again.
I find it really hard to follow along when the screen is zoomed in that close on the code. My brain doesn’t go very fast. I need to read stuff in context if the overall component, which I can’t do when what I’m ready is constantly rolling off the screen.
Otherwise an excellent presentation,
So you MUST use typescript to use RTK query? I have yet to see an example where they don't give the builder.query a type. Seems weird to me that it requires typescript.
So am I right that with RTK Query I can totally discard my usual slice with the reducers I used before? So no need for useAppDispatch and useRootState etc? Also means that I am making a lot more http calls when I need the state in multiple nested components, doesn't it?
Thank you so much for this video! Is there a reason why you are using `ref` for the input and not using controlled component via useState (inside a form maybe?)
That’s an uncontrolled input and the react team recommends that unless you actually need to respond to changes on every keystroke.
Great content, thanks!
thanks!!! you are awesome!
Thanks Love That
Hi Jack, have you already tried react-query in context of WMF. Did you know that different federated apps can share the same provider and thus the same cache? With all the good parts like query invalidation and optimistic update strategy working out of the box with no additional setup across all the apps. Let me know what you think about it.
Thanks for amazing content 🙌
why invalidateTags and providesTags doesn't added automatically ?
I find RTK Query a little convoluted. Even this terrific tutorial still leaves me feeling like "Huh?". I much prefer useSWR or React Query. Personally coding preference though.
Totally agree. If I have the choice to go with RQ or SWR I'm just gonna go with that.
Why u defined the onToggle in a useCallback? there is a reason for that? what is the value of updateTodo in every mutation? why just not a regular function? for the react-query version I see more convenient create just a todoMutation function with useCallback since the only value you're changing is the fetching function and passing that value as a dependency for the callback, the when calling idk updateTodo will just use todoMutation(updateTodo, { ...todo, done: !todo.done })
in RTK, I can see in all cases the endpoint return the full list, which is not the case in most of time, and mostly the endpoint will return only the modified object, so how manuly we can update the store
What magic is this? Immediately I was looking for it. Awesome ❤. Now, let's watch...
Edit: React Query seems sooo cool especially with Axios. In my current project I am using Redux Toolkit (without the query part). I was actually using it to manage Server data. Maybe I can replace RTK entirely with React query especially if I no longer have the need for Redux.
I am also switching to Next JS... Does this work there?
It should. I transitioned as well from Redux to react query based on my use case
@@internet4543 Alright. Thanks so much
great content dude!, u got a new subscriber from Brazil !!
Thank you!
Exists any way to implements RTK-Query fetching data per chunks??? similar to redux use with dispatch to add more data into an specific store??
I noticed that you have auto suggestion when you type npm install. How can I archive that?
That's "fig".
amazing explanation
How does RTK work together with createSlice? it seems like they of a different data store ...
Nice, but invalidating the whole list every time you mutate only one element is pretty inefficient. It's much better to selectively choose which elements should be refreshed in the list, i.e. only the ones that you mutated.
I know that in react query, that if your post returns a body of the updated record, you can pass that data to the cache so it uses that (since you already have it which avoids a round trip to the server)
Great video. How Can we fetch data on the server with next.js and put it to the cash as initial data? With react query we can, but I can't find the recipe with rtk query
This is one advanced thing that keeps beating me.
Thank you so much. everything good
great
more on rtk query plz
May I ask for the theme you're using, it looks high contrast but better than original theme.
Night Wolf [dark] and Operator Mono.
The real question is though what do you do when you actually want to mix-and-match? When e.g. you have your local frontend global state but on certain interaction (e.g. user presses the "Submit" button in a wizard form entry situation) you have to actually post data to the backend? How could RTK accommodate this?
You would avoid using RTK, but use react-query and pass the data into the reducers via actions.
Or you can have your submit function calling your RTK method returned from the hook, it works just as fine.
Hi jack, awesome comparison, but i would like to see more architecture strategies than tools, for e.g: clean, hexagonal, DDD architecture in the frontend, is it possible? Greetings!
I get this question now and again, could you join the Discord server (linked to in the description), so that we can talk about what you'd like see in some more detail?
Cool jack i gonna join to the discord thanks !!!
How Rtk query handle multiple parallel query? Loading state in more than 3 parallel query?
Hi Jack.
Can you please guide me, how can I implement Infinite scroll using RTK Query?
Great video again 👏 can't stop thinking that it's not DRY to write write the types "again" on the front end. Is mono repo the only way to make it DRY? Would love to hear your advice on DRY sharing of types between front and back?
Monorepo would work. You could also generate the types off the schema if you use GraphQL.
@@jherr you wouldn't happen to have a video on that? 😊
You have some of the best videos on TH-cam 👏
@@Norfeldt th-cam.com/video/UbEx1v26kCs/w-d-xo.html
@@jherr trpc is better than generating types
really good video! you´ve got a new subscriber for sure. :)
Hi, how to create rtk query with sending Basic authorization to server?
Thank you
hello Jack, great tutorials, thanks !
but when I try to run the code with npm install and then npm run start I get the following error : Package subpath './lib/tokenize' is not defined by "exports"
then after I solve this by running this from bash export NODE_OPTIONS=--openssl-legacy-provider, I moved past but I got stopped by another error - @reduxjs/toolkit/dist/query/react/rtk-query-react.legacy-esm.js 59:23
Module parse failed: Unexpected token (59:23)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
I'd like to see a video which uses SWR
what does ! in ref.current!.value?
Thanks for the video it really helped me alot, btw what's that plugin which autocompletes yarn command and lists node packages whenever you type something??
That's Fig.
@@jherr thanks!!
hey Jack, would be nice to see a video on Nextjs Turborepo, and also would love to see a video on TurboRepo vs Module Federation
What theme you are using in the Zsh terminal?
Awesome tutorial.....thank you
But I'd like to ask, can one use both of these for data fetching React native too?
AFAIK you can
You should compare them to SWR!
hi.........
How much data can we save in react query cache?
best tutorial 😍
Type 'string' is not assignable to type 'never'. on the tagTypes
That means that the tagTypes array is defined by an inferred array value `[]`. Which is interpreted by TypeScript as `never[]`. You need to declare `tagTypes` as `string[]`.
Hello Jack,
Thanks for this amazing tutorial
I have a question please, whats the purpose of using useCallback in 9:01, you havent passed onToggle to an other component, i want please to understand why you choosed to use usecallback here ?
It's overkill here. You don't need it.
@@jherr Thanks man, you're a great instructor
Great video! Sorry for the late question, but I was wondering if GraphQL fits at all into RTK Query?
Any web request will work with RTK but maybe you would be better served by Apollo client or URQL or GraphQL-request.
pls create a video for atomWithQuery in jotai
How does this compare with Redux saga?
Funny you should ask: th-cam.com/video/0W4SdogReDg/w-d-xo.html
What if the backend is graphql API?
It’s just a different post body format.
How to map data returned from fetchBaseQuery in the createApi (not in the Component)?
Can you give me a time reference so I can address exactly what you are interested in?
I mean for example if I want to return todos.text instead of todos 6:30. I have more complex data and it return me response.response.player but I want to return only player how to do this?
@@piotrkrysiak9414 You can destructure as far as you like const { response: { response: { player} } = { ... } is ok.
@@jherr ok I know that but I thinking about doing it in fetchBaseQuery
@@piotrkrysiak9414 Gotcha, well, first of fetchBaseQuery is just a helper function, you can provide your own version of it. But... you could also just add on fetchBaseQuery(...).then(resp => { ... }); And mutate the data version of the response in that then block to restructure the response however you want.
Why do you add a ref to the input ui element?
To get the current value. In react terms that’s an “uncontrolled input”. The other way to do it is to have some state and the set the value to the state and update the state during onChange.
@@jherr got it thanks
How can I implement api if I have for example 5 endpoints for users and 5 endpoints for products and 5 endpoints for something else , I need to call createApi three times ? And where I can combine them in the root level ?
Sounds like a great question for the Discord server: discord.gg/eQj6G3qD
Create an apiSlice, add createApi as the tutorial said, use localhost:5000 as the baseUrl for example , add everything and leave your end points empty then create new files for your endpoints, this time instead of using createApi, use ApiSlice.injectEndpoints
No. Create multiple createApi is an anti-pattern. There should only be ONE createApi! Just like only one redux store. You have 2 choices:
1) define all of these endpoints in createApi
2) split these endpoint to it's according slices by using injectEndpoints api. This will enable code-splitting of createApi. So you can create 1 injectEndpoint for users with 5 endpoints described here, 1 injectEndpoint for products with 5 endpoints described etc...
All these injectEndpoints will be merged to single createApi under the hood. Just like reducers to single redux store
Jack, you're so awesome. I love your videos.
Well from architectonic point of view:
redux toolkit should solve balast of plain imutabile redux store, every side effects containing rest api should handle react-query, why?
Because why not, i will pick best of the two worlds and don't care about few dependencies.. who does app in react to work in super strict mode of bestly optimalizations anyway (personal experience from multiple large production codebases)
Redux is not even necessary in most of the apps especially next js ones, if you have control over server and do large app with micro frontends, even Dan Abramov says: redux is only for data storage if you not know where else it could be put.
Good comparsion, but imho if you compare these just a mention that RTK is not necessary with redux toolkit, a lot of "inexperienced" programmers will start to rewrite react query into RTK just because they want to use redux toolkit which is fundamentaly bad decision
Thank you for this example Jack! Really helpful! Is there a way to use axios with RTK Query as well? And attach the token from next-auth session for example?
Extend basequery function you can use axios with rtk query
Awesome Jack ❤️
First comment ❤️🙌
As a newbie learning React and learned JavaScript only since ES6, seeing the "function" keyword irks me lol.
How about SWR?
Text editor font could be smaller doesn't have to be font size 36😂 It is a great tutorial. Thank you very much!
I recently started to learn React Query. Should i learn RTK instead? Please help.
If you use Redux then you should use RTK. If you're not using Redux then I would continue on with react-query.
@@jherr Thank you very much for your response. I was quite confused. It really helped. 🙏🏻
What about web components? All you know about this topic!😀
It's an older set of videos, but web components haven't changed much: th-cam.com/video/_Tr9ZcXcMjQ/w-d-xo.html
I wanna buy your awesome react typescript course (project).
torrent
Kessler Garden
What the hell is current!.value??? Is that an operator “!.”.?? @ 19:13
I haven't looked too deeply into this yet but what would you say is the main advantage of this approach instead of just Redux toolkit with Redux thunk?
You don't have to manually manage loading and error states for each thunk, RTK query will do it for you. Also, response are all cached so the application feels faster because it displays the cached data even tho in the background is updating the cache refetching
I just don't like how you skimmed over 80% of the project in the first 30 seconds. When I try to apply this knowledge, there's literally a giant gap in the steps I need to take.
Fair point.
As always, Redux makes the stuff more complex
REACT-QUERY + ZUSTAND > Whole Universe
Do you still have this opinion?
@@andrewcathcart ofc
what themes and fonts are you using in vscode?
It's always listed in the description, in this case it's Night Wolf [black] and Monolisa.