Redux Sagas vs Redux Toolkit Query

[@saakshyadevat9612]

Loved this comparison. Rtk query vs react query could also be an interesting discussion topic.

[@jherr]

You read my mind. Let's see how this one does.

[@saakshyadevat9612]

@@jherr another suggestion. How these new rest api handling libraries like rtk query and react query compare to using graphql clients like apollo. Thanks for all the effort you put in all your videos jack. :D

[@jherr]

@@saakshyadevat9612 Yeah, I'm gonna start off with REST and see how that goes and then see if folks are also interested in GraphQL. But if you really want to see this happen. Post about this video on social media! Let folks know you like it and the channel.

[@saakshyadevat9612]

@@jherr will surely do👍

[@alonfai]

I would like to see SWR also compared with all options together : RTK Query, React-Query, SWR and Apollo (both for REST and GraphQL)

[@AliAlmahdi]

You are a great teacher, I remember reading all the documentation when redux was the hype. I wish you did this video back in that time, would have saved me a lot of time. Now, In many apps, similar to this kind, I’d rather use SWR or React-Query for this kind of state management. Rest of state, either Valtio, Zustand or rxjs.

[@jherr]

I've got some more code ready to go.

[@AndyHoebeke]

@@jherr A comparison with useSWR would be great. However, using Sagas with RTK Query (or others like useSWR?) seems interesting but rarely addresses because.. too "advanced" or simply not recommended (in that case what would better? why? --> great content?) :-)

[@raskardev2737]

This kind of videos really demonstrate how RTK can simplify and make more with less. Redux Saga is awesome but I think that I'm going with RTK for future projects! Nice video as always, Jack 👌👌

[@krishgarg2806]

I think for personal projects, swr or react-query would be better because of better DX.

[@narcissisticnarcissus4956]

You knowledge is so solid. I feel like you don't have to google around and read documentation. Instead you just know everything from the ground up.

[@jherr]

I definitely use Google a ton. Thank you for the compliment though.

[@aksyonov100]

If you want to loose half of your team, introduce redux-saga into your project. The amount of boilerplate code is enormous, complexity through the roof, nobody wants to support that

[@_benjimouse_]

It really feels like sagas are a hang over from class components, classic redux days. In 5 years of using them on a variety of projects, I've never seen anyone do anything with them, other than just call an api, handle the errors, and dispatch result to the store. Why even bother.

[@voidreact]

@@_benjimouse_ I feel that for simple use cases like that Redux sagas are way too complex and way too overkill. I'm working on a complex project where there is conditional data fetching based on other data fetched, so it's easier to write and maintain that in a saga than in a react hook or component

[@_benjimouse_]

@@voidreact Yeah, sounds like a good use case for them. I just wish the api was more like hooks...

[@Oswee]

Doesn't that depend on the project you are working on? Imagine large scale real-time enterprise app where the eventual consistency is in it's DNA. Sagas is really great and they help to modularize the codebase tremendously. Blaming and running away is for those who are not willing to learn i guess.

[@portalplays3760]

Sagas are great for complex apps that require organised management of side effects. These newer libraries with less boilerplate are missing some key features that sagas give you that you won't realise you need until you are already invested. Be careful following hype trains.

[@dgcp354]

When you said no bs TS you where not joking, great video as always

[@andrewwall2730]

redux-saga is my fav. It has so many features(handling external events, concurrency) and sagas are easily testable and code very clear and concise.

[@idevbrandon]

You read my mind! i was studying Redux middlewares and now faced to RTK Query. i was like why there's so many redux sth bla bla haha Thank you so much!

[@andreicojea]

This channel should receive more love ❤️

[@xdrap1]

Redux Saga is advanced because you will deal with generator and everything but the downsize is verbosity; RTK Query is easy and more simple to use but unlike React Query, you don’t have a infinite scroll implementation. At the same time React Query hasn’t a stable persist store implementation like RTK has. So yeah, sadly none of them got all the features so you need to choose which one will fit better for the work.

[@SmartWizzard]

Excellent timing, I was looking into these only.

[@zerocodercool]

Excellent explanation! I use them both in different packages on a monorepo archiecture.

[@YuriiKratser]

Thanks! As always you are on top. It'd be cool to have a similar video with react-query.

[@techworld3043]

. Lol i don't know about React but i still watch your videos for fun 😂

[@jherr]

Thanks! I try to keep it entertaining!

[@marouaniAymen]

Thanks for the video, actually we use redux-saga as a middleware for redux in order to manage asynchronous calls, we structured the state as the following { data: null, loading: false, failure: false, error: null }, so we init loading at true inside the saga "function generator" at start then we call the api with axios when data come loading is set to false but in case of error we set loading to false and set failure to true with error message in error. My UI components (spinner, notification toasters) shows and hides when those attributes in the store changes. But I'm thinking to use react-query, I fond it more intuitive and reduces the amount of code w are using with redux and redux-saga. Thanks again for the video, like your channel.

[@mahmoudjbour7322]

React-query is a server state only, it won't reflect the UI state, which will force you to write more code and it will be resulted in a buggy code.

[@ilyastrus4770]

There is actually not much sense to compare rtk query and sagas. You can easily use both at the same time! Rtk query, react-query, swr, etc are made specifically to solve your typical problems when working with network (caching, bad internet, boilerplate, loading state...). You shouldn't use sagas for these! Instead, it can be used to handle complex flows, when you need debouncing, throttling, cancellation, race conditions etc. Another use case is sending some analytics or writing user preferences to localstorage on various redux actions. In that case you can easily plug in/out these side effects, without changing the main code. Websockets are also playing nice with sagas(with a little help of saga channels). I, actually, haven't use redux much lately, but still in love with some of the sagas concepts. Especially with redux-toolkit, when you don't have to write all that redux boilerplate nonsense

[@jherr]

Yeah, that's the point I was trying to make at the end there that the two systems cover fairly different ground. Sagas is great at handling complex asynchronous interactions. And RTK Query is excellent at in-depth query management. And you are right they, could make for a great team.

[@abhvr]

The transition at 0:20 🤩

[@BlinkByteChannel]

Can you do a video on optimistic updates with RTK mutations, example, updating or deleting things? I have read the documentation, but there are no simple examples of how to do it right.

[@wishmeheaven]

A copule of years after this visdo was release so I hope the questions are legit, But before - Thank you for another enriching video! - Does anything change in the last couple of years regarding the pros and cons of Saga and Toolkit? - When would you recommend more for async api integration in a full stack app - Saga or Thunk ?

[@lucasduarte7558]

I like so much yours explanations! Your nature windows are amazing 😍

[@akashshrestha01]

More videos on RTK plz

[@alejomakevids]

Darn, generator functions. Never got a grasp of them may be time to learn about it.

[@bysolly]

Loved it. ❤Redux Toolkit Query vs React Query ⚛

[@cdoremus]

Nice job! Can you elaborate on what use cases would require redux-sagas? They are way too much cognitive load for my nervous system to use efficiently.

[@jherr]

Something that would have a lot of choreography between asynchronous events. Maybe a UI that's working with a bunch of microservices directly and needing to make complex sequences of calls.

[@szymon8877]

redux saga is also very straight forward when it comes to testing

[@RajeshSoni-b8u]

Nice Video.. Which VSCode extension was being used for react code completion or snippets?

[@arealisticdreamer]

Great video. What extension did you use to have these code suggestion?

[@jherr]

GitHub Copilot.

[@mani8586]

Very good session... thanks Jack 👍

[@jr-hp7er]

Amazing, was waiting for this :)

[@piyushaggarwal5207]

you are simply jherr

[@ahmedChebilahmed19chebil]

currently i m using a combination between redux-saga and redux-toolkit

[@wishmeheaven]

Thanks for the representation, although... If those are like apples and oranges - why not include an example of how to use them together..?

[@piyushaggarwal5207]

But can we try to use both at the same time somehow? I don't think its possible. Just asking if there is some way to do that.

[@AndyHoebeke]

I don't find much content about using RTK Query together with Sagas. Sagas call APIs... so.. they could benefit from RTK Query's caching mechanisms and other features... or not? It works, but does not seem so clean to use RTK query inside Sagas ?

[@anishbishnoi29xD]

Which one should we use rtk redux toolkit or redux saga ?

[@AndyHoebeke]

@AnishKumar-qe4cc Redux Toolkit (RTK) is great. It's a way of using redux with less boilerplate and less chance of bugs 🐛 RTK Query can be used whether you use RTK or not. At work Sagas are used a lot but increasingly we use RTK Query for new parts of the code. You can do a lot with it. The main use case that we still would use Sagas for is when you have requests for many items, some of which may already have been fetched before, and you want to skip fetching them while still including them in the final response. And, when you have several actions triggered by an API query, which can trigger their own API queries.

[@anishbishnoi29xD]

@@AndyHoebekenice, thank you so much. ❤️

[@thehaptiK]

very helpful. thanks, Jack!

[@xtinctspecies]

Just shows how awesome life is when using Graphql and Apollo client

[@navneetkumarsharma9092]

Hi jack, I guess you should update this to use redux toolkit with redux saga

[@saviorhavely]

Very good, thanks for sharing

[@yasser.dev7]

Great content as usual thank you!

[@ProgrammingWithOsku]

I like when you do this , heey its work hahah

[@andyfifedenim]

I would love for you to do a video on react with variants.. ie a shopping cart with item options…

[@sunstrike8943]

which extension you are using sir ?

[@jherr]

GitHub Copilot.

[@imchiennb]

That content is awesome, wish you have stronger to make more videos!

[@jherr]

Yes!

[@ayoubbougroune4050]

Thanks for sharing

[@wasaviAr]

Great video!

[@gandalfgrey91]

It seems that every time you say "HeyHeyyy!!" I spend two hours working out a bug.

[@archmad]

the boilerplate for redux is killing me

[@omdxp]

How does RTK Query create those custom hooks? Anyone ?

[@ProgrammingWithOsku]

This is called functional programming

[@omdxp]

@@ProgrammingWithOsku I know what functional programming is and it's my preferred way to write code. However, my question concerns about the details on how RTK create those hooks on the fly (when you type your code even)

[@ProgrammingWithOsku]

@@omdxp Do you speak Arabic?

[@omdxp]

@@ProgrammingWithOsku yes

[@ProgrammingWithOsku]

@@omdxp كرر سؤالك بالعربي

[@joshuamamroud4821]

I feel like the content is great but FWIW it's hard to follow when you go that fast. Half the time the code you add just appears (I'm assuming it's a combination of copy/pasting & video editing) then you move on to the next step. Maybe you can find a way to slow it down and show where the code is coming from rather than having it just appear? No one else seems to have made this comment so it may just be me. Great content though!

[@jherr]

I've heard that in the past. And the style tends to vary from video to video. Anything with Redux is probably going to be a little more copy-n-pasty though because of the sheer bulk of code and people not wanting to see my poorly type it out.

[@CameronRounder]

We just set up redux in one our apps where I work and we went with was using connect API over useSelector because of how useSelector re-renders anything connect to the store on any action, not just actions that update the specific state the component is watching. Does RTQ fix this issue, or does it still re-render everything on all actions?

[@jherr]

Pull down the code and have a look. :)

[@damanpreetgrewal]

You can create a memoized selector using createSelector and pass it to your getSelectors() declerations

[@andrejjovanovic3695]

gj recommend

[@dars1816]

I like the style of Redux Saga more, but that's just imo

[@jherr]

It got me back into generators. Which has been fun. I think most folks have forgotten about them.