Learn Redux-Saga with Redux-Toolkit in React JS

1. Introduction: Hello and welcome to this course in which we are going to learn how you can use redact saga with redact tool grid in rehab gs. My name is Tom with division and I will be your instructor in this course. If you are a React developer, then you might be using a router as a state management for your React application to maintain application state. And you might be also using reductant or redox saga middleware to handle side-effect in your React application. Now, let me give you the brief overview of Rudolf to those of you who don't know what it is. So redact failure is state management library that we used in our React application, as well as you're going to use within front-end application. Not just with React, but it's very popular with the React library. So that's the overview of Rudolf. With the help of this application, you are going to learn how you can integrate three taxa with rudder to liquid. In this course, we're going to build a movie search application with the help of reduct saga and do dark toolkit. So redact tool kit already of our different solution to handle asynchronous operation, likely you can manage application side effect with create a think tank are RTK query, but sometimes you may want it to go with redact saga approach to handle your application side effect. With this application, we will integrate with rid of total gate. And I hope you have some understanding of redox ADA and generator function because redox saga youth generator function to write asynchronous logic. But it till I will give you a brief overview about redox AGA and generator function later in this video. But first, let's have a quick demo of data publication. So in this movie is that each application we are fetching movie related to his powder. Initially, it fit around ten movie with the help of third-party API called OEM DBAPI. Whenever you set it to a movie with a specific name or IMDB API, return only ten movie. And you did this circuit. Let's say Jim, I wanted to search the movie with the S keyword. This time with returning to many result. Also, we are going to handle with heterodox and redact toolkit only. And you can also start it with a different movie name, like Batman. You can also started the movie with a different movie name. And if you wanted to know more about a specific movie, you can click on this card. You will never get towards the single movie where we have some more detail about this specific movie, like name, ear, plot and directed. If we click on GoBear unit, navigate back to the homepage. Guys, this application is also going to be responsive because we will be using material UI library to build React component. You can see there this application is also responsive. So this is the overall obligation that we're going to build in this course with the help of relative saga and redact toolkit in Riyadh. Now, let's talk about the skill required for this course. This course is designed in such a way that anyone can join this course who are interested to learn modern redox concept, you just need to have basic understanding of HTML, CSS, JavaScript, as well as React basic knowledge. At the end of this course, you will understand how to integrate redact saga with redact toolkit in any React application. What are you waiting for joining this course in order to learn all these modern concept? And if you have any query or suggestion, then you can always reach out to me. I will try my level best to solve your all query. That's it. From my end, I will see you in the course section. 2. What is Redux and Why we use it ?: In this video first, we will understand the core problem of React js estate management. We have our main app component. Then we got our sub-component. If we want to change a text, then we cannot do directly. Instead, I have to inform a parent and change the text there. And if I got additional component, then it will get even more complex. Therefore, we have a read of which have a different approach. So here we have our view, our application, and in this application in any given component will dispatch and action. Then action brand through the reducer. Reducer rather simple job or task. It will take an action, then it will take all the manipulated, and it will give a new state. This manipulation will happen, bake on the immutable. That means it won't change the old vector. It will take all the circuit as a basis and then create a brand new copy of all depicted with the changes in ploidy did stay untouched. We just create a new lifted and return this new state. This immutable gives you a unique state in your application. Now we're getting a new state can be reduced it then it will get stored into a store. And we will have only one store in our application. This vector has a one simple task, push toward our state. That's why it's called Restore. You might have a multiple reducer, but we will have only one is stored in our application. Then our application subscribe to this store. Whenever it's dated, get updated. New state park to the store. The store will automatically send it to all the component and directed and the application will get updated. Now, let's back to the previous example where we had our app component with other components. And now we also have a store. Now if we wanted to change something, the user component from MainComponent, then we will dispatch and action. Then the state introduce it. And then we path is dear to all components in this data all about what is reduct and why we use Redux in React js. 3. What is Redux-Toolkit ?: So now let's understand what is the total good reader to liquidate also use for managing application if statement a React application in efficient way. It's provided some batteries included tool set for efficient development. This batteries included toolset term, look a little bit fancy here, but you will understand this term later. Routers was already popular option for state management in our React application. Then why redact toolkit is required? With redact toolkit, there was so much code required to configure it, to optimize that basic level. And thereby too much boilerplate code, which makes our code, let's clean it efficient. Also, too many packages need to install to build a scalable application. With traditional redox, we used to write action and reducer in separate file. And this become more complex when our app and get you to address this challenge, redacting came up with a reader toolkit. Redact tool kit is a better approach for writing rid of logic. Overall, the reader to look at its period of the reduct and development by including reader Corbett redact tool good paragraphs that they think are filled to build a native application. So redact toolkit allow developers to write simple, clean Redux code. So this is all about redact toolkit and why we use with React. So I hope you understand this fancy term now that is battery included toolset. So this is all about toolkit. Now let's understand this reader to look good with one basic scenario. Suppose we have to build a counter application. We have to manage it is still five. I'm going to show you the traditional approach with traditional reduct. So we usually read reducer and accident in a separate file. As you can see that here we have x and dot js in which we have a two x ten to increment the counter value or decrement the counter value and introduce a dot js file, we have a logic to increment a counter value or decrement the counter value of the Theta. Traditional redact. Suppose now let us see how we approach with the reader to look good. In redact tool, we could rewrite our reducer and action in the same file. You can see that we have written our action at reducer under the Create slice through the toolkit approach. And you can make the code much more concept by using create. Both the reducer and I can, can be written like this way under the live by seeing this code, define a grid with it and action become cleaner. It data to look. There is no longer need to use the switch statement to manage the action with its corresponding producer. And another thing you might have, notice here, we have now directly mutating the value in the reducer function instead of returning a new value to update. This actually happened because the redact tool could use the library which allow writing the mutating logically, reducing. This is all about the reader toolkit with the basic scenario. 4. What is Redux-Saga ?: Redact saga is a library that aims to make application side effects application. Third effect here means like making HTTP request, funding WebSocket event, or fetching data from GraphQL server. Our saving some kind of information on cache, our browser locally stored it. This thing come under the side-effect that V managed with the help of redact saga, with the hypothesis that stagger it is become very easy to manage, more efficient to execute, and better at handling value. This is all about the redact saga. Here saga use ES6 feature called generator function in order to write asynchronous code. With this approach, our asynchronous code look like if tender synchronous JavaScript code. So this is all about the generator function. 5. What is Generator ?: Now let us understand the concept of generator. So the generator is a special type of JavaScript function. We did introduce it in the EF fixed and this function with Italy can stop it midway and then continue from where it is taught. In JavaScript, janitor is a function which will return an object on which you can invoke a next method. On every invocation of net method, it will return an object of this safe. It will having a value. And the value could be anything and done will be either false or true. Mostly it will be false. And it will become true when we don't have any yield statement. So I'll explain the ill-treatment later. So whenever it doesn't find any yield statement in the generator function, then generator vanished off and won't generate any value. On every invocation, it will generate a new value. Once you saw that the value of done is through, that meant our generative knowledge and it won't generate any value. This is the basic code is snippet of generator function, how it looked like. You can see that we have a star mark here, the function, so that means this function is generator function. So you can see that we have a yearly statement yield. It is an operator on which generator can pause itself. So basically here our execution is with Italy. And once you, once you call this method like iterated dotnet, whatever the value we have here, it will, it will rapidly return that value in the form of this object. So it will return a value as one. And the value of w1 will be the false. If I go to this GFP and you can see that we have the same code here. We have a generator function. We have a yield one year, two-year-old, three-year-old for this one. If I click, you can see that we got this value one and done Paul's statements. We still have some yield if statement. Now in order to get this value, this value. So you have to invoke the next method again. If I just copy this console log and just paste it here. And if I just leave it again and effect, if I run again. Now you can see that we got this value here and the value of Danny's is still false because we still have the yearly statement. If I copy, again, if I just clear this one. Now, we got the value three here, and then it is still false. And if I copy again, if I just clear this one, and if I click run again, we got this value and it still we have done repeatedly, execution is paused. Okay? And if you again in work the next method. Now here it will find out that we don't have any yield statement. If you click again, you'll get that value undefined and done through the admin. Our generator function now got stop here. This is the way basically a generator function running in JavaScript. It's like or lay this way, generator function work in the JavaScript. I hope now you understand the concept of a generator function. 6. Project Set-Up: Guys, let's set up this project. So I'm going to open a command prompt. Let's create our project here with command N dx create. The project name will be like movie app. Let's hit Enter. And it will take around two to three minutes to install all the necessary dependency. So I'll be back one to another dependency, get told our project setup is now completed over here. You can see that let's first go into this folder that is moving up. Before we do and PMI start. In this project, we are using material UI to build our React component. So let's first copy this 15 time installing all the packets that is required to build this application. Here. We need only material UI material. We also need material UI styles. And apart from that, we need some more packets like React, a read x. We also need redact saga yet react at altar down. Now. We need x, yes. So let us install these packages. Packages installed. I have already opened this project in my Visual Studio Code. Let's go into the VS code. So this is our project that I have opened in my VS Code. 7. Configure OMDB API Key: Before we start writing any code, Let's first configure our or IMDB API key. I'm going into browser and gender or IMDB API key to get all the moving target. If I'm going to configure that one, you have to go to this website or IMDB APA. And after that you have to click on this API key. And here you have to select three. Now you have to provide some retail like e-mail, name, and what did they use to tell you you have to provide and after that, you have to hit Submit. Once you provide the detail. And if you click on Submit button, you will avert a method like a verification link to activate your key to this invalid. 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. You can copy this key in your VS code and you have to click on this link to verify this key. Now, our gay got activated here. Let's close this one. I'm copying this key. I'm going to pay it in my VS code. I'm going to paste the key that we have generated so far. Now, I'm just pasting the key over here. And let's see whether our packet got taller, naught our package total. Now, you can see that hand let's do here, and let's wait for the application load into the browser. It's loading in our browser. So our application loads successfully into browser. 8. App Structure & Clean-Up: Now let's go into the VS code. I'm going to capture our project. We are going to have for LED light edges. Then we are going to have a folder for components. Then we are going to have a folder for redox. In the root, we are going to have one environment variable, dot a and B. Here, I'm going to have my movie API key, movie APA, public key, and paste it over here. Since we're created one environment variable in this application, we have to restart again our server. Let me restart this one. Now, what I'm going to do five, so five times going to do some cleanup, indeed application. Let's remove all this thing we don't need. Here. I'm just going to give heading. Logo is not required, so let's remove this one. I'm going to delete this file. We don't need this one. Let's remove this one as well. Logo dot SVG. In index.js file. This will be stay additives. Let's go into the browser first. Working, we don't have any issue now. 9. Configure Redux-Toolkit and Redux-Saga: Now I'm going to configure redact toolkit in this application. I'm going to create some file inside this reduct folder. I'm going to have one file yep, store dot js. I'm going to have one folder for feature. In third filter, I'm going to have our slides. We are dealing with the movie. So let's give this slide here. Movies slice dot js. Inside this redex, I'm going to have a couple of files as well. I'm going to have APA dot js. I'm going to have saga, also a movie sagas dot js. This will hold all just hugger that we are going to get are going to have one root saga as well. That's it. This much file is required inside out reduct folder. First, let's configure redact toolkit in this application. For inside this file, we need to bring the edge slide reduct toolkit. Let's create slides. Now, let's clear it. Our movies slice, slice, slice, slice name over here. B movie. Let us define the initial state of our application. We are going to have movie list at the initial state, which will hold all the movies that we are going to receive from our IMDB. It will be error, which will be inputting initially. And we are going to have one more initial state which will hold single movie and detail. It will be in the T object. After that, we can export this one. Export default, movies lyse nor reduced. Now let's come to the store js file. Here we need to bring configures towards more redact toolkit. Configure it tore. Then we need to bring create saga, a middleware Rameau or redact saga. We need to bring from redact sag only, not core. Remove this one. Now we have to bring our movies slides. So important movie slice. So important movie reduce it. So slides, nothing but we did reduce it. Reduce it from movies slice. We have to also bring out the root saga. Root saga. Now, we have to create the instant of death Create Diagram middleware called saga middleware. Middleware. Let's do here cause store. We're configuring our store. Configures poor. We are going to have reduced it yet. And it's been a pioneer movie key. Sign. I'm offending reduce it here, that is our movie the reducer. Now we have to also use your middleware. So we are using here saga add a middleware. So we have to also specify a model where our and this is toward default middleware. Default middleware. Let's do concur. In third that we're going to put our saga middleware. After that saga middleware dot run. Here we are going to pass the roots saga export default store. I'm just going to do a comment, this line of code because at the moment we don't have any soccer. It will throw an error once you've configured the reduct to liquid with our React app so far. Now, let's just put a comment over here. Let's go to the index.js file. Here we need to bring provider from our reactor do from reacted with x minute provider. We also need to bring a store folder. We're going to wrap our app component with provider. Let's cut this one and paste it over here. And let's restore. Let's save this file and let's go into the browser and verify whether redact tool created successfully configured are not in our application. Repair this one, we don't have any issue. So let's open reduction DevTools. You can see that we are able to see our initial state. And this reduction depth tool that we have defined in our movie slides dot js file, state value that we are able to see in this video. We'll credit that is fully configured in our React application. 10. Enable Routing: Now let's enable routing in this application. We're going to have only two page in this application. That is home, not JS. We are going to have move it or GIS in which we are going to solve single movie with some detail. Let's engender takes inhibit here. Let's also generate a reactant snippet in this file as well. Now, let's go to the app.js file. Let's remove this one. Let's bring component from our reacted. We need browser router routes. Let's see, move this one. Let it fits by the top-level component that is browser router. In third, they're in third, this we are going to have routes in which we are going to have multiple route. Let's find our home route. Let's bring our home component code automatically. Import that page. We're going to have four single movie as well. So movie ID, okay. We're going to render movie component. Routing is configured. You can verify this in browser. So let's go to the browser. Routing is working. Let's put to the movie as well. Also. Okay? So both routed working in this React application. 11. Working on Actions & API - Fetch Movies: I'm going to start with the next part where we're going to fetch all the movies from our own IMDB API to fetch all the movie when it too, right, action and Saga. Five times going to start with this movie slides dot js file. I'm going to write action. So action in reduct toolkit, we write inside it's reduced their first-time going to have good movies. Initially we are fitting the movie with the name is pyridine. Okay? So we are going to receive this name, Pramod component and we can just return yes name. After that, we have to set the movies, a certain movies. This will having a state. Let's put here comma as well. State dot movie list is fair to action. Dot payload. Let export this axon as well. So export Movies, slides, dot accents. At the moment we have two action that is movies. Movies. We have created this to XN. Now I'm going to start with our APA. Then we will work on our sagas. So first we have to also specify the point as well. I'm going to import axial. After that, let us specify the endpoint, API. Endpoint. We're going to have this endpoint. This endpoint we're going to use to fetch all the movie RAM or IMDB APA. Now, we have to specify method to fetch all the movie export movies. Initially, we're fitting all the movie with the movie name is paradigm. Here we have to specify the movie name. After there. We can have return x, yes. And we can specify that endpoint API, endpoint ampere times we have to use S is equal to movie. Now, we can also sort this in-depth. So we don't need to use the return. If you have one line of code, Let's remove this one and let me also remove this return. This will also over. 12. Working on Saga: Now let's work on saga. We have to import some reduct saga effect. Effect. We need to bring effect like let us put. After that. We have to specify a watch or a year. We're going to use the generator function. So on load movies, we are going to yield this one. So let us, we are using here, let it affect this debt, let it action basically run at one time. And if we fire another action, and if previous task is still running, then previous task with Italy will get cancelled. And this tech let it run the task with the new data. Overall. Avoid concurrency over here. That's why I'm using here take, let us it always take the latest one. So here we have to specify the x and type. So we have to use year later and get movies that is coming from or move the slides dot type. Here we have to specify one more saga that is on load movies. We have put paid by this listener. This will be also a generator function. Function on Load Movie. I think it's going to receive a payload summer component. And here we are going to use hand cash if you have any kind of error. So I'm just going to do a console log after that and try. Let us specify a variable called movie name. Load. We are going to be payload data and moving in. You don't get confused over here. So that way I have declared a variable here. Payload will contain our movie name. Now, let us define a variable with car bonds. We're going to call, we're going to use here call effect, downward reduct, stagger, make API requests so fit movies. And we can pass movie name and the argument here. This first mortgage particularly receive this movie name here. Now we will get it as bonds. And here we are going to check if response.status 200. Then we are going to disperse another action with the Alpha PUT method. Support allow to disperse new Weimar, redact stagger middleware. So here we are going to disperse the action step movies. Here we can get it spread out our response that is coming from or IMDB API for response.data. After that, what do we have to do? Export movie sagas. We are going to form this task on load movies. Now, let's go to the root stagger. Here. We have to bring, here, we have to bring Hall effect from our stagger. Let's also bring our movies, Uyghur. Movies either bring movie sagas. Here, export, default. The Silvia also generated only. It will be our roots. Here we are using all is used when you have to run a multiple saga effect in a Padlet. That failure using yet. We are done with our roots. And let's go to the store dot js file. And now we can uncomment this line of code. Now we want any issue in our application. So let's go into the browser first. All was not formed in here what we are missing. So we have to bring from effect. Now let's go to the browser. We don't have any chain our application after writing our flash saga. 13. Working on Search: So we have created our first stagger. Now, let's dispatch this action from our component. We have our homepage here and movie. So first we are going to work on this homepage. This homepage with Italy will have two component. So let's remove this one. And I'm going to use your fragment. Going to having a third component. That component you're going to have like movies list component, okay? A one by one, we are going to work. Let's work on this third component. I'm going to create one file in federal component folder. Inside this root two, we're going to have one file styling, so I'm going to use your styles dot js. Let's generate a snippet over here. After that, what we have to do from react when IT to bring uses state, Use the factor. You also need to bring competent cardboard material from material when it failed. Then we also need to bring you selected and use this path Pramod. You select used in Dispatch. Now inside I'm going to have fragment. In third debt. I'm going to have h2 tag. Give you a movie. I'm going to use your class name. I'm going to use your material UI Style. Bring here. Use styles here to defend this tiling. Bought our component. Let's bring that usage style from. So let's bring this huge styles from this says type file. And in fact, I'm going to define this tile for our third component. In fact, the tiles dot js. Here what we have to do, we have to make a style from our material UI style, styles for default styles. And inside it I'm going to define the tallying part. Different, different class name. We're going to have title. Title. I'm going to have a tiny light. Let us first thing I'm going to have 0.1 line height, I'm going to have 1.25. Then I'm going to have margin bottom 0.15. I'm going to have font size. Now. We are going to have a tiling for our input field as well. So form. And it's going to having width. I'm going to give here 90 viewport, max width. I'm going to give here. Then I'm going to have margin, auto, margin, top margin, mortar, which we'll be all set. We're also going to have a class name for error. For this, I'm going to color. I'm going to use color yet. F 914. Now I'm going to have padding, top. 0.5. Then font size, I'm going to have 2.15 grams. Okay, let's go to this, our search component. After that, what we have to do five, I'm going to define a state or our input field name, name. And initially we are going to the movie related to a spider, going to specify the initial literary digest paradigm. Now, we have to create this tenth for this huge style, The cost plus theta squared to use the Styles. Now after that, Let's be used here, our style. So classes dot title. After that I'm going to have Form, class name I'm going to use here. Again classes on from it. I'm going to have very basic on some mid dot prevent default. Now inside this form, we're going to have textual type. Width. Value will be named. And I'm going to do some edge tiling here for this input field. Be one width. I'm going to give TCH. We are going to have an onChange method name dot dot, dot value. Now we have to dispatch an action also from this component only. Let us store the reference of us it is best. And then dispatch variable. It will be a dispatch. Now I'm going to run here to use effect. This is huge effect. We will run whenever we're changing the circuit input field and when to provide it independently here at the name. And we can dispatch like movies code automatically import that action. Movies like here we can pass a name. Now, we have to bring this component in our home dot js file. Instead of j, you can bring out third component. Now, let's go to the browser. Let this one. We have two tall, this emotion as well. Okay? What we have to do all this emotion. Let install this one. We have already this material UI. Olivia. Only we update all these two pipettes. To install these two packages. Both packet got a total. Now let's close this one. Let's go into the browser. We have got this third input field. And you can see that initially we at fitting the movie lift related to is fired on. Let's open. Let's open this one. You can see that we are getting our older movies. And third is movie list. Fetch only ten movie with that IMDB API. You can see that we are able to finish the movie related to this spider. 14. Handling Error: And if you did this one, and if you try to fake the movie only with the F keyword, now you will get eta. You can see they're getting here error as too many results. So we are also going to sort the editor method as well. In this application, I'm going to solve this error method. And after that, I'm going to display all the movie, the name related to its spider. Let's put the VS portfolio. So when it took bring our state, you'd use selected. We can use here used selector. Our movies slices registered with the reducer key movie. And we can have here movie list in third movie late, either we have movie, our error. We have to go one more level. And this will be error. And we can bring them this one to error. Now, we can check Lotus TextField. Like if you have the error, then only saw the error. And when to use the class name, I'm going to use your material us tiles look laugh. F dot error. Telling. We have already defined in our style dot js file. We can. Now let's move on to the browser. We have some issue. It will be movies list. If you look at our movies slide or GIF file, it didn't move it list. Now let's go into the browser. Read this one. Now we don't have any issue. Now, let's remove this one. You can see that we are able to display the error method as well. 15. Render Movie List item: Now the next thing we're going to show all the movie related to its spider below this input field. For that, we have to create one component. Nowadays, movie list, movies list, not JS. Let's generate this snippet. Here. We have to bring some component from our material UI. The component we're going to use your car media content type robot off. After that. We are also going to use here, you will select a redux. Let us bring you selected. We are going to need the link from our React router dom. And first I'm going to get all the movie list that we have in our is toward. So I'm just going to copy this line of code. I'm going to paste it over here. And we don't need it that only we are in 13 movie list. This one here. Let's say remove this one. So I am going to use your grid. Let's provide some styling. So let's grow. It will be a container. Again, I'm going to be using grid. Again, I'm going to use grid here. Container, justify content. And it will be a center spacing. I'm going to give here three after that. Movies. I'm going to map, we're getting the movies in this search, okay, So if you look at the pattern, so if I refresh this obligation, are all movies is stored in this search. Instead is we have our movie. So let's put it the VS code. So here we can write like this way. Once we have the data in our WR, then only it will tend to all the movie. Dumb. Now here again, I'm going to use grid and key. I can use here as index. The index. I can use your key are in depth. It will be the item. I'm going to use yet card component, some inline styling, Sx, max, width, width. I'm going to give you a 350. Then I'm going to have my card media. Card media. I'm going to have component. Component will be emailed only. Then. Hi, I'm going to give 350. We're going to render the image inside this card media. I dump. Our image is stored inside this object. So if I open this one image, we haven't had this property. Here, item dot Porter in alternate, you can give here item dot title. After this, I'm going to have card content. And I'm going to use here topography material, you're here. I'm rendering item dot title variant. I'm going to space by body color. I'm going to give you dot dot primary. Now I'm also going to expect spider here, part of the movie in which ear movie got released. Let's copy this one. Paste it over here. Let's get bracket here. This entire card media I'm going to wrap with the link. Link will get below. Below this card content. We can specify where it went to navigate. This routed already digital where we are displaying the single movie with some detail. I term dot here, I'm going to use here IMDB, IMDB ID. Now the next thing we have to basically use this component inside our home dot js file. We can remove this one. We can bring our movie list. Now, let's go to the browser. Now, we are able to show all of them will be related to a spider. And if you click any movie, you will never get towards the single movie. If you surveyed a different movie name. Like Batman. We are getting movie related to Pac-Man. We have completed our homepage. The next thing we're 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 to release? Directed. All these to tell. We're going to display on this single movie page. Firstly, we are going to work on our action saga API part. Then we will work on this. 16. Action, API & Saga - Single Movie: Five times going to start with our action APA and stagger. The single movie. Let's go to the movies dot js file. Here. Good. Movie. It's going to have an ID return. We will send ID from our component to get the detail about single movie. It will be like state action. State dot. Movie is not payload. Let's format this one. Let's export this action movie. Now we have to work on our api dot js file. What we have to do, I'm just going to copy this one. And it will be movies or search more. We're going to see that movie ID. Movie ID. It will be a movie ID. Here we have to give I. Now let's work on our saga. Put it in movies. I have a dot js file. I'm just going to copy this one. It will be exactly same. It will be like on Load Movie only. It will be on Load Movie and think this will be a movie. And we have to define this one as well. So this is your listener, and this is a watcher. This guy, he's listening. So whenever you fire this action, this will get dequeued. We have pre-defined this guy as well. It will be almost same. B movie only. We are going to receive a payload, have a movie ID. So it will be movie ID. It will be fetch movie only, not movies. Movie. It will be set movie. We have to fork this task, the fork load movie. We don't have to do anything in it. That is what saga dot js file. We are done with our saga whenever great movie accent fired from our component. This arguer aided listening on this axis and type. It will end with Italy. The education and 1 third promise and get it resolved. Our generator will resume. We're done with our service. 17. Movie Detail Page: Now let's work on this page that is movie. So we have to bring you the effect. Now we also need to bring US navigate and use params Tom or React router down. Let's bring that on US. Navigate. And use param. Because we need the ID that we have over yet from URL. Now, we also need to bring you selected and use disperse from our React redux. Let's bring you selected and use dispatch. We have to bring some component from our material UI component to bring your typography button. Let's also bring the user style. Huge styles. This switch tiled Pi. We have pre-specify. One is titled this page as well. Let me put it this dialogue JS file. We are going to have two sections. Section. I'm going to copy the tiling for this section class name for this, which tile I'm going to use for this x, and you can copy this one. Now let's go back to our movie dot js file. First-time going to store the reference of huge disparity in to dispatch variable. I'm going to copy a couple applying this movie list dot js. To copy this line. We are interested in movie object only, not moving because it holds the detail about the single movie. We need movie only. Now we have to create the strength of this huge tiles, so called pluses. Usually style. We also need the ID. They'll pop us params. Now let's define huge effect yet. This huge effect will run month. We have the ID. We have the ID. Then we can display it the action that is get movie. And we have to pass the ID. Let our sixth or the reference of youth navigate into it. Navigate variable. Now we can verify this one whether we are getting the single movie detailed data on the ID or not. So let's go into the browser and fight. Let's go to this page, refresh this one. Let's click on any movie. Let's see their deductible. Let's open this one movie where you can see that. You can see that we have our movie object in which we have a detail about this movie. That is amazing. It's paradigm and we have some detailed like title director at our plot. We're going to use some information from this object and we're going to display on this page are now what we have to do. I'm going to remove this can do. And I'm going to have section the class name. I'm going to use your material classes. And in fact that I'm going to use the image tag. I'm going to use here like movie poster and in alternate and we're going to provide the movie title, movie title. I'm going to have one div. I'm going to use typography. And let's align left variant. Let's keep S3, S2. Here. I'm going to show the movie title, dot title. I'm going to copy this one a couple of time. So I'm going to tell movie title, plot that vector. Okay. Let's copy this one a couple of time. The time I'm going to use Variant five. But here we can have yet like movie dot p here. Then I'm going to use here body one. It will be plot. Now I'm also going to solve the director name, and here it will be at six. Let's flip it six. Silver director, movie dot director. And we can give you a director. And we're also going to have one Go Back button. Let's see, huge button having go back variant I'm going to use here. And then I'm going to have onClick method. It will never get towards the homepage. Navigate. We can use here. Let us save this file. Let's go to the browser. Now we are able to see this single movie with some detailed. So we have movie name, plot and directed. You can also add some more detail as per your convenience. I'm using only this much detail on this page. And if we click on go back, you'll never get towards the homepage. You can also view this movie as well. This is working. Let's open this control. So we don't have any issue in our console. 18. Wrap Up: If you're watching this video, that when you have successfully completed this course, now I hope you have pulled under tending to integrate with redact toolkit in React application. And I hope you have enjoyed the course with some new redex concepts. And if you have still some doubt or query relative to this course, you can always put your query or doubt in comment section. I will try my level best to solve your query. So that's it. From my end, I will see you in networks.