Learn Redux-Saga with Redux-Toolkit in React | Movie Search App using Redux-Saga & Redux-Toolkit

hey guys what's up what's going on welcome to my youtube channel so in today's video we are going to learn how we can use redux saga middleware with redux toolkit in a react application so in today's video we are going to build a movie search application with the help of redux saga and redux toolkit so redux toolkit already offer different solution to handle asynchronous operation like you can manage application side effect with create async thunk or rtk query but sometime you may wanted to go with redux saga approach to handle your application side effect so with this application we will integrate redux saga with redux toolkit and i hope you have some understanding of redux saga and generator function because redux saga used generator function to write a synchronous logic but still i will give you brief overview about redux saga and generator function later in this video but first let's have a quick demo of this application so in this movie search application we are fetching movie related to spider initially so it fetched around 10 movie with the help of third party api called omdb api so whenever you search a movie with a specific name so omdb api return only 10 movie and if you did this search input field so let's assume i wanted to search the movie with the s keyword so this time it's returning too many result so error also we are going to handle with redux saga and redux toolkit only and you can also search with the different movie name like batman so you can also search the movie with a different movie name and if you wanted to know more about a specific movie so you can click on this card so you will navigate towards the single movie page where we have some more detail about this specific movie like name year plot and director and if you click on go back you'll navigate back to the home page okay so this is the overall application that we are going to build in today's video with the help of redux saga and redux toolkit so before we start working on this application so if you haven't subscribed this channel then please subscribe this channel and if you find out that content is useful then you can share this video with your friend and colleague so before we start building this application let's have a brief overview about redux saga and generator function so redux saga is a library that aims to make application side effect application side effect here means like making http request or sending web socket event or fetching data from graphql server or saving some kind of information on cache or browser local storage so this thing come under the side effect that we manage with the help of redux saga and with the help of redux saga it's become very easy to manage more efficient to execute and better at handling failure so this is all about the redux saga so here saga use es6 feature called generator function in order to write a synchronous code so with this approach our asynchronous code look like standard synchronous javascript code so this is all about the generator function and if you wanted to know more about generator function then i will create a separate video on this topic so this is all about the redux saga and generator function so let's start working on this application without wasting any time so guys let's set up this project so i'm going to open a command prompt and let's create our project here with command npx create react app and the project name will be like movie app okay so let's hit enter and it will take around two to three minutes to install all the necessary dependency so i'll be back once all the dependency get installed so guys our project setup is now completed over here you can see that and let's first go into this folder that is movie app and before we do npm start so in this project we are using material ui to build our react component so let's first copy this one so first i'm installing all the package that is required to build this application so let's paste here so we need only material ui material and we also need material ui styles and apart from that we need some more package like react redux redux toolkit okay we also need redux saga here react router dom react router down we need axias so let's install these packages and wait for the package installation and i have already opened this project in my visual studio code so let's go into the vs code so this is our project okay that i have open in my vs code and before we start writing any code so let's first configure our omdb api key so i'm going into browser and generate a omdb api key to get all the movie list okay so first i'm going to configure that one so you have to go to this website omdb api okay and after that you have to click on this api key and here you have to select free so you have to provide some detail like email name and what is the use okay so this detail you have to provide and after that you have to hit submit so once you provide the detail and if you click on submit button you will get a message like a verification link to activate your key was sent to this email address so you have to open your gmail account so you can see that you have got your key here and you have to verify your key by clicking on this link okay so you can copy this key in your vs code and you have to click on this link to verify this key now our key got activated here let's close this one so i'm copying this key and i'm going to paste in my vs code so i'm going to paste the key that we have generated so for now i'm just pasting the key over here and let's see whether our package got installed or not so our package got installed now you can see that and let's do here npm start and let's wait for the application load into the browser so it's loading in our browser so our application loads successfully into browser now let's go into the vs code so first i'm going to structure our project so in source we are going to have folder like pages then we are going to have a folder for components then we are going to have a folder for redux and in the root we are going to have one environment variable so dot env and here i am going to have my movie api key so react app movie api key and i'm going to copy this key and paste it over here okay since we have created one environment variable in this application so we have to restart again our server so let's restart this one now what i'm going to do first so so first i'm going to do some cleanup in this application so let's remove all this thing we don't need so here i'm just going to give heading light redux toolkit with saga okay and logo is not required so let's remove this one and i'm going to delete this file you don't need this one let's remove this one as well logo.svg and in index.js file so i think this will be stay as it is and let's go into the browser first so this is working we don't have any issue now now am going to configure redux toolkit in this application so i am going to create some file inside this redux folder so i am going to have one file here store.js i i'm going to have one folder for feature okay and inside feature i'm going to have a slice so we are dealing with the movie so let's keep the slice here movie slice.js okay and inside this redux i'm going to have couple of files as well so i'm going to have dot js i am going to have saga also so movie sagas dot js so this will hold all the saga that we are going to work and we are going to have one root saga as well so that's it this much file is required inside our redux folder so first let's configure redux toolkit in this application so inside this file we need to bring create slide from our redux toolkit so let's bring the create slice now now let's create our movie slice so movie slice create slice and let's keep the slice name over here so it will be movie let's define the initial state of our application and we are going to have movie list as the initial state which will hold all the movies that we are going to receive from our om db and it will be array which will be empty initially and we are going to have one more initial state which will hold single movie in detail and it will be empty object after that we can export this one export default movie slice dot reducer okay now let's come to the store dot js file and here we need to bring configure store from our redux toolkit so configure store then we need to bring create saga a middleware from our redux saga okay so we need to bring from redux saga only not core so remove this one now we have to bring our movie slide so import movie slice so import movie reducer so slice nothing but it is a reducer so import movie reducer from feature from movie slice and we have to also bring our root saga from root saga now we have to create a instant of this create saga middleware so saga middleware go to create saga middleware let's do here calls store so we are configuring our store so configure store and we are going to have reducer here and i am specifying here movie key and assign and i am assigning the reducer here that is our movie reducer now we have to also use here middleware so we are using here redux saga as a middleware so we have to also specify a middleware hour in this store so get default middleware get default middleware and let's do concat and inside that we are going to put our saga middleware okay and after that saga middleware dot run and here we are going to pass root saga export default store so i'm just going to do a comment this line of code because at the moment we don't have any saga so it will throw an error once you configure redux toolkit with our react app so for now let's just put a comment over here and let's go to the index.js file and here we need to bring provider from our react redux so from react redux we need provider and we also need to bring store from this redux folder and we are going to wrap our app component with provider let's cut this one and paste it over here and let's pass store let's save this file and let's go into the browser and verify whether redux toolkit is successfully configured or not in our application so refresh this one so we don't have any issue so let's open redux dev tool so you can see that we are able to see our initial state in this redux dev tool that we have defined in our movie slides.js file so this is the same state value that we are able to see in this reader dev tool okay so redux toolkit is successfully configured in our react application now let's enable routing in this application so we are going to have only two page in this application that is home dot js and we are going to have movie.js okay in which we are going to show single movie with some detail so let's generate a snippet here and let's also generate a react snippet in this file as well now let's go to the app.js file and here let's remove this one and let's bring some component from our react router dom so we need browser router route and routes okay let's remove this one let's specify the top level component that is browser router inside that inside this we are going to have routes in which we are going to have our multiple route so let's first specify our home route and let's bring our home component so vs code automatically import that page and we are going to have for single movie as well so movie with id okay and we are going to render movie component so routing is configured you can verify this one in browser so let's go into the browser so routing is working and let's go to the movie as well so this is also working so both route is working in this react application so first i am going to start with the redux part where we are going to fetch all the movie from our omdb api to fetch all the movie we need to write action and saga so first i'm going to start with this movieslice.js file and i'm going to write action so action in redux toolkit we write inside this reducer okay and first i am going to have like get movies and initially we are fetching the movie with the name is spider okay so we are going to receive this name from our component and we can just return here name okay after that we have to set the movies set movies and this will having state action and let's put here comma as well and state dot movie list is equal to action dot payload okay and let's export this action as well so export cost movie slice dot actions so at the moment we have two action that is get movies and set movies okay so we have created this two action so now i'm going to start with our api then we will work on our sagas so first we have to also specify the end point as well so here first i'm going to import axis after that let's specify the endpoint the cost api endpoint and we are going to have this endpoint so this endpoint we are going to use to fetch all the movie from omdb api so now we have to specify method to fetch all the movie so export on fetch movies and initially we are fetching all the movie with the movie name is spider so here we have to specify the movie name and after that we can have like return axis dot get and we can specify the endpoint so api endpoint and ampersand we have to use s is equal to movie name okay and we can also sort this syntax so we don't need to use return if we have one line of code so let's remove this one and let's also remove this return so this will also work so our endpoint is ready now let's work on saga so here we have to first import some redux saga effect so from redux saga effect we need to bring effect like take latest put work and call okay after that we have to specify a watcher here so we are going to use here generator function so on load movies and we are going to yield this one so take latest so we are using here take latest effect so this take latest action basically run at a one time and if you fire another action and if previous task is still running then previous task basically will get cancelled and this state let us run the task with the new data so overall it's avoid concurrency over here so that's why i'm using here take letters it always take the latest one so here we have to specify the action type so we have to use here like get movies that is coming from our movie slice dot type and here we have to specify one more saga that is on load movies async so we have to specify this listener and this will be also a generator function so function on load movie async and it's going to receive a payload from our component and here we are going to use try and cache and if you have any kind of error so i'm just going to do a console log after that and try let's specify a variable cost movie name payload so we are going to receive a payload as a movie name so you don't get confused over here so that's why i have declared a variable here so payload will contain our movie name now let's define a variable with cost response and we are going to yield and call we are going to use here call effect from redux saga to make a api request so search movies and we can pass movie name as a argument here so this fetch movie is basically receive this movie name here okay now after that we will get a response and here we are going to check if response dot status 200 then we are going to dispatch another action with the help of put method so put allow to dispatch new action from our redux saga middleware so here we are going to dispatch the action set movie okay and here we can just spread out our response that is coming from our omdb api so response dot data after that what we have to do so export cost movie sagas equal to so we are going to for this task so on load movies now let's go to the root saga and here we have to bring and here we have to bring all effect from our redux saga and let's also bring our movie saga movie saga so let's bring movie sagas and here export default function so this will be also a generator only and it will be our root saga yield all so here we are using all so all is used when you have to run a multiple saga effect in parallel so that's why we are using here all so we are done with our root saga and let's go to the store.js file and now we can uncomment this line of code now we won't face any issue in our application so let's go into the browser first all was not found in redux saga so here what we are missing so we have to bring from effect okay now let's go to the browser so we don't have any issue in our application after writing our first saga so we have created our first saga now let's dispatch this action from our component so we have our home page here and movie so first we are going to work on this home page so this home page basically will have two component so let's remove this one and i'm going to use your fragment so first it's gonna having a search component and the other company is going to have like movies list component okay so one by one we are going to work so let's first work on this search component so i'm going to create one file inside this component folder so search dot yes and inside this root we are going to have one file for styling so i'm going to use your styles dot js okay let's generate a snippet over here and after that what we have to do so from react we need to bring use state use effect okay and we also need to bring component from our material ui so from mui material we need text field then we also need to bring use selector and use dispatch from our react redux so use selector used in dispatch now inside i'm going to have fragment and inside that i am going to have h2 tag let's give here movie search app okay and i'm going to use your class name so i'm going to use here material ui style so lets bring here use styles i am yet to define the styling for our component so let's first bring that use style from so let's bring this huge style from this styles file and first i'm going to define the style for our search component inside this styles.js so here what we have to do so here we have to bring make style from our material ui style make styles and export default make styles and inside that i am going to define the styling for different different class name so we are going to have title and for that title i am going to have a starting life letter spacing i am going to have with 0.1 frame line height i am going to have 1.25 then i am going to have margin bottom 0.15 ram after that i am going to have fund size that is 2 ram okay now we are going to have styling for our input field as well so form and it's going to having like width so which i'm going to give here 90 viewport okay and max width i'm going to give here then i'm going to have margin 0 auto and i'm going to also specify margin top three rev and margin bottom okay which will be also a three ram now we are also going to have a class name for error as well so error and for this i'm going to have color i'm going to use color here f 9 3 one five four text now i'm going to have padding top 0.5 ram then font size i'm going to have 2.15 gram okay so let's go to this our search component after that what we have to do so first i am going to define a state for our input field that is name set name and initially we are going to fetch the movie related to spider i am going to specify the initial state as a spider now we have to create the stands for this huge style the cost class is equal to use styles okay now after that let's use here our style so classes dot title after that i'm going to have form and class name i'm going to use here again classes dot form okay and on submit i'm going to have a very basic on submit so e dot prevent default okay now inside this form we are going to have text field okay type text full width value it will be name and i'm going to do some styling here for this input field so m will be 1 and width i am going to give here 50 ch and we are going to have one on change method okay set name e dot target dot value okay now we have to dispatch an action also from this search component only so first let's store the reference of used space in a dispatch variable so it will be a dispatch now i am going to run here use effect and this use effect will run whenever we are changing the search input field i am going to provide a dependency here as a name okay and here we can dispatch like get movies so vs could automatically import that action from our movie slide and here we can pass the name now we have to bring this component in our home.js file so in instead of this we can bring our search component now let's go to the browser refresh this one okay so we have to install this emotion as well okay so what we have to do here we have to install this emotion so let's install this one so we have already this material ui only we have to installed only we have to install these two pipes so let's install these two packages so both package got installed now so let's close this one let's go into the browser okay so we have got our this search input field and you can see that initially we are switching the movie list related to spider so let's open the redux type tool and let's open this one so you can see that we are getting our all the movie inside this movie list so it fetched only 10 movie with that omdb api so you can see that we are able to face the movie related to this spider and if you edit this one and if you try to fetch the movie only with the ass keyword so now you will get error okay so you can see that you are getting here error as a too many result so we are also going to show the error message as well in this application so first i am going to show this error message and after that i am going to display all the movie with the name related to spider so let's go to the vs code first so we need to bring our state with the help of use selector so we can use your use selector state and our movie slash is registered with the reducer key movie okay we can have here movie list so inside movie list either we have movie or error okay so we have to go one more level and this will be error and we can rename this one to error now here we can check below this text field like if you have the error then only so the error i'm going to use here p tag and class name so i'm going to use your material ui style so classes dot error so installing we have already defined in our style.js file and we can show the error now let's go into the browser so we have some issue so it will be movies list okay so if you look at our movie slide.js file it is movies list so now let's go into the browser refresh this one now we don't have any issue now let's remove this one so you can see that we are able to display the error message as well now the next thing we are going to show all the movie related to spider below this input field so for that we have to create one component that is movie list okay so movies list dot js and let's generate a snippet so here we have to bring some component from our material ui and the component we are going to use here card card media then grid card content typography okay after that we are also going to use here use selector from react redux and let's bring use selector we are also going to need link from our react router dom and first i am going to get all the movie list that we have in our store so i am just going to copy this line of code and i'm going to paste it over here and we don't need error only we are interested in movie list remove this one okay so here let's remove this one so i'm going to use your grid let's provide some styling here so flex grow one it will be a container again i'm going to use grid item 12 after that again i'm going to use grid here container justify content and it will be center spacing i'm going to give here three after that movies list am going to map so we are getting the movies in the search okay so if you look at the pattern so if i refresh this application so our all movie is stored inside this search okay so inside this search we have our all movie so let's go to the vs code so here we can write like this way dot map so once we have the data in our store then only it will render all the movie so item now here again i'm going to use grid okay and key i can use here as a index okay so let's give here index and i can use your key as index and it will be the item and i'm going to use your card component with some inline styling so sx equal to max width and max bits i'm going to give it 350 then i'm going to have my card media and inside this card media i'm going to have component so component will be image only then height i'm going to give 350 so we are going to render the image inside this card media so item so our image is stored inside this object so if i open this one so image we have inside this poster property so we have to specify here item dot poster and in alternate we can give here item dot title after this i am going to have card content okay and i am going to use here typography component from material ui and here i am rendering item dot title and variant i am going to specify here body to and color i'm going to give here text dot text dot primary now i am also going to specify the year for the movie so in which year movie got released so let's copy this one and let's paste it over here let's give bracket and here it will be the year and this entire card media i am going to wrap with the link so link will get close here below this card content and we can specify where it's going to navigate so this route is already registered where we are displaying the single movie with some detail and item dot so here i'm going to use here imdb id so i am db id now the next thing we have to basically use this component inside our home.js file so we can remove this one and we can bring our movie list okay now let's go into the browser now we are able to show all the movie related to spider and if you click any movie you will navigate towards the single movie page and if you search with the different movie name like batman so we are getting movie related to badman so we have completed our home page the next thing we are going to work on our single in which we are going to display some information about movie like like what is the story of movie in which year it got released director okay all this detail we are going to display on this single movie page so first we are going to work on our action saga api part then we will work on this page so first i'm going to start with our action api and saga to fetch the single movie so let's go to the movie slice.js file and here i am going to write like get movie okay and it's going to having a id return so we will send id from our component to get the detail about single movie and it will be like that movie state action state dot movie equal to action dot payload let's format this one and let's export this action so set movie and get movie now we have to work on our api.js file so here what we have to do so i'm just going to copy this one and it will be a single movie so search movie and we are going to receive a movie id so movie id it will be a movie id and here we have to give i okay now let's work on our saga so let's go to the movie saga.js file and i'm just going to copy this one it will be exactly same so it will be like on load movie only and it will be on load movie async and this will be a great movie and we have to define this one as well so so this is a listener and this is a watcher so this saga is listening so whenever you fire this action so this will get execute so we have to define this saga as well so it will be almost same so it will be movie only and we are going to receive a payload as a movie id so it will be movie id and it will be fetch movie only not movies so fetch movie and it will be set movie and we have to fork this task okay so fork on load movie and we don't have to do anything inside this root saga.js file so we are done with our saga so whenever get movie action fired from our component so this saga is listening on this action type so it will execute okay and generator basically pause the execution and once the promise get resolved our generator will resume so we are done with our sagas now let's work on this page that is movie so here we have to bring use effect now we also need to bring use navigate and use param from our react router doms so let's bring that one use navigate and use param because we need the id that we have over here from url now we also need to bring use selector and use dispatch from our react redux so let's bring huge selector and use dispatch and we have to bring some component from our material ui so the component we need to bring a typography and button okay and let's also bring the use style use styles from this style file okay and we have to specify one style for this page as well so let's go to the style.js file and here we are going to have one style related to section so section and i'm going to copy the styling for this section class name so this style i'm going to use for this section okay so you can copy this one now let's go back to our movie.js file so first i am going to store the reference of used dispatch into dispatch variable and i am going to copy couple of lines from this movie list.js so we need to copy this line and we are interested in movie object only not movie list because it hold the detail about the single movie so we need movie only now we have to create the instance of this user style so cost classes equal to use style and we also need the id with the help of use param now let's define use effect here and this huge effect will run once we have the id so if we have the id then we can dispatch the action that is get movie and we have to pass the id and let's also store the reference of use navigate into a navigate variable so use navigate now we can verify this one whether we are getting the single movie detail based on the id or not so let's go into the browser and first let's go to this page refresh this one let's click on any movie let's see the redux tab tool let's open this one movie so you can see that so you can see that we have our movie object in which we have a detail about this specific movie that is amazing spider-man so we have some detail like title here director actor plot okay and image as well so we are going to use some information from this object and we are going to display on this page so now what we have to do so i am going to remove this div and i am going to have section with the class name so i'm going to use your material ui classes the classes dot section and inside that i'm going to use image tag i'm going to use here like movie dot poster and in alternate i'm going to provide the movie title so movie dot title i am going to have one div and in third tip i am going to use typography and lets give a line align left variant let's give h3 component h2 and here i'm going to show the movie title movie dot title okay and i'm going to copy this one couple of time so i'm going to show movie title here plot director okay so let's copy this one couple of times and this time i'm going to use variant 5 for here and we can have here like here movie dot here and then i'm going to use here body one and this will be p and this will be plot okay now i am also going to show the director name and here it will be h6 let's give h6 and this will be director movie.director and we can give here director and we are also going to have one go back button so let's use button it will having go back and variant i'm going to use here content i'm going to have one click method so basically it will navigate towards the home page so navigate we can use here so let's save this file and let's go into the browser so now we are able to see this single movie with some detail so we have movie name year plot and director you can also add some more detail as per your convenient so i am using only this much detail on this page and if you click on go back you will navigate towards the home page you can also view this movie as well so this is working and let's open this console so we don't have any issue in our console so we have successfully able to build this application with the help of redux toolkit and redux saga in our direct application so i hope now you have learned how to use redux saga with redux toolkit in any react application so thank you so much guys for watching this video and if you find out that video is useful then you can share this video with your friend and colleague so please press the like button and subscribe this channel i will see you in next video so till then good bye and take care

Channel: CodeWithVishal

Views: 12,873

Keywords: Learn Redux-Saga with Redux-Toolkit in React, redux saga redux toolkit, redux saga in react js, redux saga with redux toolkit, redux saga with api call, redux toolkit query, redux toolkit project, react with redux saga, react with redux toolkit, redux saga tutorial, redux saga crash course, Movie Search App using Redux-Saga, react redux saga, redux saga react, redux toolkit redux saga

Id: DPOzlL1fpnU

Length: 60min 22sec (3622 seconds)

Published: Tue Feb 22 2022