Learn React #16: Redux Saga + Redux Toolkit

hey everyone in this video i'm going to be showing you how you can use redux toolkit with redux saga and all the intricacies that goes with it now i am going to assume that you have basic working knowledge of redux saga if you don't you can check out my learn react number 13 video which explains redux saga in depth it's recommended you understand how redux saga works because i'm not going to be setting it up from scratch again in this video it is also recommended that you watch my last video which is on redux toolkit because we're going to be setting up the redux toolkit in a pretty fast fashion and i'm not going to explain all the steps on the way because i did that in the last video this video is really so that you can see how redux saga differs when you use it with react toolkit or sorry redux toolkit instead of plain redux and if you find value in this video please consider leaving a comment subscribing and maybe tagging some of your friends sending it to anyone that you know that wants to learn react i can't tell you how much it helps with the algorithm and i'm really trying to my best to keep on putting consistent videos out there for you guys and i love seeing all the feedback that you guys are giving me and thank you so much it's been amazing interacting with you guys so without further ado let us get started as you can see i have the application that we made in video number 13 open over here and just to give you guys a refresher it's a pretty simple application the only thing that redux saga is being used here for is for getting all these users and if you don't remember we created pretty much a fake endpoint that would just return a list of users you can see if i actually go there it'll return this user anthony sastili with the id one now that's not actually the users that are being shown over here at the bottom it's just the person that's being showed up here so for simplicity's sake we're only going to be working with that one redux call and showing you how you can do that with redux toolkit so the nice part about this is the difference between redux and redux toolkit when using um redux saga is very very small in fact if you remember for redux saga we split things up into three main parts the root saga which has our watcher that will watch for a redux action and then call a redux saga handler the redux saga handler that will essentially call the thing the request and actually get the data and determine what to do with that data and then of course the request which is essentially just an axios request which will actually call the server so the order of it just to refresh you guys goes the action is called from the front end via redux our watcher saga takes that action from redux and calls our handler our handler will then tell our um request to make the call and handle the data that the request brings back and in between that the request will just make and return the api request and the data from the api request the handler will then take that data and decide what they want to do with that data now the first thing we're going to do is we're going to go ahead and we're going to set up um redux toolkit again now the cool part of this is redux cool kit if you have a mix of regular redox reducers um like for example we have two reducers here we have our user reducer which is what we're going to end up changing and our counter reducer which we're not going to touch in this video um if you switch your configure store um and do all the stuff we did last video with setting it up so it all comes from redux toolkit instead of redux saga then it doesn't actually um you know stop the regular redux producers from working so i'm going to pause the video and switch everything over if you want to see how i switched everything over you can watch my last video but i won't waste your time in this video with doing the switch over so let's do it all right and that is pretty much done so just to give you a brief explanation of what happened we pretty much just swapped our entire configure store from redux to redux toolkit the main difference is as there's not many much you'll notice in the last video it looks almost the same as it did in the last videos except we're now setting up the saga middleware and um inside of this you know configure store where we specify what middlewares we want to use i'm just going to go ahead and import saga middleware uh create saga middleware and create a saga middleware and just add that to the end of the middlewares array and of course if you had any more middlewares you could put a comma here and add whatever middlewares you wanted to to add more stuff like redux logger for example but that's for another video so now that we have our configure store set up we can go ahead and turn what we have over here oops this user reducer pretty much into a user slice so let's go ahead and create a folder file and call this a user slice and then we're gonna go over to our intermediate react tutorial and we're just gonna copy uh this slice um format because it's just easy to sort of and i do this a lot and i like to use a lot um i like to keep the documentation open especially when it's something i'm still trying to learn and maybe this might be helpful for you guys to do as well i like to just keep something that i find that contains the the skeleton of what i'm trying to make and then i just like to hollow it out and i sort of get used to it like that so for example this is called to do slice we're gonna go ahead and um if you highlight something and this goes for a code sandbox and vs code and you click control d it'll highlight other instances of it as well so i can go ahead and rename this to do slice in all these places from two to slice to user slice and you'll see it updated over here but it also updated at the bottom and over here as well just a cool little hotkey that you guys might find useful so let's change the name to user let's create the initial state so the initial state if we go back at what our original user is we can see the initial state is um an object where the user is undefined so we have two options here we can either a make our initial stay for here pretty much the same an object with the user undefined or we can since this is just going to be used for our user and our user object is going to be essentially what we're going to be editing um and i don't plan on you know adding more variables other than just user we can just go ahead and make the initial state of our user state our initial state of our user slice just an empty object and instead of having an empty object with a user object and then having stuff inside that user object we're going to just treat this like the user object and just put in all the stuff that would normally be in the user object just at the top level of this object instead just to keep things a bit more clean um and you know you can always refactor something like that afterwards so now let's go ahead and what we're going to do is we're going to hollow out these reducers now this is where the cool part comes so you can see here for example we have two calls one is get user and one is set user and you know it's a bit straight extraneous because this get user is pretty much an action that has no um you know action in our reducer um because what it's being used for is just triggering um this root saga take latest right um so what i like to do for stuff like that and it saves you a lot of code because you don't need to go ahead and like you know declare a set you um get user over here and then declare it over here as well which takes up a lot of space and if you have multiple api calls multiple things that are going to be triggering actions in your um redux saga um you're going to have a bunch of these sort of like actions that don't really do anything that you're just declaring for the sake of declaring and they're taking up you know four or five lines of code every time you want to declare it let's go ahead and hollow out these uh reducers what you can do is you can just for example and um this is one of the reasons that i really like um that i really like redux saga or sorry redux toolkit is you can pretty much just declare get user as an empty function and that's it and you don't have to you know spend all these lines of saying okay we're going to make a new action called get user and then we're going to go ahead after we have get user and we're going to you know have to declare um the action type and any variables that you might want to pass in and stuff like that because all of that will just get put into the um the payload of the action anyways so it saves you a lot of uh code and a lot of boilerplate code that if you want to make a new thing over and over again so we have our get user and we can go ahead and export that and then the last next thing we have is pretty much our set user action and our set user action is going to be pretty straightforward so we're essentially going to create it it's going to be looking something like this we're going to have the state and we're going to have the action itself and then of course um we can essentially just whatever we get back from the action so const like user data is going to be equal to action on payload um whatever essentially is being passed in we can probably just set it to the state um so we can just go ahead and return.state just in case it doesn't override all the state variables that are already in there and then of course we can just spread our user data and what this will do is let's say for example um just for an example if our current user state looks something like you know id uh three name anthony you know last name um you know still and let's say like role is like um you know i don't know like software engineer and then let's say for example we get the user again um but this time you know it probably won't happen in this example but let's say for example if you were using an api that would just um when you get the user it would just let's say you pass in a parameter to only get the role of the user and it returns something like roll um you know as let's say software senior software engineer let's say it updated this would make it so that when it returned it would return all the old data and then overwrite only what the new data has so that's the purpose of spreading the initial state which will say okay we want the new state to be all of this and then also spreading the new data we get which is saying okay but we want to replace any of this data with um anything that matches from here so essentially your end result will be this uh what it used to be before but this role will now change the senior software engineer um so that's i think i explained this in the regular um redux video but um just as a refresher because i know the syntax can be a bit confusing since we're using a redux toolkit and things are different so now we've set up our get user and our set user we can go ahead and export both of those actions now let's go ahead and start using it so first things first let's use the um get user thing so so let's go ahead into our application that actually dispatches get user and over here instead of um importing get user from you know over here uh we can just simply import it from our new user slice and that probably will just work straight up so you'll see here that it's not actually making the call so um what's happening is this action is getting dispatched but our redux saga is now listening it's still listening to the old getuser coming from that duck we want it we want it to listen to the new getuser and here's one of the other nuances that comes with redux toolkit so i'm going to go ahead and import getuser from the user slice but if you remember our user slice will export this entire um action all at once so in order to get the actual action type that you want to listen to you would have to replace that with get user and then do dot type and you'll see here there we go now the call is being made now if you the reason we're doing this is because if you look at what we had before before we were exporting uh and you know taking the latest of this get user coming from the old reducer and that was essentially a string of the action's name and and in the name for an action in redux is known as the type so when i am now doing um getuser.type what's actually being returned here if i were to for example console.log that i can actually come in here since we're exporting getuser in here as well i can go ahead and console.log you know like calling getuser and i can console.log getuser.type so you can see what um that dot type actually is you'll see here that the type is a string that is user slash getuser and that is what redux on behind the scenes is looking for and that's what redux saga when you tell it to get latest of some action.type it is pretty much going to listen for any action that gets dispatched where its type is essentially this and when we dispatch that action over here um behind the scenes redux is saying okay the action that got dispatched was um you know user slash get user and that's what the root saga is listening for so just another one of the nuances uh that redux toolkit brings to the table when you're using it with redux saga as opposed to i'm just using redux vanilla so now that we've gone ahead and we've made the api call and you can see the api call is being made properly with the new user slice um however in our handler if we let's close all of this if we go over to our handler we'll see that our handler is still using the set user from the old reducer over here and also our application is still reading the data from our old data so let's go ahead and fix that one by one so over here instead of um putting a set user from our old um reducer what we can do is we can replace that with the user slice so we're calling that from our user slice but it won't actually just straight up get that data anymore and the reason for that is when we um call set user what we actually have to remember is that redux saga is essentially going to be using um because we're using a redux toolkit we are essentially calling and setting the payload so we no longer can just call set user and pass in one variable because redux toolkit doesn't have a way to specify that when we want to specify something we always have to now put it as in we are setting the payload for something and when you set the payload it's essentially just going to be an action or sorry an object so when we call set user from our user slice we can pass in our data and we can destructure our data so that everything will be put into the payload object and when we come over here so let's go ahead and come into our user slice and let's console.log so console.log we are in the user slice for a setting user and now let's console.log what this user data actually looks like so let's console.log user data and you can see here oops let's see is this actually getting called um so let's make sure that we did that properly in our handler we're getting set user from the user slice and we are um putting over here that looks correct so let's just make sure one more time this is the proper set user yep so this should be getting called let's see for example let's try debucking over here so we can see that on our end it looks like we should be calling it so first of all let's do a bit of debugging and uh let's console log the data to see if we're actually getting the data back so you can see here we're constantly logging the data and we're getting the data back so the problem is happening on this set user so let's go ahead and make sure that we did everything in the set user correctly we come over here we see set user is an action we've exported it correctly everything looks fine on the surface however after a bit of debugging i realized that in my configure store i never actually set the user reducer from the regular user reducer to user slice which means it wasn't really connected to the store so i'm not sure how um i guess the get user one worked i guess it was it might still have been using the last one um it's actually sort of weird uh it might just be some weird little uh thing in redux where if you try to edit the redux store itself i guess you can still fire objects from something that isn't added to the store but since we were trying to set something in a redux store that didn't work which sort of makes sense actually but now you can see um we are actually in the user slice and it looks like we are setting the data properly so we can go ahead get rid of all these console logs just like this and now the last step is to replace in our app um where we're getting the state um pretty much replace that um uh that data so we can come over here and over here i think we still called it the user object so let's go ahead and try doing one of these and bam we can see here our user object is now coming from state dot user which is essentially just the top level of our user slice and if we go ahead and console.log the user here and oh we already are doing that over there and we can see that it's pretty much being set properly now the last nuance with redux toolkit and redux saga i want to show you is when we make that get user how we can pass data in to the api request because if you remember and let me close all this stuff if you remember over here in the user slice this get user is just an empty function and one of the main things in redux was you know when you declared an action um you passed in all the variables that you wanted to be available in that action and what you can actually do here is in our get user it'll pass whatever you pass in as one big payload object so i can for example let's get rid of these console logs pass in an object and i can see say like test is equal to the variable hi i can say like um you know if i wanted to pass on a specific id i could pass an id like one and if i come into my handler where we actually start using this you can see um we have action over here we can actually go ahead and structure the payload uh from the action and let's console.log that payload to see what we have inside and you can see in that payload we have the variables that we passed in so if we wanted to for example pass in variables like that to our blank action we could just go ahead and pass them in as one object and when we want to use them wherever it is we can just get that from the payload which comes from action and use it however we want so if we wanted to you know pass this into the request get user let's say we want to pass the id in we could do it like so and then we would go ahead and modify the request guide user but that is pretty much it for redux toolkit and redux saga so to recap the nuances we saw number one um the whole switching over um you know to the slices and having your blank actions like that number two um the action up payload over here and um actually uh passing in the set user stuff in your handler as an object and of course number three what we just went over which is passing in um any data that you want in the blank action that you are using to make the call so yeah that is it if you found value in this video please subscribe leaving a comment uh subscribing liking this video it means so much to me and it helps a lot with the youtube algorithm and i hope you are all staying safe and i'll see you guys in the next video

Channel: Anthony Sistilli

Views: 14,321

Keywords: Tutorial, React, redux toolkit, react redux, redux saga, state management, redux-saga tutorial, react redux tutorial, reactjs redux, web development, react tutorial, redux saga create react app, add redux saga to create react app, redux saga explained, redux saga api call, react redux saga, redux saga tutorial, redux saga api, redux saga multiple api calls, redux toolkit thunk, redux toolkit react, redux toolkit example, redux toolkit 2020, redux toolkit api

Id: 2hZhIoRuua4

Length: 20min 23sec (1223 seconds)

Published: Sat Jan 30 2021