Redux Saga Explained: The redux-saga Tutorial

hello and welcome let's talk about redux saga so we know what redux looks like it has actions and it has reducers saga is a middleware it sits between the actions and the reducers it uses generator functions and it's able to do async behaviors within redux and it's great for testing so what do we need to do in order to intercept an action we'll put up a listener trying to intercept whatever action is coming from our action creators this being add to car we'll take over the add to cart and we'll do all of our logic within the saga rather than within the action this is now going to be a pure action that just passes back whatever it receives with a type attached and a payload so if the action took in say an item its payload would be that item now if we take a look at the cart actions right now since we're in add to cart here we have item cart all we're going to pass back is item cart and we'll do none of this logic at all we'll handle that all within sagas we have an add to cart here as a type sagas are catching things by their type name so we have a type of add to cart saga is going to grab every add to cart sees come across redux that means that we can't have a type of add to cart dispatched from the saga or it will be caught in our middleware so i'm going to do something like this in actions i'll rename this to add to cart saga meaning this is going to push to the saga and here i'm just in the saga dispatch a add to cart to my reducer and in sagas we don't actually dispatch or return what we do is put so we're going to put to our reducer the result of all of our logic and then let our reducer update the state so let's see where we left off in our app right here now this app has an employee name so we could find an employee from this random user generator api to come back from here this is an asynchronous behavior and at cart all of these are not asynchronous behaviors and that's going to fail because of that comment out that i did let me just bring that back real quick and we're back on so this would add this would remove this makes the call and we see a results array where george is the name and i can i guarantee you that in resorts under name it's george and the same thing happens with the customer name that's we're just making those calls there this also has a total that adds things up and subtracts the things from the cart as well and it has an alert message but we're not going to work too much with that today so let's get started with redux sagas first thing we'll do is actually set up a dummy saga just a saga that is just going to print out like its own hello world so we know that redux sagas are working so install it first so yarn add redux dash saga let's go up and import create saga middleware from redox saga perfect now above everything we're going to have a con so i'm just going to name it saga middleware not sage middleware saga middleware that is going to equal create saga middleware as a function and we're no longer using redux thunk so that gets out of here saga middleware and the middleware is being spread where it was before in our create store call so redux saga should be hooked up to redux right now i will save that and we're going to make ourselves in our redux folder a new folder that says sagas so that's our sagas folder and we'll keep all of our sagas in it the first set of sagas i'm going to make is the cart saga so let's write car sagas.js and inside of here we're going to do a very simple saga just to kind of console log something for us it'll be a export function and now this is what makes it a generator the asterisk that's a function generator now let's call it hello saga it will console.log hello from saga and that's that i will save that and we're going to now go into the store and run this saga so saga middleware dot run and it was called hello saga there it is now we have to check this so i'm just going to yarn start and let's see if we get hello saga in our console that's what we're looking for to know that this is hooked up properly there it is hello from saga that's what we wrote all capitals perfect so we took a look at this and we saw that we have a function but it's called a generator this is a generator and what's different about generators let's look at that right now i'm going to create a regular function let's call it practice this will be our practice function inside of it we're going to just console.log a few things in a row first will be i and then we'll do just um four of them so m a function now invoke that practice function like so and you see it prints back i am a function what happens with function generators let's pop an asterisk on that now we have a function generator and nothing is hitting our console because function generators have a call they have a next call attached to them so let's say dot next and we'll go there now we see i am a function so this isn't a big improvement on a normal function is it now we have to actually write more for the function to run here's where the improvement is we're going to write the word here yield now it says i and it stops where we set it where we set it to yield let's go deeper into this and to do that i'm just going to make it const uh to make this a lot easier we'll call it prac kind of the shorter practice and that'll equal that function practice and now we no longer have to invoke function anymore so prac.next same thing just the i and it yielded right there now if we call next again it'll print the rest of it but we could also yield again we could yield right here you can see i am a now it's stopped right at the a portion at this yield so if we go one more time it should print the rest of it and that's it it's finished or as generators like to say done is true so what do i mean by that let's console.log prac.next and what do we have here we have a valid we have an object with value and done inside of it done being false means that there's more to do inside of this generator there's more to do here so since i put it at the point where a was it's yielded right here it's done value is false now if we go one more its done value is true it ran the entire function you see the word function here and let's walk through that now we have console.log this one as well and this one's doing nothing okay so now everything's console.logged we have i uh we don't really need to worry about these console.logs let's just bring this up a little cool we can see everything here so we council logged three separate times we had the i and it yielded there here was the value we're not returning anything from this so the value is going to be unfunded all of them but the done feature is what i want you to look at so i it says i am not done yet but i'm stopped here we call next it does the m it sees another yield here gets to a it says i am not done yet but i ran into another yield then we call next again and we have the word function and it says i am done so redux saga is taking advantage of this in order to give us some real good access to asynchronous behavior and testing let's head back into the app and work with this now that we understand what these functions are kind of doing so we have our export hello saga function i no longer want that we figured that one out already i'll go to my store and just comment that out okay so no more of that we're going to do some imports so we don't have to go to the top of the page to the bottom of the page over and over and we could focus so just do all these imports with me now and you know that'll be the imports for this file we will import put take every you know what i'm going to do the from first so i could get some auto completion here redux saga slash effects that's what i'm looking for put take every all call take and take latest great and i also want to import some of our action types so we are going to need add to cart and again i'm going to finish this so that we can uh auto complete from this should be dot slash oh no up one dot dot slash to types okay add to cart and remove from cart need to come in here and that's what we need to get started here let's get started with our first saga i'd like to grab the cart actions and i want to do this kind of in line so we want to export this const cart actions it takes in item and cart it does a new cons placing the cart and the new item in an array and makes a new total so we'll bring in these two functions the total function doesn't need to change at all that's just a little helper for us to get the cart total whenever something is added or taken away so that's not really a saga thing that's just going to sit there and don't worry much about it here we need to change this to a saga i'm going to do a saga under it so export function with a star to make it a generator add to cart saga that is going to take in an action and here's where we're going to work on all the stuff in the body now we have this going on here with an item and cart and it already has the item in cart to make this new cart we of course are only getting the action so the action will be intercepted and sent to this saga and then we're going to need to pull off item and cart which means we need to take the logic out of here get rid of this logic and even the return the return is going to be much simpler so we will return the type will be we haven't made this type yet but it'll be add to cart and we said we're going to make it saga because we know we're going to the sagas if we say that so we have the add to cart saga and then we have the payload and the payload is going to be the item and the cart so this is what this will look like when it's all finished up we need to get the item and the cart from the action the action has a type and a payload so we're looking to deconstruct const cart comma item set equal to action dot payload now that we have that we can pretty much just do what this says right here the only thing that won't work is the return at the end see the return at the end is not how we work with sagas we need to use their put call so we will yield put and then we'll wrap all of this in our put call with parentheses like that we could save that up and we just made a add to cart saga it's letting us know that that is not defined in our types so this is now pretty much done and i can move this i could get this out of here and i'm going to move it into the cart actions and we can say goodbye to the old one now we just have a plain action creator it gets item and cart it sends item and cart with the add to cart saga type attached to it which gets intercepted in cart sagas and what did we say about that in our draw io here we saw add to cart will get intercepted by the saga in the middle so that's what's happening every time one of these types fires up sagas is going that's mine but only if we define it to be ours so let's do that next so we need to watch for the action so how do we watch for the actions at the bottom of after everything export function and it's going to be a generator and all of these will start with watch so this will be watch add to cart saga now we yield inside of this and the first thing we want to do is take every so every time it sees an add to cart saga we want to say that add two card and then the word saga i want you to send it to this function which was add to cart saga so every time it sees add to cart saga come across in redux add to cart saga came it hit it it's going to take it and it's going to send it to the add to cart saga right here the function it's going to do the function and then yield this put which will hit our reducer to update our state now we just have to wire this up the same way that we wired up the first thing that we did this hello saga head back to your cart with watch add to cart saga on your mind or in your copy and paste and uncomment this saga middleware dot run we're doing the watch add to cart saga and save that one final thing just what it's saying right here this is not defined so we have to define it and we need to bring it in in our types right here i'm going to copy both of these and all we need to do is add saga to the end of them so saga saga that is working now and we need to put that in two places one in the cart actions add to car saga and we might as well put it here to remove from cart saga and i'll change it here as well so that we don't get any errors but we won't be testing remove from cart yet now we need to fix it in our card sagas we have an add to cart saga here and we need to put it here so add two card saga and let's get removed from card saga as well so the importing is kind of done and it says watch add to cart saga is not defined that is absolutely true i did not import this i kind of just pasted it let's import oh you know what we could just do it right here perfect let's take a look now at our app and see if this is working we hit add we now have overwatch in a cart with a total of 20. let's do fortnite 51 the total is 71. this is still working and it is hitting our saga middleware on our way through let's trace it one more time and uh please follow me through on this i know if you have it already in your head this might seem like an unnecessary step but it is very important we have our add to cart is now going to say add to cart saga now we have it hit our saga our watcher is looking for it it's going to look for it and after it does all of this let's change this with a dash type add to cart and the reducer is looking it's switching over all of the types and now it finds a type of add to cart and the beauty of that we did all of our logic within this saga this is what we need in order to update our state properly so one more time action is dispatched saga intercepts saga does all the logic saga decides it's time to add it to the cart with a put call hits the reducer and the reducer works perfectly normally like it always has let's head back in and do another one there is also the remove from cart saga go to cart sagas head down to i'm sorry go to cart actions and down to remove from cart action i want to bring this in before we go to cart sagas and i'll put it right here so we have a remove from cart action and we're going to make our remove from cart saga so export function with the asterisks remove from cart saga there is our generator getting ready right there again we have item and cart coming in here all the logic is being done inside of here we no longer want that we now want item and cart being sent to remove from cart saga so that we could pull it off of the action so item and cart needs to be involved in the action.payload right now we have this new cart and so on let's get rid of that and just pass an item come a cart so now all that's going to happen is it's going to get a remove from cart action fired off and then return type remove from cart saga payload item cart so let's work on all the logic inside of here we'll take in our action and we will deconstruct our cart and our item from action dot payload and then we'll do all of this logic we can really just copy it this is all synchronous behavior of course if you're testing you could yield at any of these points you don't need to just yield what i'm saying so that's pasted in and we need to do our yield put call and we have an object in there with a type and that is add to cart without oh i'm sorry this is removed from cart that is removed from cart but without the saga and then we'll have the payload the payload will be an object and it needs to be the same as this so i'm going to paste this in new card um okay so he needs to have a new card and that's actually called hard copy i made a copy of the card so let's do that and it needs new total which is called new total this function will now work great now we need to take this function this is our action and copied it and then i'm going to remove it and then i'm going to head to cart actions and replace it perfect delete all the logic now it's just an action creator that takes an item and cart and dispatches an action with type removed from card saga with the payload of item and cart let's head back to our sagas and kind of finish wiring this up we have this function to watch at the cart saga we need to make another one and it needs to watch remove from cart saga it's going to take every and right here remove from cart saga and pass it to remove from card saga okay so when it sees remove from cart saga it's going to pass that to this function which will take the action deconstruct cart and item from the action.payload it's going to make a copy of the cart so that it doesn't have to filter over the actual cart and it's going to remove the item that was passed in then it's going to get a new total with the new cart and we're going to send a put and this put is going to communicate with our reducer in order to send it hey remove from cart and here is your payload and then that updates the state we only have one problem here you see how we handled the first one apply middle uh saga middleware.run and then we put our saga in there it would be much better if we could put many sagas in there so let's get started on that so we will export and we can actually just do this default because we will be moving it later so just do a default for now we'll export default and it's going to be called root saga and we do all of our function work make sure again this is a generator function make sure you're using generator functions and in here we're going to yield all we're using that all keyword and in there we need an array and inside there we're going to put everything that we want to send into our store instead of just watch add to cart saga let's do watch add jukart saga as a function and then we'll comment to our next one that is watch remove from cart saga as a function save that up head back to your store and now instead of watch add to cart saga we're going to do here root saga that's auto importing for me and it's a default import so do not put it within curly braces now we have a root saga there with both of our sagas being watched let's see if this is working for us we head back to our app we try to add to the cart we know that was working let's remove and that's working too this is great the total is working as well everything is functional let's make some fake async behavior just to test a few things out in our cart sagas so at the top here i'm just going to make a new function i'll just make it a fat arrow function i'll call it weight weight is going to take an amount of milliseconds we will fat arrow ourselves to a new promise and this promise is going to take in a res for resolved and we'll fat our function to set timeout and at the end of set timeout it has res for resolved and ms so it can either be resolved or rejected we're going to resolve it after a certain amount of milliseconds so we can now use async behavior let's do that on the add to cart saga we'll do everything in the function but before we go ahead and do the yield put here let's do a yield wait and i'm going to pass in how about one second that's a thousand milliseconds now let's see if it still works now we're going to press it and then wait for a thousand milliseconds to pass and there we are with the first one one second one second perfect this is working perfectly and now i'm going to remove them and you'll see i could click it many many times but it's still going to take one second for it to be down there if you want to only take say one click there's a really good way to do that with sagas it actually restarts the function every single time and it's called take latest so right now we're in take every put in here take latest and see the different behavior now i'm going to add this but i'm going to press it before the one second is up and we could kind of keep it in limbo for as long as we want because it's only going to process the latest click and when i stop it's added to the cart so that's a nice function that they have here that they give to you and it comes right from redux dash saga slash effects what do i have left here is call and take i'm going to use a lot of call in the next one so i'll get rid of these and we can leave this as this section cart sagas we could call done it is working what we want to do next is the user sagas so in sagas let's make another one user sagas dot js so our user sagas are going to replace our user actions let's see our user actions they have quite a bit of logic inside of them all of this logic is going to be done in sagas so when it comes down to it none of this will happen here let's bring this in and convert it to a saga user sagas i will paste that one in and just on top let's actually do all of our imports quick just so we don't have to go up and down i do hate doing that to people it kind of takes your head out of what you're doing so we will import put we definitely need that take every uh we'll need call as well um let's just take all in case we need it and at the end i want to show you race that's a lot of fun so import that as well we won't use that for quite a bit but we'll import that all from redux saga dash effects and we have that all in there so we need to do the same in type of thing when it comes to types let's get that out of the way we see we have find employee and when we look at our flow here reducer is looking for find employee so we're going to change the type here from find employee to find employee saga and the saga is going to push out the put the find employee to our reducer head into our types let's get that done so underscore saga and one more time underscore saga save that up here we are in the user saga and this is going to be find employee and guess what you're going to be saga and i will auto import that as well as find employee as well as find customer as well as find customer saga let's start working on this asynchronous action here as a saga so export function generator find employee saga and there's the body we're going to need all of these two actually let's bring them all down and we'll do it line by line so these two are setting up our url and our headers so that we can pass it into our fetch call so that doesn't need to yield or anything like that if for some reason you would like to yield here you can and you'll get away with it next we're going to let res await fetch we do not async of weight here all we do is yield and then we'll do our fetch fetch pass in the url that we just had and we'll pass in set headers and that is actually how it should be passed in we don't have to set headers for the api that we're using um so you might have seen me do it this way i'm not sure that this would have worked the way that i have headers written where it is sort of like that is the way to go is just do it plain and just put set headers in there the way that it is so we want to fetch that just like we were doing here the url and set headers and we could still keep it in res we could still let res equal that and now res holds the result of this fetch call now res has to do one more thing it needs to equal yield yet again for res.json as a function this is also an asynchronous call here and needs to be done like so now we can console.log the res just like we were doing before and then let employee equal res dot result at zero that's the same that was same thing that was up here now we're no longer are going to dispatch anything we're going to yield put and inside of there it's out of your way we will have our type and that will be find employee but not saga there we go the type is find employee and the payload that will be the same payload that it had which was this one employee right here so this find employee it no longer needs this async dispatch that's a redux thunk thing so get out of here you're just going to be a normal fat arrow function you're going to have no logic at all to you and you're going to pass back a type of find employee saga with payload of that employee let's watch for this so export generator so function generator there watch find employee saga and we've done this several times now so i hope it gets a little more familiar here yield take every and then find employee saga that's the call that's being made in the action.type and we want to pass it to find employee saga this right here so it'll take that and pass it up here it'll get the url it'll set the headers it'll let the result equal yielding to this fetch call it will let the result now equal yielding to this res.json call we'll console.log the response and we're going to let an employee which is just the res dot results at position zero in the array so just one employee then we'll yield put which means send it to our reducer with a type of find employee and a payload of employee now we run into yet another problem of how do we get this into our app you see we have card sagas and this one's working great because we have down here this root saga and this root saga here is just in this file so why don't we make a kind of root saga file and we'll just import everything we want in the root from the other files and send that over to our store so that we can combine all of our sagas into one so in our sagas we will make a new folder called root saga dot js and we're going to do it just like this so i'm going to take it from here and get rid of this so i'm going to take it from here and in root saga i can paste that in that'll export a default function called root saga it will yield all and it has to watch cart and watch remove from cart so those need to be imported import from just dot slash kart sagas then we'll take in that watch add saga and watch remove saga save that up and let's get our last saga in there that was in our user sagas it was called watch find employee saga okay so to our root sagas import watch find employee sagas from dot slash user sagas and just comment that in watch find employee saga and invoke it now here we are with all of our watchers in one place and we want to bring that into the store so we had root saga coming in from this cart sagas we no longer need this at all so let's import root saga from and then we want to go dot slash into our sagas and head to our root saga and we can actually just put it back there i didn't even have to delete that it has the same name okay now it's telling me that dispatch and oh yeah that's absolutely fine we haven't finished that file yet in the user sagas.js let's take a look all right it's just actually complaining because we didn't move this back yet yes but we are we're not quite done yet so i'm going to copy this and cut it out and get it out of here so we could save and it says all is not defined and roots oh yeah that's actually true i didn't do that so let's bring in all in the root saga that should be the only thing we need in here import all from redux saga slash effects all right you're good there now now let's go back to user actions and we're going to paste this in remember we don't dispatch that is a redux thunk thing we only return here now we have an export const find employee which takes on nothing returns find employee saga and there is no employee here either all the logic gets done in the user sagas right here that's the url gets the headers everything is done here rather than the user action so we're just firing off this type which we don't have up here so let's bring that in find employee saga and let's do the other one the find customer saga now everything is in this file change this one right now we'll save that and let's see what we're working with can we find an employee now we'll head to the react app we'll click find employee and it worked everything worked beautifully here's our results and we have our results it is a person named alberto there he is we have to do this one more time for our find customer here we are in the user actions i'm going to grab find customer let's comment this all out first we will copy it bring it into user sagas after find employee saga paste this in as your find customer under that export function and asterisks find customer saga we're going to do the exact same thing we did in find employee saga so this should feel a little more familiar to you we need to get the url in the headers which is just a normal way of doing both then we're going to write some saga code so let res equal yield this is an async fetch call so we yield at the fetch call and we're going to pass in the url and the set headers next we will have the res equal yield again we need to go async to get the res.json and then let not employee but customer equal res dot results at zero and then finally we will yield put which is going to send it to our reducer we will put a type of find customer let's just find customer there we are and we will have a payload of that customer perfect now that should be working let's bring this back in to the user actions and we'll refactor that now so we'll paste that in we'll get rid of all of this and we need to trade our dispatch for a return and get rid of our point to thunk because we're not using thunk now it says customer is not defined that's because they shouldn't be here either this is just sending along the type oh no it's in user sagas and and let's see i i spelled costumer a customer okay customer and there we are okay now we need to watch for this so we're going to do this again you know what let's type it out export function generator watch find customer make sure i don't typo at this time and there's our watch fun customer saga inside of there it will yield and we're going to need the take every find customer saga and we're going to pass it to the find customer saga now we need to put this watcher into our route watch find customer saga that auto imported for me right there let's see if this is working for us now can we find a customer here we are and nothing happens i imagine there was an error in the route yes uh just invoke that it won't work unless it's invoked let's try it out there we go indro lincoln alexandra everything is working perfectly there so we've refactored both and they're both working now with redux saga there are a few more things i want to go over about it because there's so much that this can do so let's head back into our user sagas and talk about a few more things i would like to do the find customer and the find employee at the same time and there's a way to do that with sagas let's give that a shot we will i'll just comment out the find employee one for right now and we're going to make another one so export function astrix find employee saga this is going to find both of them of course const url you know we could just paste that stuff in let's do that there we go that's all we should really need from that function and now we want to run these simultaneously so how are we going to do that let's get started let's let open up an array it's going to be in employee finder comma customer finder and that will equal yield all we're using that all keyword now we've seen this before now this part is a call to the fetch api with the url and the set headers we're also going to make a second call to the fetch api with the same thing now the first call will be mapped to the employee finder and the second call will be mapped to the customer finder this is a lot like promises.all if you're familiar with that and if you're not this should get you a lot more comfortable with promises.all the next thing we'll do is open this up again remember we let it so we could just go ahead and use it again just employee finder and just reassign these values uh do customer finder and we'll reassign these values to another yield all inside of there we're going to do our other function that we did i hate when that pops up it makes things difficult to follow so employee finder will now be employee finder dot json as a function and i'm doing something wrong oh i'm sorry we need to open up an array not an object open up that array okay employee finder dot json and then we'll have customer finder dot json now this is mapping the json properties to employee finder and customer finder one to one and two to two as so the next thing we will do is yield all yet again so employee finder finder will equal yield all and then we'll have the employee finder dot results at zero and we'll also want the customer finder dot results at zero that's what it'll look like so we assigned at one point employee finder and customers finder as a led we let these two value these two keys so now that we have these keys properties whatever you'd like to call them we can reassign them whenever we want since they were a let so if this looks strange to you imagine every time we did a new const and then we renamed this and that would be just fine too there's just too many variables i'd rather just have these two and do everything to them now at the end we want to put two separate things and we do that simply with a yield all and inside of there we're going to do our put put type and the first one was the employee finder so we the type will be find employee these payload should be the employee finder and our second put will be very similar with a type of find customer and a payload of customer finder perfect make sure i have that but we'll save all of that now we have our find employee saga we can name it whatever we'd like actually i will rename it let's say let's just call it find both and then we just will change this to find both now when it gets hit with a find employee saga type it's going to push it to our new find both right here and let's see if it works this should be making these two variables here these two lets employee finder and customer finder it should make the calls or fetch calls for us and then it should take the json from those fetch calls and then it should go through the results to get us the first result and then we're going to yield all of these puts that are going to our reducer with the employee finder and the customer finder so we should be able to find them both with one click of a button now so employee name let's find and we definitely have an error here it says before initialization oh i see we're actually going to need to do our semicolons ourself here no wow it made quite a mess when i pressed save can we go back there we go okay so i'm just going to put these through so it knows where i'm stopping and then we can do it yeah that one that got real weird it put a i put these in front of all of our awls i'm sure that was the issue well i hope that was the issue let's go ahead and find both we did we have a symbol i don't understand you one more okay we have steffi and amelia that's perfect that's working perfectly on our fine both and they're going side by side let's do it again boom gmr and todd perfect let's do one more really fun one i'm going to get this uh that find both that actually got renamed when i did those undo's but it still worked because i undo enough times to make that happen if you can follow that you're having a good time here you're doing a good job because this now says find employee saga which means this must say find employee saga in order to pass the call to this function here so that's what happened is when i pressed undo so many times it not only made this back to find employee saga i mean this one back to find employee saga and um i'll just do a find both just so you can see what i'm talking about find both again and now it'll still hit that same function so find employee and it finds both of them okay great um so let me get rid of find both and we actually do need to change it back to this one the find employee saga i'll turn this one back on and you know what i'll do my next function here too let's do our uh uh we'll do our raceme it will be the name of the function all right so generator erase me and let's see how fast we can get the information back from this url oh i wound up on the wrong page there there we go this url here okay we are now inside of raceme we have the url and the headers we're going to make a const and we're going to destructure we'll say person and time out that will equal yield race and then we'll have a person will be our first thing that will be our call to the api the fetch api so call fetch and then pass in the url and pass in the headers actually with set headers pass in the set headers then we'll define the time out which will be a delay oh actually what did i call it i called it weight i'll bring it in from the last one weight of 1000 so one second it'll be a wait time of one second before this times out so we're going to try to make this api call before this times out and then we could quickly check that we could say if person console.log success okay now we have this cool race me function and we need to bring in the wait or is it in already no we have that in the react testing library i'm going to bring in the weight that i made back in my cart sagas right here let's give this a shot now so if we click find employee we're going to trigger race may and we want to see if we can fetch we can make this fetch call within one second let's give it a shot success we were able to do it within one second now let's lower this down how about 100 milliseconds let's see if it makes the let's see if it gets the response quick enough too slow okay 100 is too slow let's try the middle at 500. success that time let's try again 500 is pretty quick and it's success every time this is great let's go down to 400 success there let's go down to three success again let's definitely fail i'm going to put it at uh one too slow okay uh so we know this does work and it does fail uh let's see if we get a response within 200 milliseconds we do we're getting great responses here uh to 100 i think that failed before right too slow okay so this is a cool little test that we could do we could always kind of see how fast things are moving and we can even check to make sure things are going fast enough for us to see if we might have a problem on our back end or an api that we're fetching from and now we've changed this app to use redux saga i hope you learned a lot going through this with me and if there's any questions or anything else you'd like to go over please let me know thanks for being with me on this one and i'll see you on the next one you

Channel: Papa Santo

Views: 12,135

Keywords: react, reactjs, react-tutorial, papa santo, papasanto, react for beginners, react pages, react page, redux, react redux, react-redux, redux for beginners, react-redux tutorial, react-redux quickstart, react-redux quick-start, redux guide, reducer, action creator, action-creator, redux provider, redux store, redux action, redux reducer, redux-thunk, async, async redux, redux-saga, saga, redux saga, sagas, redux-sagas, reduxsaga, redux sagas

Id: lw24CJnuUEo

Length: 54min 7sec (3247 seconds)

Published: Wed Aug 05 2020