Redux Sagas vs Redux Toolkit Query

so you picked out react for your view framework redux for your state manager and now you're thinking about what to use for your api access library now there are a couple of good choices like redux saga and also redux toolkit query and we're going to take a look at both of those on this blue collar coder and use them to implement this simple to-do app so it's pretty simple thing you just go in set that things are done you can add one you can delete and this is all backed up by a simple nest js server you can get a list of all the to do's you can go and post one to create a new to do put to updated to do and delete to delete a to-do so we're going to use redox saga to implement that first let's go over and check that out right now so over in this console we're seeing that we are running that in sjs service it's going to make another console and in there i'm going to do yarn create and then react app and we're going to call this saga test and give it a template of typescript all right now i'm going to go into that directory and i'm going to add some dependencies i'm going to add redux react redux and also redux saga and then i'll start it up all right so that looks pretty good now i'm going to carve down this example to get started on our to-do list that starts over here in saga test and then we'll go into app.tsx and pair this down significantly i'm going to remove all of that all the css as well and then i'm going to bring in the css that's going to drive the ui pretty simple stuff just a bunch of layout and things and fonts and whatnot so i'm going to start building out the api layer by creating a new folder called lib and inside of that api.ts and into that i'm going to bring the base url of that server which is on port 4000 i'm also going to bring in our interface that says what all the to do's are so in this case it's got the id which is just a number the text whether it's active or not just a database state and then done which tells you whether it's done or not and then i'm going to add a get to dues which is an async function that returns a promise with all the to do's it just basically fetches from that url and then returns the json so now let's go over and build our redux store that's going to make that request so we can start seeing our to-do's so the first thing i'm going to bring in is create store from redux next thing you need to do is bring in the definition for a to do from the api and now we need to go make our reducer of course a reducer has two arguments the first is a state so in that case we're just going to have an array of those to-do's and then there's the action and there's only going to be one of them and that's to-do's fetch succeeded and the payload for that is going to be a array of those to do's now let's go and implement on this and it looks like github copilot has given us a nice suggestion there all we need to do is look for that to-do switch succeeded and when it happens we just say the payload is the new set of to-do's great so now we've got to go and create a store i'm going to do const store equals and then use create store with that reducer and i'm going to export that so we can use it now let's go over to our app and let's start connecting that into our react app so for that we need a provider and we get that from react redux we're also going to need use selector get that while we're there and we'll call this to-do app and then we'll create a new function called app which returns the provider with that store around that to-do app and there we go last thing we need is the store so let's go bring that in let's see we're working okay so it looks like nothing's blowing up that's always a good start let's jump over and see how we can actually bring in a saga to go and get the to do's for us so we'll go back over here to the store all right so to get our to-dos we first need to bring in get to dues and then we need to create a saga to go and get those to do's and now sagas are created as generator functions so the way that we do that is we say function and we use function star to say that this is going to be a generator function in this case we'll call this get to do's action so the first thing it's going to do is get that list of to-do's so it's going to say to do's which is an array of to-do and then we'll yield to get to-do's and once we've got those then we're actually going to do put which will send out a new action to the reducer to say that the fetch has succeeded with the payload of those to do's of course we've got to get that so we're going to bring in put from redux saga effects we're going to need to take every so i'll bring that in as well now we're going to have a bunch of these sagas we're going to have one for getting creating updating and deleting so we're going to create a root saga that connects all of those again it's going to be a generator function i'll call it root saga so this is going to have a bunch of different yields and what they basically say is okay every time you see a to-do's fetch requested then yield that get to do's action pretty simple stuff so we're gonna have four of those effectively and those are gonna route the actions to the different sagas so now we need to go and connect this to our store so i'm gonna go here to apply middleware it's gonna be middleware and then i'm gonna bring in create saga middleware from redux saga core so the first thing i need to do is create that by just invoking create saga middleware and then and then i'm going to apply that to the store and the last thing i need to do is actually run that root saga so let's go back here and say run and then give it that root saga and that basically initializes it get it getting it ready to go and listen for in this case just to do fetch requested so now we need to actually go and fire off to use fetch requested so let's go back over here to our app.tsx file and i'm going to bring in use dispatch because we want to dispatch that action to request the to do's and we're going to dispatch it from a use effect so put the use effect in our to-do app and we'll say that we only want to run once by giving it an empty dependency array and now we need our dispatch so we need to say dispatch is use dispatch and then we want to from here just dispatch that type but in this case to do fetch requested and that will fire up our event send it off and hopefully get some data so now let's go and get the to do's by just using a selector and getting the state and now we can jump down here and do json stringify and give it the list of to-do's hey all right pretty good start very cool so let's put in some additional html and now we're seeing some issues around the fact that to do's is considered an e so let's go and actually give ourselves a selector that allows us to say that this is actually an array of to-do's so let's go back over to the store and then i'll export a new selector and that's just going to coerce that to be a an array of to-do's so let's bring that over here into our app and then use it as a selector all right looks like it's happy let's go check our ui and yeah looks great very cool and these are actually set to done because we clicked them before that's awesome so now we need to go and actually do the toggling here as well as the delete and then also the create and see how that works so let's go back over to the library and bring in the additional api routes that we're going to need to do create update and delete so we start with create to do it takes a text string and then it returns a to do by and all it does is just use the same fetch but use a post here as well as adding on the application json header type and giving it the right body update does a similar sort of thing except it does a put and also does it on that id and then it just stringifies the body and then finally delete just calls the delete method with the given id and there you go so that's good enough for all of the api access we're going to need so let's go over here into the store and start wiring this up so the first thing we want to do is bring in update to do's and then i'm going down here and define a new update to do action and what that's going to do is update the to do and then it's going to put out a request to go and get the new list of to-do's once that to-do has been updated now as you can see everything here is the happy path and that's actually one of the things that we start contrasting this versus the rtk implementation is i'm not putting in here anything around whether it's done whether it's pending whether there's been an error any of that stuff all of that all this stuff that i've done so far is around the happy path and around managing how all the asynchronous actions work and how they all work together which is what redux saga is really good at okay so let's actually wire this up into our root saga all we need to do is set the right key here to update to do requested and then attach it to the update to do action like that and now i want to actually go and be a little bit nicer about how we create these actions so i'm going to go back over here to this dispatch and then i'm going to go create a fetch to do's function which just returns that structure and that's going to be the action creator and i'm also going to create an action for toggle to do's this is going to take it to do and then request an update to do but say that we want that to do done inverted all right so let's take those and wire it up let's go back over to our app and then bring that in fetch to do's and also toggle to do so fetch to do is going to place this down here and we'll grab this whole structure dispatch everything and bring it down into here for the on change we dispatch toggle to do and then just give it the to do all right let's see what we do so we go over here okay looks like oh yeah all right this is sending it off because when i hit refresh everything sticks which is great all right let's do the same thing for delete so go back over to the store and then the first thing we need to do is add that saga so i'm going to go and add a delete to do action it's going to look for it to delete to do requested the payload is going to be a to do and then it's going to yield to delete to do which you need to bring in and again we need to wire it into that root saga and then fire it off okay now one last thing we need to do is do the action creator so i'll add that down here as remove to do now all it's going to do is just say the type is delete to do requested and give it the payload so let's remove to do there save it and go back in here now we got to remove to do we just need to dispatch that so go down here this is the to-do area so that and put in remove to do okay let's give it a try let's see uh i don't want to learn react anymore ta-da awesome cool all right so the last thing we need to do is add some ui to go and allow us to create a to-do so let's go and add that down here cool so it's basically a text field and then a button so the first thing we need to do is create a use ref for that text graph so let's do use ref and also use callback now that text ref is the use ref of just an html input element now we need an on ad but it has nothing to add with yet so let's go back over to the store and we add a a new action for creating a to-do it's going to take a payload and that payload is a string it's going to fire off to create to do which we need to bring in and then we need to wire it up again so let's go back down here to the root saga again you bring in let's see create to do requested and wire that up to create to do action looking good okay great and the last thing we need is a an action creator pop that down there we'll call it add to do and all it's going to do is format an action with create to do requested and then the payload okay let's go over here to our app and bring that in from the store add to do and then we need to create our own ad so on ad is this going to be a callback it's going to dispatch that ad to do with the current value and then it's going to set that current value to nothing so let's hit save and then go in here and see if it happens goodbye and awesome very cool okay great so that's it for the redux saga variant the next thing we're going to look at is the redux toolkit variant to see how that compares in terms of api access so let's go over and create a new project we'll close all this out and we'll bring up our terminal go back to directory and again i'm going to do a yarn create react app but this time i'm going to call it a rtk test all right now that's all done let's go and add some dependencies i'm going to add redux again and react redux and then also redux js toolkit that was fast okay let's go back over here to our rtk test and then try it out all right we're back where we started but i think this one's gonna be a little bit faster so we'll go back into rtk test and again i'm gonna pare down the app and then go into the css file and update that all right looking good let's take a look at how we got yep nice blank screen awesome okay so the next thing i'm going to do is create a new file called store.ts and that's going to have our api provider so i'm going to bring in the definition for that to do it's the same as before and then i'm going to bring in the imports that we need from the redux js toolkit now it is optional so it's on query react not part of the base so if you don't use it you're not actually going to pay the freight on the overhead for that and the next thing we need to do is create that to do api so i'm going to say const to do api and then give it the create api now we need to start off giving it a reducer path we'll call this to-do api and then we need to give it a base query and to do that we use fetch based query and we're just going to give it a base url with that localhost all right so the next thing we're going to do is specify the different tag types that we have and these are invalidatable entities within the system so in this case we just have our to-do's and then we're going to have a whole bunch of endpoints and endpoints basically takes a builder and it's going to return an object that has all the endpoints in it so example in this case we're going to use get all and it's going to run query where we're going to specify the output type which is an array of to-do's the query is going to be for to-do's and it's going to then provide tags saying that it's going to get data and it's going to get the list of all the to do's so that's the entity that will then get invalidated and cause this to automatically refetch when we update or create or delete a to do it's really cool all right so the next thing we need to do is provide this to do api down the chain so go back over here to app.tsx and bring in the api provider again we're going to call this to do app and i'm going to create a new function called app which is then going to return that api provider but it needs that api so i'm going to bring in to do and also the to do api from store and then pass that down using api all right so now back over here in the to-do app we need to go make that call so i'm going to call to do api and then use the get all query now this is a really cool thing about redux toolkit is it's actually gone and built a whole bunch of hooks for us automatically so in this case it knows that we've got the get all here and so it's created a hook called use get all query which is really neat so let's go and do that json stringify trick again and see how we do hey how quick was that that was really cool all right so let's continue on and build out our to-do list all right let's replace our json stringify with them beautiful ui and also it's really cool remember how we had to go and do the type coercion before we don't have to do any of that the redux toolkit is automatically maintaining our types as we go through so let's take a look and see how we did hey really neat and it's actually got the state from the original example which is super cool too so let's start wiring up the ability to update it to do so the first thing we need to do is go back to that store and then we're going to add another endpoint this one is going to be called update to do and in this case instead of using a query it's going to use a mutation and it's going to take it to do and return it to do but we still provide a query which is going to take that to do it's going to then do effectively what we're doing with the fetch stuff before but this is actually a lot easier for example all we need to do is specify the url that we need and then we want to put and then we want that to be the body and it's automatically going to do the json stringify it's also automatically going to invalidate the tag for the to-do's list which is going to force get all to get call which is really great so let's save that out go back to the app and then bring in the hook that was automatically generated for us so that's the use update to do mutation now we've got update to do and we can wrap that in a callback so i'm going to go bring in use callback from react and then i'm going to bring in on toggle and that's just going to call that update to do that we got from that hook and send off that we want to update the to do and we want to invert that done so let's do on toggle here and we'll go over to our on change and then just call on toggle and give it to do let's see how we do all right looking pretty good nice and if i refresh looks good very neat all right let's keep going so now i want to be able to delete a to-do so let's bring in another endpoint for delete to do now this one's gonna be very similar to the update so again it's mutation and again it's going to mutate on that particular id so it's going to give the url of the to do's with the id and then it's going to have the method of delete as opposed to put for the update and i'm just going to send along the body it doesn't really matter and again update the list of to-do's very cool so let's go back over to our app and this time we'll bring in that delete to do and again wrap it in a callback just drop this in here and all this is going to do is basically just fire off that delete to do so let's drop it into this delete right here and give it that to do very cool don't want to learn d3 anymore how about that okay looks good great perfect okay well now we just need to go and add it so let's go and add the ui for that and drop it down here and we need that text ref again so let's go bring in use ref cool and now we need to go and add that mutation and we'll call this one add to do and again it's going to be mutation all it takes is a string it's not going to return it to do but whatever that's fine and it's going to give the body of the text and then again invalidate the list of to-do's let's go back over here to app.tsx and then we want to bring in add to do cool with that add to do mutation automatically created for us and the last thing we need to do is make that callback so let's pop that in here after that text graph very nice let's give it a go awesome nice all right well i hope you enjoyed that and learned a lot about how redux saga and rtk query cover kind of different things in this case redux saga is really good at doing asynchronous management of any sort but it doesn't give you the kind of error handling and status management that rtk query does rtk query is excellent at managing that but isn't so good at managing just kind of random asynchronous tasks so these two things are a little bit like apples and oranges when it comes to versus but it's also really cool just to be able to see it and play around with it like this and i hope it helps you in your evaluation of the api access layer that you want to use of course in the meantime if you like the video be sure to hit that like button if you really liked the video be sure to hit that subscribe button and click on that bell and you'll be notified the next time a new blue collar coder comes out

Channel: Jack Herrington

Views: 7,162

Keywords: Redux Sagas vs Redux Toolkit Query, redux toolkit, redux, react, react redux tutorial, redux saga, redux toolkit react, redux saga explained, redux toolkit tutorial, react redux, redux tutorial, redux saga create react app, react redux toolkit, redux toolkit api, redux toolkit query, redux toolkit example, redux thunk, redux saga tutorial, redux-saga tutorial, sagas vs toolkit query, redux sagas vs redux toolkit query, RTK Query, redux saga vs rtk query

Id: 0W4SdogReDg

Length: 22min 58sec (1378 seconds)

Published: Thu Oct 07 2021