Redux with React | Redux Saga Explained BEST | [ Source Code ]

[Music] hello everyone welcome to my other video so today i'll be talking about redux saga and using it inside your react project so basically you have to first know what is redux so redux saga is a library that aims to make application side effects easier to manage and it is more efficient to execute and also simpler to test so uh if you were working on some project on react redux you were probably using redux tongue for asynchronous work so leaders tank is the standard way to perform asynchronous operation on redux it also introduces the concept of thunk so here we are going to use redux saga so let's understand redux saga more clearly so look into this diagram so you can see one node view is there so basically it is the starting node of this flow and here view is nothing but your react component or from where you are going to dispatch some actions so you have to dispatch some action by calling some event listener like on click on change so after dispatching the action the flow goes to the middleware section and this middleware is nothing but your redux saga so inside this middleware you have to just call all the adjust or http request and the when the flow comes inside this node the middleware also informs the reducer that the request has already been sent to the api and when the response comes into the middleware it again send the response to the reducer to update the state that the request is finished and finally reducer update all the state inside the store so this is the full flow of redux saga now let's start to implement it inside your react project so basically you can see that i have already created one uh react project using create app and all i need to do right now i do just install the some third party libraries to use redux saga inside my react project so for this i have to write npm space install space redux react redux and redux saga and press enter it will basically all uh digital all the dependency of these three libraries inside your react project okay so after completion uh you have to just write code space dot to pin vs code now go inside this app.js file and first delete everything from here because i'm going to use one uh classful component here so i'm just typing rc to use the snippet for using classroom component so basically what i'm going to build here is nothing but there will be one button to fetch some list of users from one fake api because i don't have any back end for to test right now so here i'll need one button so for this i have to write button and inside it i'm just simply writing fetch and the class name will be btn btn primary and on click i will call this dot phase data and i will need one constructor to bind these things and also i need to define this phase data method so inside the constructor at first i have to bind this using these dot phase data equals to these dot phase data dot bind this there will be also one uh div to just print all the user details here and here i have to pass the profs from the state and i will come to this section later in this video so uh basically what i need to do right now we have to set up the whole redux state so for that uh um i have to first go inside this index.js file so inside this index.js file you have to first import provider from react redux and then uh you have to wrap the app component using this provider and also need to pass one uh profs that is stored and you need to create this store so inside this uh accessory actually i'm going to create one file that will export the store and i will import it here so right store dot js so inside this store.js value to first import create store and apply middleware from redux and then you need to import create saga middleware from redux saga and here you need to write uh one uh you have to create one instance of create saga network so write const saga middleware equals to create saga mineral where and the places and finally write call store equals to create store and pass root reducer and uh apply middleware and pass sagamine deliver here and finally write saga medium dot run and pass root saga into it and finally export it as default so write export default store all right so here if you just notice one thing that i have used here root reducer and root saga and those files are actually not available right now i will make this file later so switch to index.js again and import the store from dot slash store as it is inside the same directory and just uh keep the store inside or pass the store inside of this provider so right now i need to configure the whole redux and redux saga so for that just make one folder and just follow all the steps so inside this redux folder create one file named types.js and here i'm going to declare all the uh action types so just write const types and declare some variables there some constant variables like send request send request success and also the same request failure okay so right now i need one actions file to write all the actions or define all the actions so that i can dispatch so inside this action.js file i to first import the types from dot slash types and here i to define the function for fetching the data and it will be it will be basically one action so write export function face data and it will return okay i have made one mistake here i have to export it okay so from return the type and the payload so the type will be types dot or send request and the payload will be data that i will send from my accordion component and again i will need two other method one is for failure and one is for success so at first right export cost phase data success and here uh just write uh i mean just uh get the user details as user and return the type as types dot send request success and payload as user and okay so finally you have to write the action for phase data failure and it will receive the error and return the type as types dot send request failure and the payload will be one blank object and the error will be the error that i am getting so i have created the actions now i need to create it reducer so for that just create one folder inside redux named reducer and at first i'm going to create one file named root reducers and inside that root reducer.js file you need to first import combine reducer from redux and then write const root reducer equals to combine reducer and as object you need to pass some reducer so for that uh you need to create one reducer so i'm getting one reducer named fetch data reducer and uh here i have to import that fetch data reducer and i will uh configure this fetch data reducer later in this video and just uh right inside this combined reducer and finally export that root reducer as default so write export default load reducer okay so now i need to configure this fetch data reducer so for this open your file and import again the types from dot slash sorry it is one up so write dot dot slash types and then to declare the initial state so i'm writing constants your state and loading as false user as blank object and also the error as blank object and finally i had to define this phase data reducer so for that it will take or initialize the state as initial state and it will take the action and inside it i'm going to make a switch case and here uh in case it gets the action as send request it will basically done the state and also the loading as to and in case it gets the action as sent uh request success it will return again the state with the uh loading false and also the user as uh action dot payload and error as blank object and again if it gets the action request as sent underscore equals underscore failure uh it will again return the state with loading false and user as blank object and error is action dot error okay so uh at the bottom of this file into just export this reducer as default so write export default face data reducer so now i'm going to import that root reducer inside store.js file because if you can remember i have used this bluetooth user but haven't uh imported it from uh this load reducer so import that okay now all i have to do right now is uh to create some saga so that i can uh import the root saga inside the store.js file so create one directory named sagas and inside it just uh create one file named react sagas.js and again i will need another file named fetch data saga dot js and first go inside this root saga dot js and here into import some methods from redux saga effects so write import uh take and call and all from redux saga effects uh remember you to import it from redux saga effects so write that and then write simply uh import and you need to import this fetch data saga from here so inside this kali braces just write this fetch data saga and here i i'm going to declare or define this phase data saga after completing this file so just write export default uh give one generator function so write function start or give one static square and write root saga and inside this function just write yield and write all and it will basically take one added as a list of functions so write this method that you have imported uh from fetch data saga so write face data saga and give the places now come to this fetch data saga dot js file okay so inside these face related saga file you need to first import take every from lidar saga effects and then simply write export function and write fetch data saga or you can just uh for better understanding you can write watch fetch data saga because it will basically watch all the actions and inside these phase data sagas just import the types and write yield take every and whenever it will watch the action as send request it will call this async of fetch request and here i need to declare this async page request phase request is nothing but a function uh so declare that and [Music] again it will be one generator function so here i'm going to use one type catch block to get the response so right try and inside it uh simply write const response equals to yield call and make sure that you have already imported it from this redux saga effects simply write here yield call and inside it you can do some fetch operation or http operation so here i'm going to use excuse for that but i don't have excuse installed in my project so for that i had to install it using npm space install space axios and then i have to import it inside this file to use it so write excuse and then pass the url the first parameter will be the url so i'm showing you the fake api path that i am going to use that is uh regress dot in and here they have given uh some endpoints so i am going to use these endpoints that will give some result for a particular user sending the id of the user you can see also the response it will give as 200 status code okay and for before uh starting to use i'm going to uh define the url inside my uh const url and i have to just concat it with the id and remember from from the front end i'm going to send one id so concat that id with this url as query and finally just pass this url inside excuse and you don't need to pass the body because it will be one gate request and for that uh into slide dot get and you don't need the second parameter and i will basically log whatever response i will get from here and then i will update the state and show it inside my component and here i have to define that catch block also to get data and inside the cache block i'm just showing it using console.log okay now save it uh all you have to do is go to your app.js file and call the action that you have defined so go inside uh app.js file so inside this app.js file into first import connect from react redux and basically i will need this connect because i'm going to connect map state to props and map this patch to props so write export default connect map state to props and map dispatch to props and and also export the app component from here now we need to define this map state to props and basically it will take the state and return the user it will be state dot your reducer name uh the reducer you have used is fetch data reducer so write that physical user dot user and the error will be state dot face data reducer dot error okay and they need to define map uh state uh sorry map dispatch to props and again into dispatch from here so write fetch data and uh into import it from the action files so in action you can see that you have already defined one action face the data so we need to import it from that file so write import face data from dot slash reader slash actions and inside this map dispatch to profs and to just pass the id and on click on this button uh into call these dot props dot fetch data and pass the id as to and if you go inside your browser and you can see one error root saga is not defined so uh okay so i have made one error here i have to import loot saga also inside my store.js file i forgot to import it again i'm getting one other there that is so inside this fetch data saga so let me check where i'm getting the error [Music] okay so i think here here will be one generator version because saga always use generator functions so again i'm getting the error inside my dice file or action types file so go inside action types file so here it will be colon not equals to and then i fix these things that the blue is not defined and if you go inside so here i have to remove that okay so finally the error is showing that fetch data reducer is not written during initialization so to fix it you to go inside this fetch natural reducer and uh as default case you need to return uh the state actually so write return state and save it and again i to configure one other thing that i forgot to mention that i am using on click face data function that is the same name as the action type that i am using so i have to change one method name for that so for quick solution i am going to change this component method so uh i'm changing it to handle uh fetch data and also i have to change it inside the browser uh inside the constructor where i have bind the method and also on the on click event so here you can see now it is showing me the correct result or you can see that one button is there and you need to first open your developer console and i'm creating the console and if i just click on this page button and here you can see so i'm getting the data from my endpoint or api so just see the id is to uh the endpoint has given me the email first name last name last name and everything okay so now to show it inside my react component all i need to do is i to update the state so for that i to go inside this fetch data saga and write yield yield put and then inside that portion to define that action and also you need to import it from redux circuit effects so inside the port you need to call that success action so for that just write import write import if i visit this actions.js file i have named it as fetch data success so just paste it there from uh dot slash actions okay so just uh pass it here and the port is basically taking the action that i'm calling after getting the successful response and also passing the response again if i call uh you can see i'm getting it using uh getting it inside the data object so basically i will uh just send this email or first name so for that uh just pass response dot data dot data dot first name so write response data and let me check again okay okay so write her response dot data dot data dot first name okay now save it and okay now uh here you can see okay now go inside your app dot js file and you are getting the state value inside your props from this map state to profs and all you need to do is to write this dot state dot this dot props dot user here you can see if i click on this fetch button you can see the first name is showing correctly now i'm going through the whole process very quickly what i have done throughout this project so at first go inside store.js so here i have created one store and also i have created one saga middleware that will run the root saga now come to this index.js file so basically i have imported that store and passed it to the provider and wrapped the app component inside the provider now come to this app.js file so here basically i have created one button and one click on this button i'm calling this handle phase data handle phase data is basically calling this dot to valves dot phase data and passing the ideas to and where from where i'm getting this face data i am getting the fetch data from the props so here you can see that i have already uh uh connected using this map dispatch to props and here you can see uh it is basically one action phase data action that i have imported it from the action file so whenever uh it is calling uh these thoughtpops dot face data it is directly going inside my action action.js file so here you can see that uh in data i'm receiving it as id so and it is returning the type as types dot sending quest and the payload as data and here the payload is id and also you can see i have already defined two other uh actions for getting the success and if in case any failure happens so now uh you have to go inside so after after the actions so where the flow goes the flow goes inside the sagas or middlewares so just open root sagas.js file so inside this root sagas.js file i have written yield all watch uh fetch data saga so basically uh here i have already declared this function and uh basically i'm just importing it from this face data saga file and i to import all from redux saga fx and basically it will watch all the sagas that you want to run and here you can list down multiple sagas or use multiple circuits because so it accepts uh the sakas as added now if you go inside phase data saga and at the bottom you can see that i have defined that word face data saga method and again it is a generator function and inside it i am calling this yield take every so that every request comes and see for this uh action type that is a send request and call this function that is asking fetch sequence fetch request so uh whenever this async phase request comes i'm getting the id from this action so i'm just calling some http request and updating the state by calling this face data success action and passing the response from here now come to the reducer so i'm calling this face reader success so if you just come to the reducer come to root reducer so here i have used combine reducer combined reducer is nothing but list of our collection of reducers and if you go inside this face data reducer uh you can see that whenever the success uh uh type comes inside this reducer it will basically update the state and make the loading as false and also set the user that it is getting from the payload from the action.payload so that's it i think this video has helped you to understand what is redux or how redux saga works in react application so thank you for watching this video please click on the subscribe and like button if you like this video thank you

Channel: AV Dojo

Views: 11,411

Keywords: Redux, React redux, redux saga, saga tutorial

Id: kgn2mjKyy2U

Length: 30min 44sec (1844 seconds)

Published: Sun Sep 06 2020