How to implement redux saga with ReactJS and Redux - tutorial

hello everyone today we will be talking about setting redux sagas with react.js application but before we will start remember about subscribing our channel if you don't do it yet and about turning the notifications and give us some thumbs up [Music] hello everyone and welcome in the next video today we will continue with react.js and we are going to set up a simple react.js application with redux and then we will use redux saga middleware to connect with api if you would like to find out more about state management about tool strike like redux or about middleware about redux tanks and redux saga feel free to visit us in our blog i will leave you the link in the description to the article where you have a lot more about theory and here we are going to make it more practical and let's go to the computer okay so we have to start from creating a new react.js application so let's open your console and let's navigate to the folder where you're keeping your applications and let's start with create react app we've already done that a few times but if you don't know how to do it just follow me i've called my application redux app it may take a second cool now let's go to our application folder and let's use yarn start to run the application to see if everything is correct okay so we have our react.js app the default one and right now the next step is to install all the necessary libraries so let's start with yarn at redux next let's install yarn add react redux okay when it's done we can open the code of the application to set up our redux folder structure cool so inside the src folder let's create a folder called redx inside the red x folder let's create two more folders one will be actions and one will be reducers when that's ready we can create the additional file which will be called story.js okay when it's created we need to connect our store with our react.js application for that let's go to the index.js file and here inside this file we need to import provider from react's red x and we also need to import our store from store.js it's empty right now but we are going to place or some code in a second cool now to make sure that our application is connected with the store we need to put provider as a wrapper for our application and inside the provider we need to pass this door let's align it okay great so this step is done and right now we need to create our store so let's go back to store.js file and let's import create store from redux next let's import root reducer which doesn't exist yet but we are going to create it in a second and now we can define a constant called store which we'll call method create store with a root reducer inside our root reducer will be collection of reducers combined together and that will be our store and let's export the store so it will be available inside our react.js application great right now probably we should create our root reducer so let's go to the reducers folder and let's create index.js filer let's import combine reducers from redux and let's define the constant root reducer which will have a method combine reducers and inside this method we'll be passing our reducers we don't have any yet but we'll just leave here an empty space and at the end let's export that to make it available inside the store let's save okay inside our reducers folder let's create file users.js because users will be our like main point of this application and let's start by importing all us type from types we don't have types yet but we are going to create them in a second of course just we need an import right now okay when the types are imported we need to create initial state for our application right now we'll pass just users as an empty array and that that's all what we are going to have as an initial state for users reducer and after that let's create a function that will define the store based on a switch statement let's call the function users and let's pass initial state and action as a parameters and let's define the switch statement which the main parameter will be action type and the first case will be get users and we'll pass users as action payload of course we need a default it will be our state so we have a basic reducer right now so it's time to create types and action but before we go to creating actions and types let's go to our index.js file and to our router user and let's add our user's reducer inside the combined reducers method next step in our react redux application is to create types.js file inside our redux folder and there we are going to define types of our actions let's start by export cons get users is get users well just this one for now later we'll of course update it okay when that's ready we can go and define an action inside the actions folder let's create users.js file and inside that file let's import types and let's define a function get users which will be our action right now we'll pass the parameter users our type will be get users and our payload will be users cool the action is ready so we can we have to create some ui to handle our uh users inside the redis application i would like to use bootstrap that's why i'll place the cdn inside index.html in a public file to to make it accessible you can of course get a bootstrap by installing it with yarn and after that's ready let's go and create components folder inside our src folder and inside that components folder we will need two components one will be card component and the second one will be user component our card component will be like a single card so let's start by importing react and defining a functional component let's call it card let's pass props and let's return some ui i already have the props past but of course feel free to play with that and maybe to change a little bit dui because i know what kind of props we are going to pass here okay we can export default card right now to make it accessible in other components and let's go to users component let's start also by importing react now let's define user's functional component as well and let's import card component because we'll use it here okay now we can define user's component and we're gonna return some simple ui with cards okay right now we are going to use use effect to handle the action and dispatch budget in our component so let's import his effect hook and besides that we are going to use hooks for redux which is use selector and use this patch so let's import those hooks as well okay when that's done let's define a dispatch inside our user's component so let's assign cons dispatch to use dispatch and below that let's get users from our state so let's define constant users and let's use use selector hook to get the users after that let's create a use effect and inside using fact let's dispatch get users action of course we have to import the action so let's do that as well and for our action we have to pass some users right now we don't call api yet so let's pass some example user our user will have id name and the company object inside the company will have a name and catchphrase so i'll paste it from the api that we'll use later and let's define when this use effect should be called okay so let's go to the ui again and let's load the cards if we'll have the users let's use map and we'll also need to pass the parameter to our card component so let's pass the user and let's define the key because reactive's like very catchy about that so use user id okay this parenthesis and in case one user's length is less than zero or zero then let's define some paragraph saying that there are no users cool let's export the component and let's go to our app.js file so we need to implement the component there to make it visible let's delete all those unnecessary stuff and let's import user's component and let's use it inside the updi cool let's do some styling let's remove all those unnecessary styles and let's add styles for up will add margin five percent and four card let's add marking 10 pixels okay cool great okay the next thing that we are going to do is to install redbox devtools we will install it to be able to understand what's going on and to see what kind of action are dispatched so let's go to our store.js file and let's import compose from red x and let's redefine our store a little bit okay we've got our extension let's just put this create store in the parenthesis and right now we should have our developer tools ready let's check it out we of course can see our user let's find the redux up here and voila here you can see what's going on which action which kind of action type actually is dispatching and how this date looks like great right now we are going to change our application totally because we are going to use api calls to get data from the api and for that we will need a middleware we are going to set up redux saga middleware if you would like to find out more about middlewares go to the article about this video like the bigger version and there you can read more about different types of middlewares and what exactly mineral is and why we should use it okay so now let's go to the console and let's install redux saga okay let's go back to the code let's start by defining a new folder called sagas in our redux component inside that folder let's create another file called user saga and index.js let's open user saga.js and let's start importing the necessary methods let's import call put and take every from redux saga effects cool and first of all let's define our api url we are going to use jsonplaceholder with users endpoint here it's a free api so you can check that out in the internet and for right now let's define the function that will get our data from api so we'll use patch here and we'll call the function get api let's define headers let's define a method foreign and let's use then call back and catch for the errors you know i forgot the parenthesis on jason okay right now we will start creating generators for our sagas generators are the functions in javascript with this small star let's call the first one fetch users it will have action as a parameter and here we will use try catch so in try we'll get our users from get api and we will dispatch this access action it will be called get users success and let's pass the users as a payload okay and now let's catch in case of the error in this case we will dispatch failed action we'll pass the error message do okay and right now let's define another generator which will be listening for the get users request action so it will be able then to call fetch users so let's call it user saga and let's use here take every method for lessening the action type that we need okay and just let's export this user saga because we will be using that in our index.js file okay so let's go there and we will define the the okay so let's go to our index.js and let's create a code here first of all let's import all now let's import user saga and let's create the combined sagas so if we'll have more of them we can create root saga and we can put more sagas inside so they will be listened and cold right now we have just user saga so let's put it but if we would have more we could put them here and right now we'll need to apply middleware to our store so let's import apply middleware from red x let's define our middleware like saga middleware okay let's import this create saga mid-lower method as well and also let's import root saga from our index.js file and right now inside decompose in the store let's use apply middleware and let's pass saga middleware live right there and we have it injected in our store cool now we just need to use saga middleware to run our root saga okay cool that works so right now we can probably set up our different types because they changed so let's change get user for get user request let's copy to make similar but with success because we still have to handle the reducers so we'll need those types and the last one will be get users failed cool let's save and let's go to our reducers we will start by changing the initial state to a loading set up to false at start and we will add errors set up to no okay and now the first case will be get users requested where we will turn on the loading to true so we know that the action happens okay another case will be success and here we will update the loading we'll set it to false because it's not loading anymore and we will pass users and action users cool and the last one will be with fail and there we will update error and loading as well so let's return loading to false and error to action message oh it's ready and right now we need to change a little bit in our user components so let's remove our fake user from here because we don't need it anymore and after that let's take some more values from our reducer from our state sorry let's take loading and let's take errors okay error and let's do some changes inside our return statement so in case of loading let's pass some loading text okay here let's add the condition that it shouldn't be loading and let's add condition for errors as well it shouldn't be loading as well and then we can pass the message here now let's see oh well we forgot to change our action type so let's go and let's do that here we should change to get users requested and there's another back okay we imported it badly so let's go to our sagas index.js file and let's change it here to [Music] redux sagas okay great so right now you can see that all the data from the api is loading and also you can see what kind of actions were performed here so our saga works correctly our middleware our redux everything is totally fine here we can use this option to go once again and see what happens great congratulations and thanks for watching congratulations you've just created a simple react js application with redux and redux saga i hope it wasn't too difficult and you understand everything and let me know what you are using for state management in your applications and if you are using redux sagas or maybe redux tanks or maybe something totally else and remember to visit us on our blog because we are sometimes posting different articles which are not on youtube so i encourage you to check it out okay guys thank you for watching and i hope to see you all in the next video but before buy remember to subscribe the channel and about thumbs up if you like the video and also leave some comment it would be really nice have a nice day bye [Music] you

Channel: Duomly

Views: 28,943

Keywords: How to implement redux saga with reactjs and redux, redux saga create react app, redux saga, redux saga tutorial, redux-saga tutorial, redux saga explained, redux saga vs redux thunk, add redux saga to create react app, redux saga api call, react redux tutorial, react redux project, react redux tutorial for beginners, redux tutorial for beginners, redux tutorial 2020, implement redux saga, implement redux, implement redux in react, implement redux in react js

Id: 1EVwGxXU84w

Length: 30min 28sec (1828 seconds)

Published: Tue Sep 08 2020