Redux Toolkit with Redux Saga | Toolkit and Saga made Simple

hey guys this is ed bro today i'm going to do a very quick explanation of what redux toolkit is along with saga and we are going to use those to build this cat species gallery application so redux toolkit is a neat easy to use library that allows you to basically use redux without all the painful setup parts as i've said in this other videos i highly recommend this library instead of just plain redux if you're interested in learning more you can watch this video redux saga on the other hand is a library used for asynchronous operations similar to redux thunk in comparison it is the more heavy duty library in comparison to thunk but also has a slightly steeper learning curve you can check out the link in the description if you want to go to this website and learn more anyways let's get started building our app so i'm here in my code editor and i'm going to bring up the terminal by pressing ctrl i and i am going to install create react app with this command and we are going to call it toolkit saga app all right and then once i'm finished i'm going to go into the folder we have just created and i'm going to open that up in a separate window [Music] and i am going to bring up the terminal again and this time i'm going to install oops we're going to install at redux js slash toolkit and then we're going to install react redux and redux saga like so once that's done i'm going to go into our folder structure right here and we're going to delete a few things we're going to delete app test js we're going to delete logo we're going to do a web vitals and we're going to delete setup tests i'm going to go to index.js we're going to remove the report web vitals we're going to remove this code as well and we're going to go into app.js and remove the logo and also the header information like so i'm going to save both of those all right from there since this is not a css course we're going to go to a link it's in the description below but this is my github repo that i've created for this particular project and we're going to go into app css and we're just going to copy this entire thing because this is the css necessary for this application and i have it already set up because css takes a lot of time but this video is more about react and the functionality so we're going to go into app.css and then i replaced everything with the css code and i am going to save it [Music] now we can start coding our app the first thing we're going to do is we're going to import a few things and we're going to import provider from react redux and then we're going to import create saga middleware from redux saga and then we're going to import configure store from at redux js toolkit and once we're done with that we can set up a few things for our saga so the saga we can create saga middleware execute that function and then we're going to create the store with configure store like so reducer we're going to create an object over there and we're going to add a middleware in brackets with saga and we're gonna change react strict mode with provider we are going to provide it with a store attribute close store all right so this oops i kind of messed this up so configure store or not configure um so there's a bit of a setup here but this is all the setup you would really need for a saga so this is way simpler than what you would do in typical redux and then what we're going to do is go into our directory and we're going to create a new file and we're going to call that cat state dot js so this is going to have all our state information and what we're going to do here is we're going to first import create slice and it's going to be from at redux js toolkit so this will allow us to create our simplified reducers from redux toolkit and we're going to do export const state slice we're going to or no not state slice we're going to call it cat slice and we're going to do create slice like so and with within create slice this will be where all our information will be and we're going to first have to set a name so this is the name of the reducer and we're going to call this cats and the next thing we're going to do we're going to create an initial state and this is going to have two states that we're going to tack into here which is going to be cats which will be an empty array and is loading is going to be false so cats is going to store all the cats we retrieve from an api and is loading is going to be as the state of when the cats are still retrieving from the api and finally we're going to add the reducer section and in here we're going to have the actual logic just like our cases in normal redux we're going to have our own cases over here but it is written differently we just need to write the name of the action or the case like so i'm going to call it getcatsfetch and we're going to have an array no sorry not an array a function and it's going to pass in the value of state and state dot is loading is going to be true like so so when we fetch the cats we are going to set the is loading state to true and again for redux toolkit since it has a library inside calling called imer we can modify state directly even though under the hood it won't be modifying the state directly it will be replacing the entire state like you normally should but the convenience of the library allows us to just directly or write it as we're directly modifying the state the next thing we're going to add is get cats success and we're going to give this two arguments it's going to be state and then action and here we're going to change state.cats is equal to action.payload so and then we're going to pass and state is loading is equal to false so this will essentially from our action object we're going to grab the payload which is going to be the result of the cats from the api finally we're going to handle get cats failure we're not really going to use this one but just to show you how you would normally make an api call and handle the error we are going to set this is loading equals to false all right and again the beauty of redux toolkit is that you don't have to write the action logic you would normally have to do with all the types and um things of that nature we can just write the actions that we wrote like so and we can just say cat cat state dot actions and this will provide all the actions that we can use so we can just grab these guys in other files and use them as we would typically do with normal redux and then finally we're going to export default cat state or cat slice sorry and we're going to call the reducer property from that so this will allow us to grab the reducer so we're going to save that file and we're going to go back to index.js and we are going to import a couple more or one more thing which is a cat's reducer from the state that we've found which is cat state and we are going to pass that in over here into a property called cats and then cat's reducer will be the value so this will allow us to call this reducer with cats once we're done with that we can actually start our create our saga logic and we can go into our directory create a new file and call cat saga and in here we can write our saga logic like we would normally do with redux so using saga with toolkit is not very much different with saga and vanilla redux there's one thing that's different but i'll get to it when we get there so first thing we're going to do we're going to import call put and take every from redux saga effects so these things call would allow us to call uh call our urls and apis put will allow us to call our actions and take every is going to be able to watch a function or watch in action and trigger our function whenever that action is been called okay so first first thing we're going to do is we're going to actually create the watcher saga which um we are going to call this cat saga and we are going to yield so these are generator function terminology but yield is essentially you can think of it as similar to async await where you're waiting it's not exactly how it works under the hood but it's a very close enough comparison here all right so this is the one thing that's different with toolkit versus normal redux and saga so basically this action type since all the actions over here are implicitly being created by toolkit we need to know what type of action type this would be in normal redux you would typically name it as for example you would name it get cats fetch as a capitalized version like so however that's not written in redux toolkit what we have to do is first take the name of the reducer and then the name of the action itself without being capitalized so if you take a look this cat refers to this name and then get cats fetch refers to just the name of the case that we've created so by default that's the setup that you're going to have to go for very simple and then from there we're going to create a function called work get cats fetch we haven't created the function so we'll do that now so the next thing we're going to do i'm going to create another generator function and we're going to create that function we just used and inside here we're going to create a value called cats and in here we are going to call an api we're going to create a function that will fetch a particular api so the api that i'm using is something i found where you can just call a list that will give us a list of the cat breeds so you can just copy this over we're going to call it api.the cats api or the cat api like so slash v1 slash breeds so this will give us a list of the breeds you can check out their api on this website um but this is pretty much a direct url that we can call to get grab those breeds and the next line we're going to get formatted cats and here we're just gonna json the format that we've gotten we have to wait for this to finish so that's why we're having yield for each of these these are both asynchronous operations so we need to wait for them to finish before we move on to the next line and then finally what i'm going to do is if you grab this api it's going to give you a list of probably like hundreds of these but we don't need all 100 so we're just going to slice the first 10 of these so we can only grab we only need 10 of them to basically do what we need and then finally what we're going to do is we're going to yield and call our get cat success function or success action so we're going to import that first and we're going to grab it from our state cat state like so and we're going to call that action and we're going to put our formatic cats like so so essentially we're going to grab get cats fetch we'll call this worker function and it's going to do all the formatting and when we finally get the cats ready we're going to pass it in get cats success and then here if you know get cat success as you can see we have our action if you pass it in here you can grab that action as a payload so the cats that we've created will be directly placed into here once it succeeds okay and then the final thing we need to do for our saga is to export our cat saga watcher function and then with that we need to go to our index.js one last time and we are going to import cat saga from our cat saga file and we need to run our saga like so with our cat saga so that's been the mouthful with cat saga cat state quite a few things saga has a bit of a boilerplate that you would have to set up but it's worth it in a bigger application it'll be very convenient and very organized for you to watch the flow and you'll be able to control it with a lot of functionality all right and so the last thing that we need to do is go to our app.js file and in here we're going to do all the setup to write our html our styling as well as the actual functionality okay so first off i'm going to import a few things i'm going to import use effect from react so this will allow us to put our api call in there and then we're going to call use selector and use use dispatch from react redux and then we're going to import get get cats fetch so this is the only api that we need to really call or only action that we need to call and we are going to grab that from cat state and from here we can create a variable called cats and this will grab our cats array that we've created from our state so we're going to use use selector we're going to have a function with state and we're going to call our cats so this is a little confusing state.cats cats basically due to my naming i'm calling this reducer cats and within this reducer i'm calling the cat's property so that's why this is cats cats so we're essentially grabbing this guy because the reducer is called cats then we have a duplicate of the name the next thing [Music] going to be dispatch use dispatch execute that function so this will allow us to call our actions and use effect here we're going to be dispatching our get cats fetch action so this will actually call our api and we want to make sure that this has dispatch as a dependency so essentially we're actually going to console log our cats to make sure that this is running so what i'm going to do right now i'm actually going to bring up my terminal i'm going to run this when i run it i'm getting an error actually so cat state is not defined so if i go to that i made a mistake over here so this is not cast state my mistake so this should be clap cat slice the actions so once you have that we have this set up and refresh that and bring up our console and as you can see you can ignore these errors for now we have a list of our cats there's a lot of information in here um the only things we really need is description the name and the image but as you can see we have our list of cats once we have that i'm going to do is i'm going to place this over here so we have it side by side because it's lagging a little bit um okay so right now we have nothing so we're going to go to our app.js and what we're going to do is we're going to add a few uh structure things just each one tag and i'm going to call this cat species gallery and we're going to add a paragraph tag images of different species of cats lots of cats for your viewing pleasure save that and you can see we already started writing it we have our styling already there so we don't have to worry about that i'm going to add a horizontal tag and then we're going to go and we're going to create a div and we're going to pass it a class name of gallery and in here we're going to actually call our cats values that we have with cats map and in here we're going to add a lot of different things we need a few different things because of the css and the structure that we need to set it up so we're first going to create a container div and we're going to call we're going to give this a key of cat id so we don't trigger the react warning that every div in the list needs to be unique and we're going to give this a class name of row i'm going to close that so this is the container for each cat and we're going to split this up into two divs and this is going to be splitting it between two sections with the left and the right side the right the left side will have an image the right side will have all the text so class name here is going to be column and i'm also going to add a column left to identify this specific one and we're going to do we're going to copy this and we're going to have the same thing over here except this will be column right okay so in our left side all we're going to do is going to have an image and inside this image we need to add a few things and this one's going to be alt and that's going to be the cat name so this is more for um readers like online readers and then we're going to have a source cat image dot url so this will be the link that's in the cat's object and we're going to set this width of 200 same with the height of 200. we save that oh cat is not defined oh i see so i need to write cat yeah i forgot that don't yeah that's important all right and as you can see we already have the left side with our cat image so if you open it up it's gonna this will description and all that information will be wider and then from here i'm going to do the right side now and the right side it's just going to have an h2 tag with cat dot name like so and then we're going to do h5 tag and we're going to give it a temperament like that so this is all within our cats object all this information is already there from the api call we made and then finally we're gonna have a paragraph tag with cat description once we do that we're gonna have all the information that's needed for each cat i know it's not perfectly aligned but i will save that and you can try getting that css on your own and then once we're done with that we're going to just create a button at the bottom view more cats it won't really do anything it's just more if you want to create a website and you want to list the rest of the cats and that's pretty much it if you take a look you have this entire guy let's enter full screen and we have our cats like so list of cats pretty simple saga and tool kit work together beautifully and that was redux toolkit with redux saga as you can see redux saga works like i normally would in vanilla redux toolkit and saga is very close to the original and you will have no issues handling tricky or complex asynchronous action operations and or calls personally i use saga over thunk in a bigger application but they are both very good options if you want you can watch the thunk video here anyways comment like and subscribe if you enjoyed this video and i will see you next time you

Channel: EdRoh

Views: 714

Keywords: EdRoh

Id: 9MMSRn5NoFY

Length: 26min 43sec (1603 seconds)

Published: Wed Nov 10 2021