Learn React Redux Toolkit with Project in 2 Hours | React Redux Tutorial for Beginners

hey what's going on guys welcome back to another video so this is a two hours long react redux toolkit crash course for beginners and in this video we are going to build a movie rating application from scratch we will cover a lot of topics like redux installation axios folder structure corrosion movie search middleware and many more taking you from a bigness to an advanced level in just one videos you can also use the timeline in the description below so that you can jump to any topic directly so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started all right guys so i have already bootstrapped my react application using npx create react app and the name of my application and i will just give you a quick walk through what i have in my project at the moment so this is the sample project which we get when we bootstrap the react application and i am running the application using the npm start on localhost 3000 so if i go and show you then this is where my application is running and first thing what we are going to do is we are going to delete all the unwanted files that we don't want for this project so i'm going to select the setup test and then the report web we don't want the logo we don't want the index css we don't want the app test as well we don't want the robot.txt manifest and these logo images so i'm just going to delete them and i will click on the delete so that is going to delete everything and it is going to give me an error so let's solve the error so we don't have this logo so i'm going to remove the logo all right and inside this i am just going to write the app so that we can see that something is there in our app component and then we will go to the index.html and from the index.html i'm going to remove the manifest file because we don't have the manifest file now and then i'm getting an error because of the report vital.js so i'm just going to zoom a little bit so that you can see all right so this is giving me an error and it's let's go to the index.js and inside the index.js i'm just going to remove this all right and now if i save it then i'm still getting an error and that is because i have a index.css so let me remove the index.css all right and the last thing is we just need to remove this so i'm just going to select this and i'm going to remove this and i will save it so now everything i have removed which i don't want for this project and if i go to the package.json then i just want to show you that what all dependencies i have at the moment so i already have a redux toolkit i'm going to show you uh how you need to install the redux toolkit in your project and after that i have the notes says because we are going to use a sas for the css and i'm not going to use any framework for the css i'm going to write all the css from the scratch so because i have created a previous video the react redux video where i have used a semantic ui and i have found that a lot of people find difficulty while using the classes of the semantic ui so i decided that i'm going to write all the css for this project and then we have the react redux dome library for the routing and we have the redux so this is all the packages i have already installed and apart from that we also need the axios so i'm just going to install the axios so i will go to this node and you will see that i'm already installing the axios all right so now my axios is installed and we can see the axios as well so before start writing any of the code i want to show you some slides where we understand how we are going to structure the project and what all the packages we have installed and how to install those packages so the first thing we have done is we have bootstrap the react app so you can use this command to boost up your react app and after that we have installed the redux react redux and the redux toolkit so you can use this command to install your redux and redux dependencies and then we have installed the axios because we are going to make some api calls and we are going to use the axios package for the api calls and then we have installed the react router dome so that we can do the routing of our components and last we have installed the node sas which will be helpful for writing the sas css all right and the next thing we will see that how we are going to structure our application so this is how our movie app is going to look we are going to have the app component and inside the app component we are going to have the header component and the footer component and in between the header and the footer we are going to introduce our routing logic where we are going to have the home component and then we are going to have the movie details and we are going to have a 4.4 which is the page not found so this is how we are going to do a high level skeleton of our application and then inside the home component we are going to have some more uh component so on the top we are going to have the app component then we are going to have a home component which will be a route and then inside the home component we are going to have the movie listing component which is going to list all the movies and the shows and then inside the movie listing we are going to create a movie card component which will be the individual movie card or the show card so i hope you got a bit of idea how we are going to design this application now let's go to the visual studio code and let's create the folder structure and the files that we are required for this project all right so first thing we will do is we are going to convert this app css into a sas file because we are going to use the sas so i'm just going to remove all the css okay and then i'm going to rename this and i'm going to rename this as uh app.sas all right and then in the source folder we are going to create some more folders so the first folder which i want to create is the common folder which is going to have all the common files for me and then i'm going to create a components folder so let me add the components all right and the third folder we need to create is the features folder which will contain all our redux files so right now we are not going to write anything in this features folder but we are just going to create the folder so i'm going to click here and then i'm going to have the features so this features folder will contain all my redux code and then i'm going to have the images folder because i'm going to use some images so let me have the images folder all right now i will go to the common folders and i'm going to create some common colors for my application so i'm going to create a file and i'm going to name it as colors.sc ss all right and i'm going to add some primary colors so for me my application will have a primary color and that color will be hash 0f171e all right then i'm going to have my secondary color so let me have the secondary color all right and the second color which i'm going to use is 1 a 2 4 2 f all right and for the fonts also i'm going to give a font primary and font secondary so i'm going to give a font primary and this font primary color will be white so i'm going to give fff all right and there will be a font secondary so let's add a font secondary as well so that is going to be 7 9 b 8 f 3. all right so we have created some common colors for our application and i'm just going to close this because we don't want this now and inside the components i'm going to start creating my components so i'm going to create a folder and i'm going to give it as a footer all right and inside this footer i'm going to create a file uh which will be the footer.js all right and then i'm going to create an another file which will be for the css so i'm going to create a footer dos sas all right so we have the footer now the next folder we are going to have is the header so let me add the header and inside the header i'm going to have the header.js so let me have the header.js and i'm going to create one more file which will be for the css so i'm going to write the header.css all right so we have the header we have the footer then we are going to have the home folder so let me make in another folder which will be home and inside the home i'm going to create my home.js and then i'm going to have my home.scss all right we have the home then we are going to have the movie listing so let's go back to component create a folder which will be a movie listing all right and inside the movie listing we are going to have the movie listing.js and we are going to have the sas file so i'm going to have the movie listing.scss file all right then we are going to have the movie details so let's go back here and write the movie details all right and inside the movie detail let's create two more files so i'm going to write the movie detail.js and i'm going to write the movies as so i'm going to have the movie detail dot s-c-s-s says file all right so in this way you can create all the folders so i'm going to just quickly create all the folders which we need all right so i have created all the folders and the files which i need for the components all right so now let's start writing the functional component for each of the components we have created so for that i am using an extension uh which is the let me show you so this is the react code snippet and this is going to help me to quickly build the react components so what i'm going to do is i will just start with the movie details and i'm just going to write rsc and this is going to give me a functional component so i have written the rsc i'm get the functional component i'm just going to write here the movie detail all right so this is done for the movie card i'm again going to write an rsc and i'm going to add a movie card here so let me add a movie card all right so i have done that as well now let's go to the page not found and i'm going to write rsc again and then i'm going to write here the page not found so let me add the page not found all right we have done the page not found as well let me close all the sas files for the movie listing i'm going to use again rsc and i'm going to add here the movie listing so i'm just going to do a copy paste all right for the home component so let's write the rsc and i'm going to write a home here all right so we have the home as well now for the header let's add the snippet all right so i'm going to copy and i'm going to add the header here all right and last for the footer so let's write rsc again and let's create the footer component as well all right so we have created all the components and we have also written some of the basic code in the component now the next thing i want to show you is we are going to use the omdb api so for that we are going to need a key in order to call the apis so let me show you how you can generate the key so this is the omdb api website and you have to get a key so if you click on the api key then you just need to enter your email and you need to submit so you are going to get a free api key for using the omdb apis and you will get this api key in your email all right let me show you how you can use the omdb api key so if i click on the usage then you will see that how we can do we can use in this way and there are parameters which you can use in order to make changes in your apis or the type of data you want all right so i already have the api key so let's go back to our visual studio code okay and what i will do is i'm inside the common i'm going to create a folder for the apis which will help me to call the api and we are going to use the axios package for calling the api so i'm going to create a folder and i'm going to add the apis here and inside this i'm going to create two files so the first one will be the movie api dot js all right and the second file will be the movie api key dot js all right so for the movie api key i already have the key so i am just going to copy paste my key so you can generate your own key so i am just exporting this api key so that i can use it all right and for the movie api js i'm just going to import my axios package which we have already installed so i'm going to have my axios package from the axios all right and then i'm just going to do an export default axios dot create all right and then inside the excess create i'm just going to give my base url all right so i'm just going to do a copy paste of the base url which we saw from the omdb website so this is the base url all right so we are done with our common stuff which we need for this project and let's close this let's go to our app.js all right inside.js first we need to change this to the sas because we are using the sas for this project all right and now let's write the app component first so inside the app component what we are going to do is first let's import the stuff which we need so we are going to build a routing so for that what we need is first i'm going to import react from react all right the next we need to import is the browser router so let me add the browser router as router i will need the route and i will also need the switch so let me add the switch all right so i have added that and now let's create the route so i'm going to have a multi-line jsx so i'm just going to remove this all right and here i'm going to write a div with a class name of app all right and inside that i'm going to add the router all right and inside the router i'm going to have the header first all right and after the header we are going to have the route so our first route will be the path and i'm going to add the path as slash and forward slash i want to load the component which is the home component so let me add the home here home here all right and then i'm going to have an another route and the path for that route will be is the movie detail so whenever we go to the path as movie slash id so our id will be i am dbid all right so whenever we go to this route what we need we need to have the movie details so i'm going to write a movie detail component here all right all right and our third route will be the uh page not found so for that i'm going to add the route and i will just simply add the component and our component name is page not found all right so we have all the routes and the last is we need to add the footer so let me add the footer all right so we have added all this and let's go and we see that we get an error because these are not defined so let's add them so what i will do i will go here and then i'm going to start importing my home from this is going to be slash components inside the components i'm going to have the home and inside the home i'm going to have the home and the last one is the movie details so i'm going to do an import movie detail from slash components slash movie detail slash movie detail all right so we have done everything and now let's go and see how the uh page looks like so what i'm going to do i'm going to open the page here all right and i will just do a refresh so when i do a refresh you can see that we have the header we have the home page and footer and this is not exactly what we want is so what we will do is we are going to add a switch here all right and we are going to put all these routes in our switch so if you want to understand more about the switch and how we do the routing then i have a complete video on the react router dome and you can click on the card above or i can add the link in the description below all right so now you can see that we have the home we have the header and we have the footer and what i'm going to do i'm just going to give an exact keyword here so that it's going to match the exact part and now if we want to test it then what i will do i'm going to add a movie slash one and this should go to the movie details so we can see the movie details here all right and if there is a route which is not defined and it's an other than something like that then it should give us the page not found so that means our routing logic is working fine now let's start working on the header first and we are going to style the header as well so what i will do is i am going to open the header and i'm going to do a split screen all right so that we can have the header css as well so i'm going to write the header css all right i'm going to close this so let's start with the header jsx so i'm going to add the multiline jsx okay then i'm going to create a div with the class name of header and inside that i'm going to have the logo so for that i'm going to give a div with the class name and this will be a logo and i'm going to name it as a movie app all right so after that i'm going to add a div so that there will be a div with the class name and the class name will be the user image all right and inside that i'm going to have the image with a source and i'm going to have an alt tag so let me add the alt tag and the alt tag will be the user all right so we have done it and we don't have the user image at the moment but before that adding the user image let's add one more thing i'm going to import the link and from the react router dome so let me add the react router door and i'm using this link so that i can have a logo which should redirect me on the home page so let me adjust the screen little bit all right so what i will do i'm going to add a link here and i'm going to add the 2 and this 2 will be equals to the slash so it should go to the home page whenever i click on the logo so i'm just going to cut this and i'm going to add it here all right and let me add the images here uh so i will add the images in my images folder so i'm gonna come here and i'm gonna paste it so i have two images so that we can use those images so to import the images you just need to write the import user from slash slash and i have the images and inside the images i have the user all right and i'm just going to add here png all right i will save it and as soon as i save it you see that we get the image as well now this doesn't look nice so we have to add some of the css here so for adding the css first let's link the css file so i'm going to import all right and i'm going to import a header dot sas all right and let's start writing the css so what we need is first i want to import all the colors which i have so for that what i will do i'm going to write an import so this will be dot dot slash dot dot slash it will go to the common and the css of the colors all right so now we have all the colors next i'm going to write a css for the header so for the header what i need is i need a background color and my background color should be a secondary color which we already have so i'm going to give a secondary color all right and after that i'm gonna give a height of 72 pixel i'm going to give a padding of 0 pixel 40 pixel i'm going to give a display flex so if you don't know about the flex properties then i have a tutorial on the flex properties i'm going to add the link in the description all right then i need to align my items in the center so for that i'm going to write the center and i want my logo and the user icon should be at both the ends so i'm going to do a justify content and i'm going to add a space between all right the next thing we need is for the logo so for the logo what i'm going to do i'm going to give a color to the logo and this color will be the font primary so i'm going to add the font primary so this should be a dollar so let me change this to dollar all right so we have the font primary and then i'm going to give a font size and this font size will be 20 pixel and then i'm going to give a font weight and the font weight will be 600. so we have the css for the logo as well and then i'm going to add a css to the user image all right and i also want to add the same css to the user image and the image inside it all right so i'm going to give a width of 38 pixel and i'm going to give a height of 38 pixel all right so now we have the movie app logo and the icon the next thing i want to do is i want i don't want this font to be on my application i want a different font so i already have a google font link so you can go to the google fonts and you can get whatever font you want so for that what i'm going to do is i'm going to go to my index.html all right and inside my index.html below here i'm going to add the font which i'm going to use so i'm just going to do a copy paste of my fonts which i need all right so we have the fonts here and i have also added the font awesome so that i can use the icons uh later on for the movie details page so these links cdn links you can find it on the google that's nothing special here so this is what i have added and now what i will do i will go to my app dot css and inside that app.sas file i'm going to import the colors and i'm going to give some of the basic styling which i need for throughout the application so first i'm going to import the says so uh the colors so i will go to the source i'm going to go to the comments and then i have the colors all right then i'm going to add a universal selector where i'm going to give as margin 0 adding zero box sizing border box all right and i'm going to give the font family which we just have added the fonts so for that i'm using the open sense and a fallback i'm going to give as sense serif all right so you can see that now our font is bit changed and then i'm going to add a anchor tag for the anchor tag i'm going to just give the text decoration as none alright for the background to the body so i'm going to give a background to the body and this background will be my primary color so i'm going to have the primary color all right and i'm going to give one more class to my app.js so after the header i'm going to add a div with a class name of container all right and this will be ending it here okay and for this container i'm just going to give a basic styling of my space on both the sides so for that i'm going to add the margin so i'm going to have the margin as 0 pixel and 40 pixel all right so now we have the header part done and the next part we need to do is about the footer so let's go to the footer so if i click on the movie app then we should be able to see the home so that means the link is working properly now let's go to the footer part so i'm going to open the footer and i'm going to open the footer sas as well all right so for the footer i'm going to change this to a multi-line jsx all right i'm going to give a div with a class name of footer all right then i'm going to have a do and here i'm just going to have a movie app name of my application and then i'm going to have a div and i'm going to have some text here so i'm just going to do a copy paste of the text so i'm going to add it here all right and let's go to the css first and then add the css so i just need to import the colors so i'm going to copy this from here and i'm going to add it here all right and then for the footer i'm going to give a background and this background will be the secondary color all right i'm going to give a height same as my header 72 pixel i'm going to use the display flex all right i'm going to have the justify content as center i'm going to have the align items as center and i'm going to give a color of the font primary so that we can have the white color and i'm going to give the flex direction as column because i don't want them to be in a row so i want them to be in a column all right and i can see that when i save it i cannot see anything here because we haven't added the sas file here so i'm going to add the sas file here so i'm going to add the footer.scss all right so now we have the header and we have the footer the next thing we will do is we are going to do the home so what i will do for the home is i'm just going to close this i'm going to close this and i'm also going to close the header as well and the index as well and what we will do is we are going to go to the home component first so inside the home component so i'm going to change this to a multi line of jsx so i'm going to remove this and i'm going to give a div with a class name and i'm going to add a banner image here so we can add a banner image here whichever image we want but right now i don't have any image so i'm just going to keep this div as an empty and then i'm going to add the movie listing here so we are going to have the movie listing component all right and then i just need to wrap this in a div or in a fragment so but i'm going to add it a div so i'm going to cut this and i'm going to add a div here all right so this is what only we need for the home component i need to import the mobile listing so let me import the movie listing from dot dot slash i'm gonna go to the movie listing and i'm gonna have the mobile listing all right so but what we want is we first need to fetch the data and then we need to store the data in our redux store so what we are going to do is we are going to make an api call in our home component so for making the api call in our home component i will make use of a use effect hook so if you don't know about the use effect hook i have a complete release on the react hooks i'm going to add the link in the description so what i'm going to do here is i'm going to use the use effect all right and this is auto imported and inside this use effect i'm going to create a function for the fetch movies so i'm going to write a constant i'm going to have a fetch movies and this is going to equals to the arrow function all right and this is going to be an async await so we are going to add an async keyword here because it's going to return a promise and then i'm going to write a constant response so when i make an api call i should be able to get a response back and i'm going to add an await keyword because we are using an async await and then i'm going to import the movie api first because we are going to make an api call and we have already created some default export from this movie api which is going to give us the base url all right so i'm going to import the base url first so this was going to give me a movie api from the api's movie api so now i can make use of that movie api so i will use the movie api dot get and inside the get i have to create the api endpoint so this endpoint you will be able to see on the omdb website so what i will do is i'm going to do a backtick and then i'm going to add the api key so let's import the api key as well so i'm going to import the api key all right so we have the api key and then i'm going to give here the api key so this is equals to api key and here the value will be equals to so i'm going to add a dollar and this will be equals to the api key api key all right so and we also need to add a search term that when you make the api calls what movies you want to get as a result so for that i'm going to add an search term as s this is a search term and i'm going to give a hard-coded search term for now because we don't have a search functionality at the moment i will go here and i'm going to create a constant movie text all right and we are going to make search for the harry so i need all the movies which contains harry as a keyword inside it all right so i'm going to add here as movie text all right and i will search only for the movies first so for that i need to give a type so i'm going to do end and i'm going to add a type and the type will be movie all right and you will get all this information that what will be your text and what will be the key for the movies you will get everything on the omdb website so let me show you once so this is our omdb website and you will see that we have different parameters here so i am adding a type with the movie so i want only all the list of the movies and for the search i'm adding s and i'm giving a valid option that i need all the movies with the harry alright so we have the movie and the next thing we will do is we are going to catch the errors so i'm going to write a catch here and inside the catch i'm going to have the error all right and here i'm just going to do a console log of the error all right so this is going to give me an error all right and then we can also log the response so what is the response so if i go to the console log and i'm going to log the response and just i'm going to give it here the response from api so now what we will do is now we have the fetch movies function and now we need to call this function so we can call this function inside our use effect itself so i'm going to write a fetch movies function and i need to call once so i'm going to add an empty dependency all right so now if i go to the inspect element and if i go to the console all right i will clear the console and i'm going to refresh the page so you will see that when i refresh the page i get a response from the api all right and if i expand this i'm going to get the data and this data for the search term we have all the movies which contains harry and if i go to the network tab then we actually made an api call to the omdb so right now if we go and see in our redux tab then we will not see that there is any uh store we have because we haven't configured the redux in our project yet so let's go and let's add the redux in our project and then we are going to dispatch the response which we get from the api into our redux store so what i will do is i'm going to add the redux in my project so let's go to the features and inside the features i'm going to create a file which will be our store.js so i'm going to add the js and i'm going to create one more folder which will be the feature for our movies so i'm going to create a movies and let's go to the store and add the information to the store first so i can first import the configure store we need to make the configuration of the store so this is a bit of different the way we used to do with our simple redux without using the toolkit and toolkit actually gives us some additional stuffs which makes it more easy to work with redux so first i'm going to import the configure store all right which is coming from the redux toolkit and then i'm going to simply export the constant store and the store will be equals to the configure store and this is going to have an object and i'm going to add the reducer here all right so we are going to create the reducers and when we export those reducers we are going to import the reducer here and we are going to add the reducer here now what we will do is now we have created the store we just need to provide our store to our component so let's go to the index.js all right and inside the index.js what i will do i'm going to import the provider first so i will go here i'm going to import the provider all right so we have the provider and this should be from the react redux so let me add the react redux okay and then we also have the store which we have imported from here so let's go here and i'm going to import the store all right i have the store and that store will be coming from the features slash store all right we have the store and now let's provide the store here so i'm going to add the provider all right and there will be a store prop to it and the store prop will contain the store and inside the provider we just need to give the app and this part is very similar how we used to do in our redux project all right so we have provided the store now let's go to the movie folder so which we have created in our features so i'm going to go to this movies and inside this movies i'm going to create a slice so before i create a slice i want to give you some overview on the redux toolkit so let's go to the official website of the redux toolkit all right so this is the official documentation of the redux toolkit and how you can start using redux toolkit in the project so you can go and read the documentation but i'm just going to focus on some of the topics here so this is how you can actually install the redux toolkit in the application which we saw in the start of this application all right and then how you're going to create a redux store so this is the same way we did it right now how we created the store we just did a config store and then we did a configure store with a reducer all right then how you can provide the store you can just do this way you can provide the redux store into our application which is our app component all right and then we need to create a state slice so this is what we are going to create now so how we can create these slice so when you want to create a slice slide for us it's a movie slice so we are going to have the movie slice then we are going to import the create slice from the toolkit we are going to set an initial state all right and then after the initial state we are going to create the reducers so a good part of the redux toolkit is you don't need to create separate folders or the separate files for the actions for the constants and then for reducers you can combine everything in a single slice and this is how it's easy and it makes very comfortable while using the redux because you can see everything in a single file itself so we are not going to do a copy paste of this we are going to create it from the scratch so if you want to read more about the redux toolkit then you can use this documentation i'm going to add the link in the description so let's go back to our visual studio code alright so i'm going to go to the movies folder and then i'm going to create a file and for us it will be a movie slice dot js all right we are first going to create a slice so let me add a slice here all right this will be coming from the redux toolkit and then we need to set an initial state so what i'm going to do i'm going to create a constant with a initial state and this initial state will be equals to the movies i'm going to give an empty array for now we don't have any other state and then what i will do is i'm going to do a constant movie slice and this is be create slice all right and then i'm going to create a object inside it and then we need to give the name of the slice so for my case the name is the movies all right uh i made a mistake movies all right what will be my initial state so i'm going to give my initial state and then i need to give my reducer so i'm going to give a reducer here all right and there's one more parameter which is called the extra reducer so if i add it then you will see that we have the extra reducers but for our project we don't need the extra reducers so i'm just going to give you a bit overview of what is the extra reducers is so let's go to the redux documentation again all right so this is the documentation which i want to show for the extra reducers so here you will see that there is a counter slice and the name of our slice is the counter and we have the initial state we have the reducer as well and inside the reduces we are going to create the actions which are we will create in our application as well but apart from three there is a fourth one which is the extra reducer so let's go down we know the name we know the reducer and then we have the extra reducers so this extra reduces is used when you have a common method which you want to invoke but you have a different types of action so let me go down and here you will see that we have created an action uh increment by and the decrement by all right so now we have these two actions and we based on the increment by we need to do something and based on the decrement we need to do something so what we will do instead of creating two separate actions inside the reducers what we can do is we can actually add the case and then based on the action type we can change our state so for that this extra reducer is useful and but for our project we are not using any extra reducers so i just wanted to give you a bit of idea what this extra reducer is so let's get back to our project all right and for our case we don't have the extra reducer so i'm just going to remove this all right and then i'm going to create an action uh inside the reducer so for me the action is the add movies and this add movie or action will take the initial state and then it's going to take the payload so i'm going to destructure the payload all right and this will be an arrow function all right and whenever i get the movies from the payload i just need to update my state of the movies so for that what i will do i'm going to do and state dot movies and this will be equals to the payload all right so here there is a difference between the redux and the redux toolkit way so in the redux toolkit it uses a internal library called m-a-i-m-m-e whatever you want to pronounce for the mutability so what you do that you just take the state and you just update the property you want to update so for us in the state we just need to update the property of movies but in the old redux way what we used to do is we used to do the dot dot dot state and then we need to add the new state so this is how we we used to do so we are going to use to do that dot dot dot and we used to take the state and then we used to add the payload so whatever the initial state we have we used to take that a copy of it and then we used to add a new state to it but this we don't need to do we don't need to take care of the stuff in the redux toolkit as it uses ma internally it automatically creates a copy of the object before we make a change so this is a bit of difference in the redux toolkit next thing we will do is we are going to export this add movie action creator so what i'm going to do is i'm going to export a constant and i'm going to export the add movies this will be equals to the movie slice dot actions all right so we have the action which we can import it in our home component all right and the next thing we need to do is we can also do the export default of the movie slice dot reducer all right so we have the export default of the movie slice reducer as well so what we can do is we can go to our store okay and inside the store we can actually import the reducer so i'm going to do an import movies reducer from dot slash movies slash movie slice and then i can just add this reducer to this so i'm going to remove this and i'm going to add the reducer here because i have only one reducer so this is how we can actually add the reducer now one more thing i want to do is if i want to fetch a value if i want to get a value from the store how i can do that so for that i'm going to create a function so i'm going to write an export constant get all movies all right and this is going to give me a state all right and what i want is i want the state dot movies the name of our slice which is the movies and the property which we want to export that is the movies so i'm going to add the movies here so now we have added everything in the slice which we wanted at the moment and now let's go to the home all right i am in my home component and whenever i get the values from the api i want to dispatch an action so that after doing the dispatch this will go to the reducer and the reducer will update the state so i'm going to go here and i'm going to write a constant i'm going to add a dispatch and this is going to be equals to the use dispatch all right so now we have the dispatch and what i will do is i'm going to copy this and i'm going to add it here and i'm going to add the dispatch and we need to dispatch an action and our action is the add movies so i'm going to write the ad movies all right so it's auto imported and when i do the add movies what i need to pass i need to pass the response dot data because data is the key which contains all the results and i'm going to save it all right so i'm getting an error that react hook use dispatch cannot be called inside a callback which is because i made a mistake instead of adding it here so i don't want these to be added here so i'm going to cut this all right and i need to add outside my uh use effect all right so now i have saved it and now let's see that whether our movies is getting into the store or not so what i will do is i will go to i will first refresh my page and when i refresh my page i see that we make an api call okay i will go to the console nothing is showing here then we go to the redux and when we go to the redux we see that we have an add movies which is the action creator we dispatch with the response we get from the api so if i click on it i will be able to see the movies so we can see that we dispatched the action creator which is the ad movies and it's get added to our store so if i click on the state then you will see that we get the search results which is this and we get the total results and we get the response so we need to make a bit of change here because since our movies is not an array so we need to make it an object so let me go back to our code all right and we will go to our slice and instead of this movies and make this as the object all right and now if i refresh it then we will see that we get the movies all right and this movies and if i go to the state we see that it's an object inside the object we have a search and this all right now we have this and the next thing we will do is how we can fetch all the movies so that we can display it on our application so for that let's go to the home and inside the home we see that we have a movie listing where we are going to list all the movies so let's go to the movie listing so i'm going to go to the movie listing and inside the movie listing if i want all the movies then what i can do i can make use of a use selector so what i will do is i will go here and i'm going to write a constant movies all right and this is going to give me a use selector so i'm going to make use of a use selector and i'm going to call a function get all movies all right so we have the get all movies which is exported from our slice so this is and i'm going to save it and then let's do a console here all right so i'm going to do a console and i'm going to add a movies here all right and now let me refresh it so if i refresh it and if we go to the console then we see that we get an undefined so we made somewhere a mistake so if we go to our get all movies so let me copy this go to the slice and if i come here then i see that i have a state name of the reducer and then the name of the property or the state which is the movies and if we go to the store then we see that we have made a mistake here so this should be an object all right and inside the object i'm going to name it as movies and this movies will be equals to the movie reducer so i'm going to do a cut and i'm going to add it here all right now if i save it then let's go and refresh it and if i refresh it then you will see that on the movie listing we actually get our data and now we can use this data to display it on our screen so what we will do is we are going to display all the movies on our movie listing component so what we will do let's go to our movie listing component we have all the movies here and then i'm just going to create a variable so that will be a render movies and this is going to equals to the empty all right and then i'm going to have the render movies equals to movies and we are going to add a condition that movies dot response so if the response is equals to equals to true so we already have this value here so if you go to the inspect element if you go to the redux then inside the redux you will see that we have a response here so if this response value is true we need to loop all the movies and we need to display all the movies so what i will do is if this response is true then in that case i need to return a jsx but if this response is false then i need to display the error so if it's false then i just need to display an error so for that i will do a div with a class name and i'm going to give a class name of movies error all right and then inside that i'm going to have an h3 so let me add an h3 tag here and i'm going to close this h3 tag all right and inside this h3 i'm going to have the movies dot error so if there is a case of the error then i'm going to have a one more property as an error so i'm going to just display the error whatever it is all right but for this case what i'm going to do is a movies dot search so we have the array of the movies in this search and then we are going to add a map here all right and this map is going to give us a movie slash we are going to take the index this is going to be an arrow function and then we are going to return this value to a movie card all right so we are going to have a movie card we are going to pass the key to the movie card as the index and then we are going to have the data which will be equals to the movie so i'm going to add a movie here all right i'm just going to remove this and i'm going to save it so this is what we have done is we have created a variable with the render movies then we have checked that if the movie's response is true then we are going to loop through all the movies and add it to the movie card but if it's false then we are just going to display the error message all right and then what we will do is we will go to our movie listing and i'm going to do a multi-line jsx and i'm going to create a div with a class name of movie wrapper all right and then i'm going to create a with a class name of movie list all right and then inside this movie list i'm going to create an h2 tag which will say as movies and then i'm just going to create a div with a class name of movie container all right and inside that i'm going to do the render movies whatever the render movies i have okay so i'm getting an error so let's see what the error is and it says that movie card is not defined so let's import the movie card so i'm going to go here i'm going to import movie card all right and this will be coming from the movies sorry this will be coming from the movie card slash movie card all right we can see that when we render this movie then we see that we have the cards here these movie cards are based on the number of results we have in our search array all right so we have the movies and now let's go and add some of the css to the movie listing so i'm going to go to the movie listing and then first we are going to add the color sash so i have added the color says and then i'm going to do the movie list and for the movie list i'm just going to give a margin of 20 pixel and 0 pixel then for the h2 tag inside it so for that what i'm going to have i'm going to have a color and i'm going to give a font secondary secondary all right then i'm going to give a margin bottom of 10 pixel and i'm going to give a font weight of 400. all right and then we just need to add this movie listing sas file to the mobile listing so i will go here and then i'm going to add it here import and this import will be dot slash movie listing dot scss and if i refresh it i cannot see anything here so what have we done so what i need to do is i needed to add a semicolon here so now if we see that we can see the movies uh css all right and then last we need to add the container so before adding a css to the movie container let's go and uh add the values to the movie card so i will go to the movie card and inside the movie cards we are going to receive a props so we have pass a prop here if you go here then we will see that we have passed a prop of data so that we can get the data here and i'm going to destructure the prop so i'm going to get the data which will be equals to the props and then what we will do is in the return i'm going to do a multi line jsx and i'm going to write a div with a class name of card item all right then inside that i'm going to add a div with a class name of card inner all right then i'm going to add a div with a class name of card top okay and inside the top i'm going to add an image source and this image source will be coming from the data dot poster so if i go here and if i do the inspect element let's go to the redux tab if i go here search and then we see that here we have the values and here we have a poster so i'm adding the poster to the image so then the alt tag will be the data dot title so i'm going to add the title so we have all the properties on our object of the data so the image is added all right and then we need to add the card bottom as well so i will do a div with a class name and this class name will be equals to the card bottom all right and then inside that i'm going to add a div with the class name of card info all right then i'm going to add an h4 tag and this h4 tag will contain the [Music] data dot title and i'm going to have a paragraph tag and this paragraph tag will have the information of the year release here so data dot all right and now let's see here so if i refresh my page then we see that we have a broken image so we might have done something wrong here and that is because the poster is capital so if i save it then we will see that we see the movies we see the harry potter deadly hellos and all the stuff now the only thing we need to do is we need to do a little bit of styling so let's go to the movie listing first and we are going to add a grid here all right so we're going to use a display grid so i'm going to here and i'm going to go the movie container this movie container i'm going to add a display grid and then i'm going to add the grid template columns we're going to repeat it and i'm going to do an autofill the space which is available and then i'm going to add a min max of 220 pixel and i'm going to add one fr all right so this is a simple grid stuff i'm doing and i need to add a space between them so i'm going to give a grid gap so let me add a grid gap yeah grid gap and i'm going to give a grid gap of 15 pixel all right so i haven't done much here i have just simply used the css and if you want to understand more about the css grid i have a complete course on it you can click on the card above or you can find the link in the description all right so we have this listing as well we have the movie card the only thing we need to do is we need to style our movie card so we are going to take a pause here once we style our movie card and we are going to continue the same application in the next video because it's going to be a too long video in in a single stretch and i don't want to overwhelm you with a lot of information in the same video so i'm going to go here and i will see that we have the images but we don't see that the images and everything the css is not so good so what we will do is we are going to add some more css to the movie card so let's go to the movie card so i'm going to go here and i'm going to go to the movie card all right so first i'm going to add the colors so let me add the color and then first we are going to do the styling of the item card i'm going to give a background and the background will be the secondary color so let me add the secondary color all right and then i'm going to give a cursor pointer all right then i'm going to have the top card top and for the card top we need to have a height so let me add a height of 300 pixels inside this we have the image and for the image i'm going to give a width of 100 percent so that it can occupy the complete uh height and width of its parent and i'm going to give a height of 100 all right and then i have a card info so let me add the card info and this card info belongs to the title and the year so for the title and the year what i will do is i'm going to give a color of font primary all right and then uh let's give a h4 so to the card info i have an h4 tag inside that and for that i'm going to give a font size of 22 pixel then i'm going to do a font weight of 400 all right and then i'm going to do a margin so i'm going to give a margin bottom of 10 pixel all right so we have added the css we just need to link the file so let's go here and i'm going to do an import uh of slash movie card so dot scss all right i will just save it okay and now if i show you then though if i just do a zoom out then yeah we don't see us still there is a space we need a little bit of space here so for this what we can do we can actually add some of padding here so let's go back here and this is for the card bottom so i'm going to copy this card bottom let's go here and let's add the padding so i'm going to go here and i'm going to add a pairing of 20 pixel all right so now we can see that we get a proper movies and we get everything properly we have the footer and we have the movie but we see that there is a problem here and let's see what we actually give the css to it so if we go here if we go to the header we actually gave a space around but we need a space between so let's add a space between so let's go to the header says and instead of the space around let's change it to space between and i will save it so i think we will take a pause here and we are going to continue this application in our next video where what we are going to do in the next video is we are going to have the shows as well and whenever we click on any of the movie or the show we should go to the details page so that part is still pending and we will also see that right now what we have created is a synchronous action creator we haven't used any middleware so we will also you see that how we can introduce the middleware with the help of a redux toolkit all right guys so i'm using the same application code which we built in our previous video and what we are going to do now is if i show you that what we have built so far then we have the header completely done we have the footer done and we are able to fetch the movies from the server and then add it to the redux store and then retrieve it from the redux store and then display it on the screen so we also want that right now what we are using is we are making use of a synchronous action creators but what we will do is we are going to convert this synchronous action creator into an async action creator with the help of a middleware thunk so what we will do is first let's go to the slice so i will go to the slice and inside the slice what we need to do is we need to import the create a sync thunk so what i will do is i will go here and i will do a create a sync thunk all right and then what we will do is we are going to create a constant so let's create a constant and we will fetch all the movies with the help of this async thunk so right now what we do is in the home js we actually created a function which is the fetch movies which actually calls the api and gets the data so we don't want that we fetch the movies in our component and then we dispatch the synchronous action creator so what we are going to do is we need to remove this piece of information from here and put it in our slice and we are going to make an api call with the help of the async action creator so what i will do is i am going to write a constant with a fetch async movies and this is equals to the create async thunk which we have imported all right and this asyncthem takes two arguments the first one is the a simple string identifier for our sync action creator so what i will do is the usual naming convention is i give it with the help of this name and then whatever the function i want so i'm going to write it like this movies slash fetch xing movies and the second parameter is the payload creator callback function so i'm going to write a callback function so this is going to be an arrow function and we are going to use async await so let me add an async keyword here all right and there is a third parameter as well to this create a sync thunk which is an object and we don't want this for this project so what i'm going to do is i'm going to first let's go to the home all right and let's remove this piece of information from here and i will remove everything from here okay and then i'm going to add it here all right so we have the async we created a constant with a response and we have the async await so we need to import the movie api so let's go here and let's remove this i will cut it and i'm going to add it here all right so now we have the movie api and the movie api key we are able to make an api call and i'm just going to remove this error from here all right and we will also want the movie text so for the movie text what i will do i will go to the home component and i'm going to cut it from here and i will just add this uh here so i'm going to add it here all right i will just remove the space and what we want is we don't want to dispatch anything so we are going to get the response and then we are just going to do a return of response dot data so i'm just going to remove this all right so now this we have written an async action creator and what we will have to do next is we are going to take this and we will be using a extra reducer so in the previous video i explained that when we create the when we use the redux toolkit then inside the slice we have four stubs the first one is the name of the slice then the second is the initial state the third one was the reducer and the fourth one was the extra reducer so we are going to make use of an extra reducer here all right so let's go here and let's write the extra reducer okay and this will be an object and inside the object what i will do is bit kind of a weird syntax but yeah you will get along so what we are doing is we are using this fetch async movies all right so this fetch async movies will have some additional action creators and that action creators will actually define the life cycle of an async request so we are going to see all the async action creator which defines the life cycle so the first one will be the fetch async dot pending so i'm going to add the pending here all right and this is going to be equals to an arrow function so let me add an arrow function and for now i'm just simply going to do a console.log and i'm going to write a pending here all right and the next will be that it will be a fulfill so when the request is fulfilled we are going to have an another action creator and that will be the fetch async movies fulfilled so i'm going to write here fulfilled and when it is fulfilled it's going to give me a state and then i'm going to have the payload so i'm going to add a payload here all right and what we will do is we are going to write here a fetched success fully and then we are going to simply return the first we are going to take whatever the initial state is so i'm going to do a dot dot dot state all right and then we are going to assign the payload to the movies so this is the movie so let's copy this all right and the value will be the new payload we have all right so this is how we are going to write it and there will be a third action creator that is the rejected so in case that if you are making an async api call and in that case you get a failure of the api call then it will go to the rejected so in the rejected case we are not going to add anything and i'm simply going to write it as rejected so i'm going to remove this and i'm simply going to do a rejected all right and it's going not going to return anything all right so now we have created the async action creator which is using our middleware thunk and we have also added the extra reducers now let's give a try so what i will do is i will go in the home component we are not going to use the fetch movies so i'm simply going to remove this all right we already have the dispatch and what we are going to do is i will just remove this and we will dispatch the action so i will do a dispatch and the name of our action creator is fetch async so let me write the async movies all right and i will just do an import of it so i cannot import it i guess i haven't did an export so what we will do is we are just going to write and export here okay so now we have it and let's import it so i'm going to go here i'm going to write a fetch async movies and we don't want this ad movies anymore so let me remove this all right and the last thing we see that we have a warning for the dispatch as a dependency so let me add a dispatch here so i will add the dispatch and everything is now working fine and let's give a try so i will go here and i will do a refresh and i can see that we don't see the movies so let me go to the inspect element and in the console if we see okay so we don't see anything and that's because we have to do and function call here all right so now i save it and if we see that first we get the pending which is this one the action creator we have the async action creator and that one is the pending and once we get the data it becomes fetched successfully so this is the fetch successfully and we then assign the values to the state so let's go to our redux store all right and inside our redux store we will see that first we get the fetch async movies as pending and in that case we haven't assigned any state while it is pending and when it is fulfilled we actually assign a state which is the movies so if we go to the state then we will be able to see that we have the movies and when we have it here what we do is we go to the movie listing so let me minimize this back and we go to the movie listing so let's go to the movie listing and inside the movie listing we are able to fetch the movies so that's how we created an synchronous action creator to an async action creator using a middleware thunk in redux toolkit so the other thing is we want that we also want to have the shows so let's fetch the shows as well so what i will do i will go to the movie slice again and i'm just simply going to do a copy paste of this all right and this will become fetch a sink shows so i'm going to change this to shows all right and i will change this to shows so this will become shows and i will change this as well so the movie text will become series text all right i'm going to copy this i'm going to add it here and instead of type we are going to have a series so if you have forget then we can see that we have the omdb api and inside the omdp api we have the parameters so if you see that type so i'm right now going to fetch the cd so i'm going to put the type as series so let's go here and let's add the series all right this will become the series text which we have it and we are going to search for friends all right we are going to get the data and what we are going to do is we are going to add one more property to our state which is the shows and which will be an object all right so let's go now uh here and we are going to add the full field so we are not going to add all the pending fulfill and reject it for the shows as well we are just going to take the fulfill because right now we only need the fulfill and if we go here let's change this to shows all right and fetch successfully and this will become shows all right so we have added one more a sync action creator and now let's go to our home and let's make a use of it and here we are fetching the async movie so let's add the shows as well so i'm going to add one more dispatch and this will change to shows so let's add the shows all right so now we have okay so we haven't added uh we haven't imported the show so let me copy this and let me add this here all right so now we have the movies and the shows as well now if we go here and we see then we only see the movies so there's no section for the shows so let's add one more section so we are going to go to the movie listing and inside the movie listing what we will do is we are going to create an another movie list so i'm going to copy this all right and i'm going to add it here and instead of movie list i'm going to give a show list here this will change to shows all right and this will be still a movie container let it be and we are going to change this to render shows all right now let's create the render show variables so i'm going to add the render shows as well here so let me add render shows all right and what we can do is we can simply do a copy paste of this so it's more or like the same so i'm gonna copy this and i'm gonna add it here all right and we have to fetch the shows so i'm going to copy this and i'm going to add it here so get all shows so i will write get all shows and this will become shows so but we can see that we don't have get all shows function in our slice so let's go to the slice and i'm just going to do a copy and paste and this is going to change to get all shows so let me add shows here this will be state dot movies dot shows so we have the shows here i'm going to copy this and i'm going to add it here okay so now we also have get all shows so let's go to the listing and inside the listing i'm just going to import get all shows so that we can have these shows now i'm going to copy this shows and let's do this the render shows so i'm going to change this i'm going to add as shows so let me add as shows and these movies will become two shows so i'm going to copy this and i'm going to change this to shows all right so now if i go here and if i refresh the page then we see the movies and below movies we also have the shows so this is how we actually fetch the movies and shows both but if we see then we we can see that there is a bit of change in the css styling so let's go and add the css styling so what i will do is i'm going to open the movie listing okay and inside the movie listing what i will do is i'm going to add the dot show list so we want the same styling to the show list and the h2 we want the same styling to the h2 as well so now let's go and check so if i refresh my page then we see that we have the movies we have the shows and we have everything working fine so now let's go and see in the inspect element that what actually happened in our state so if i go to the redux and if i refresh my page then you will see that first we do the fetch or sync movies which is pending at the same time we have the fetch async shows which is pending and then they both get fulfilled so if i click on the state then we are going to see movies and we are going to see the shows okay so next what we are going to do is we are going to add an animation stuff here so that when we hover it as we saw in the demo when we hover it it actually uh scales a little bit so what we will do is we we are going to add animation on each individual movie card so let's go to our code all right and we have the movie card here and to this what we will do is we are going to add a transition so let me add a transition of all and the transition duration will be 3.5 s okay and then what we want is when we actually hover on the card so let me add the hover all right and when we want to hover the card we just want to scale the card a little bit so i'm going to do a transform and i'm going to do a scale and the scale will be 1.1 all right and for that scaling i need a transition so let me add a transition here and we will have the same transition what we have when we hover out our mouse all right so now let's go and check that we have the transition or not so if i go here then you will see that when i hover it we get a very smooth and a beautiful transition on our movie cards all right so we are done with our movie listing where we actually list the movies and the shows the next thing we need to do is we need to have a movie details page so that when i click on any of the movie i should be able to uh go to the movie details page and should be able to read all the details of the movies so we are going to add a link here so that when we click on any of the movie we actually navigate to the movie details page so let's go to our code and we need to go to the movie card so let's go to our movie card okay and we need to add a link here so i will going to import the link so let me import a link and this link will be coming from the react router dome all right and where i'm going to add the link is i'm going to add the link after the item so i'm going to add a link here and i'm going to add a 2 which will be equals to the so i'm going to add a backticks and the path it will go to is if we go on our app component so let me go to the app component and in the app you can see the path is the movie slash the id so let's copy this and let's go here and let's add the path all right so what we need is we need this imdb id should be coming from the uh when we click on any of the movies so what we will do is if i show you here and let's go to the inspect and inside the inspect in the redux you will see that for each of the movie so if i go to the street and let's expand this then you will see that each of the movie has an imdb id so we will pass this data the piece of information in the form of a prop so let's go to our visual studio code all right and in the movie uh listing we will see that we pass the data so in this data we pass the complete movie object so we will be having this data as a prop so if we go here and we have the prop we have the data so this piece will be changed to so let me add this dollar and this is going to change to data dot imdb id all right so we have it and i'm going to close this link i will cut this and i'm going to add it here okay so now let's go and check so if i minimize this if i come here and if i refresh my page and if i click on it then you will see that we go to the page with the movie and the id of the movie so now what we want is we need to take this id make an api call and fetch the details of this movie and then display it on the screen so what we need is we need to work on the movie detail component so let's go to our code all right i will just adjust my screens okay so i'm going to close some of the tabs which i don't want it so i'm going to close this as well i'm going to close the movie card i'm going to close the home as well and we are going to completely focus on the movie details all right so i'm going to open the movie details at one side i will open the sas file and other i'm going to do the js file so before going to the movie details let's create a sync action creator for the fetching of the movie details so let's go to our slice and inside these slice i'm simply going to do a copy paste so what i will do i'm going to go to the here and i'm going to copy this all right and then i'm going to add it here and this will become as fetch async movie or show detail so this is going to give me a movie or a show detail so i'm i don't need this so i'm going to remove this so we are going to pass an id based on that id we need to fetch the detail of that movie so we are going to make an api call with the get which will have the api key as api key and here we need to make the change so what i'm going to do is here what we need is we need the add a parameter a query param of an id so if we go to the omdb and if we see that we have an parameter i which is going to be a valid imdb id and then we are also going to uh get the plot and we can get the plot as full or the short so we are going to add that so i will go here i am going to add i and this i will be equals to dollar whatever the id i pass and then i'm going to need the plot so i will have the plot as full all right and this plot p should be capital all right then i'm going to do this i will get the response and i'm going to return the response dot data so the next thing is we need to write the extra reducer for it so i'm going to copy this and i'm going to add it here and this will be changed to movie or show detail all right when it is fulfilled i'm going to have the state and payload and it is fetched successfully and here i need to add one more uh property to my state so i'm going to go here and i'm going to add selected movie or show all right and i'm going to give this as an object okay so now we are going to set the value for this and i'm going to copy this and i'm going to add it here all right so now we have the fetch async movie or show detail as well we have made an async request to the server and we get the data and we add the data in the store so let's go to our movie details so the first thing we need is we need to get the id which we can pass to our action creator so to get the id from the url we make use of a use param so if i go here and if i see here then we see that this id and we need to get this id so we can get this id based on the use param hook so let's go back and i'm going to do an import use param i'll write from the react router and then i'm going to write a constant and this constant will give me the imdb id and this will be equals to the use params all right now i have the id and i need to do a dispatch of my action creator so let's go here and i'm going to do an import of the use dispatch all right so what i will do is i'm going to write here a constant dispatch is equals to the use dispatch all right and then we have to dispatch the action creator so we will need a use effect as well so i'm going to add a use effect so i will write a use effect okay and that will have an arrow function all right and it's going to have a dependency and here i can actually do a dispatch of my async action creator so let me add a dispatch and name of our async action creator is actually fetch a sync movie or the details all right and we need to pass the id inside it so let me do a copy of this and let me add the id all right so now we have it and if we see that we get a missing dependency warning so let's copy the dispatch and add the dispatch here and we also want to run the use effect whenever we change the id so whenever the id is changed we have to fetch the detail of a new id from the server and get the data to be displayed on the screen so i'm going to add the id as well all right so we have it now we need to get the details from the store so to get the details from the store usually we use the use select so let me add a constant i'm going to add the data and this will be equals to the use selector all right and we are going to add us get selected movie or show but right now we don't have anything exported with the name of the get selected movie or a show from our slice so let's go to our slice and i'm going to add another export constant so i'm going to copy this add it and then let's go to the details i'm going to copy this and i'm going to add this here so let me add it here and this instead of the shows what we need to add is we need to add the select movie or a show so i'm going to copy this and add it here okay so we have created it and then let's go to our movie details so we can see that we have an error and this says that this is not defined so i will just do a copy of it and i'm going to add it here so now we have it we get the data as well so if i do a console log of this data then we get the complete details of the movie or the show which we have clicked so let's go here and let's do a refresh all right if i go and inspect it then i should be able to see the object all right and this says that imdb is incorrect so let's go to the network and let's see so if i see here then i will see that i have missed the url is not correct i have a dollar here instead of dollar i should have an and operator so let's go to our code all right and let's go to the slice and inside the slice we made a mistake and that is here so i will go here and i'm going to add the end here all right i will save it and now if i refresh my page then i should be able to get a 200 as a response and i get all the details so now we have all the details of the movie so now we just need to display this details on our screen so let's go and write our component and the css for that all right so i will go to my movie detail all right and inside the movie detail i'm just going to write the jsx all right so let me remove this and add a multi-line jsx so i will add a div with a class name and name is the movie section okay then inside that i'm going to add a div with a class name and i'm going to add a section left all right and then inside that i'm going to have a there with a class name of a movie title so i'm going to add the title so you must be thinking that what i am writing this and what is the jsx about so if you have forgot our demo app so let me show you the demo app so i'm going to go here i'm going to add a locals 3000 and if i click on it then you will see that we have two sections this is the left section and this is the right section so we are making a gsx for this part all right let's go back we have the movie title and the for the movie title we have the data dot title all right you can see all this information from our store so if i go here if i do an inspect element and then if i go to the redux then you will be able to see all the title year rated so we are taking all these values and just displaying it on the screen so let's go back to visual studio code okay we have the movie title and next we are going to have a div with a class name of movie rating all right and then inside that i'm going to have a span and i will have imdb rating and then i'm going to have a i tag and then i have a class name so we have already added the font awesome link in our code so we are just going to use the classes to get the icons so i'm going to add the icon of a star all right and then i just need to add the value so for that i'm going to add the data dot imdb rating all right then i'm just going to do a bit of copy paste of this information so two and four times okay this will change to votes this will change to run time so i have misspelled the runtime and the last one will change to the year so i'm going to select this and i will change this to here all right and for this it is going to be fa thumbs up for this it's going to be a film and for this it's going to be a calendar so let me add a calendar so now let's change this rating to votes so i'm going to add the votes here all right and for this i'm going to change this to run time and for this one i'm going to change it to here okay so now we have this and the next is we need to display the movie plot after the movie rating section so i'm going to add a there with a class name and i'm going to give a movie plot all right and then for that i'm going to have the data dot plot all right and then after that i need to display the div with a class name of movie info okay and then inside that i'm going to have a div with a span and the span will have the director okay then i'm going to have an another span where i'm going to have the name of the director so i'm going to do a simple data dot director all right and then i'm going to just do a copy paste so i'm going to add one more section here one more here one more here all right so we are going to change this to stars and this will become the actors for this we will change to genres and this is going to become journal and this i will go to change to the languages and this will become language all right and i'm going to add one more section which is going to be the awards so let me add awards so i will change this to awards all right so now we have everything on the left section and on the right section we are going to have simply the poster the image of the movie so let me go to the left section so the left section ends here so i'm going to create a div with a class name of section right so i'm going to give the image source and then i'm going to have the alt tag all right i'm just going to close the tag and for the alt tag i'm going to add the title so let me add the data.title and for the image it will be data dot poster so i want to have this capital p all right so now let's go and let's see how it looks so if i go here and let's go here and let's i will refresh the page i'm going to click it here and i can see that i have all the information but i need to add the styling to this information so let's go and add the css all right so i have this here the css file and we have the jsx here so first and foremost we need to have to import the colors so let me add the import and this will be dot dot slash dot dot slash common and then we have the colors dot s all right and then first we will have the movie section and this movie section will have the display as flex we're going to have the justify content as space evenly all right then we are going to have a padding and this padding will be equals to the 40 zero pixel all right then we are going to have the color and the color will be font primary all right and then i'm going to have the font weight and that font weight will be equals to 400 all right so we have added the css for the movie section and now next we are going to have it to the movie rating and for the movie rating i'm going to give a padding left of 3 pixel i'm going to have a margin top of 20 pixel so i'm not going much into the css i have a lot of videos on the css if you are new to the css part you can check out those videos so then we are going to have the color and i'm going to have the color as font secondary and i will have the display as flex all right let's go and check how it looks so if i refresh it then we are not able to see anything and that is because we haven't added the movie details in this so let's import it so i'm going to write import and that will be the movie detail dot says all right and now let's see that what we have okay so now we can see that we have the css and it's getting changed a little bit so let's add more css styles all right and then inside the movie rating i have a span so let me add a css to the span and i'm going to give a margin right of 20 pixel and then after that i have a movie title so let me add a movie title and to the movie title i'm going to give a font size of 40 pixel and then i'm going to give a color and that will be the font primary all right so i have the movie title as well then we will have to the movie plot so after the movie title i have a movie plot so let's go here and i have the movie plot and to the movie plot so i have missed the l and i'm going to give a margin top of 20 pixel and i'm going to give a line height of 1.8 rem and after that i have a movie info and inside the movie info so inside the movie input we see that we have a div so i'm going to add a div and then i'm going to have a span of first child so let me add a css to the first child and what i'm going to give is i'm going to give a padding of 10 pixel 0 pixel and then i'm going to have a color and i'm going to give a font primary and i'm going to give a font weight so i'm going to have a font weight of 600 and i'm going to have a width of 100 pixel and i'm going to give a display inline block all right and then what i'm going to do is for the other span so i'm going to have a movie info inside that i'm going to have a div where i'm going to have a span and for that i'm going to give a of color and that color will be the font secondary all right so now let's go and see how it looks so if i go to my page and if i refresh it then we can see that we have all the information of the movie but we see that there is no plot or there's a lot of space here so that we need to check what happened so if i do an inspect all right and let's go here and in this section we have the movie rating we have the fit and for the plot we actually misspell the pixels so this is what the problem is so let's go to the code here and here let's make it as px all right and now let's see again so it should be fixed now so now we can see that we have all the information and it looks uh properly but we want to make a change on these icons so let's add the css for the icons so first i'm going to give a css to the star and for that i'm going to give a color of all right i'm just going to do a copy paste all right and then i'm going to give it as a thumbs up and i'm going to give a color of f a f a f a all right then i'm going to give a film and for that i'm going to give a color of rgb a and the value will be 191 2 1 3 2 1 4 and i don't want to give an alpha value so i'm just going to remove the alpha okay and then for the calendar i want to give a color of each puff so i will just remove this hash we don't want it alright so we have given it and then for the right hand section for where the poster is i'm just going to give a margin left so i'm going to have the section and this will be right and i'm going to give a margin left of 30 pixel all right so now let's go and let's see so if i refresh my page then you can see that we have it properly we have all the information and the posters so let's go back and let's click here so we can see we have the information and let's this time i'm going to click on the shows and we see that we have a problem here so if i go back and if i click on the other show then you will see that the details of the previous show are still visible so if i click here then you will see that it's changed later on so what we are going to do is we are going to write a cleanup function in our effect use effect so let's go to our code and inside the code if we go here and let me go to the details and inside the details if we see here then in this we can have a cleanup function so if you don't know about the use effect then i have a complete video on it i will add the link in the description below so what i'm going to do is i'm going to return here so let me add a return and inside the return i will have a function and here i'm going to do the cleanup so what happened i will do a dispatch a action which will be the remove selected movie or a show so let me add a remove selected movie or show all right but you will see that right now we don't have any remove selected movie or a show action creator so let's go to our slice and this is not then something a sync action creator so we will be using a reducer this time to write this so if i go to the reducer then i'm going to write a remove selected movie or show all right and this is going to have a state i will have an arrow function and i will add a state here okay and what we will do is we are just going to remove the selected movie a show so state dot selected movie or show and this will become an empty object again all right we actually don't want this ad movies as well because now this ad movie is a part of fetch a sync movies so i can remove this as well all right so now what we need to do is we need to export this action so let's go to the actions and here i don't want this we removed the add movies and i will just export the action now let's import this action here over here so let me first remove this and i'm going to add the action here and then i'm just going to add the function here all right now let's see and let's check so if i go here if i refresh my page and if i click on the movies then we can see that we get the movies so let's go to the redux store as well and inside the redux store if i click on the back then you will see that we have a action creator which is the remove selected movie or a show so if i click on the state it is actually going to remove the selected movie or the show all right so if i click on the other so let's click here and we will see that we see the friends directly so this way i mean we can actually fix that part and one more thing what we can do is when we click on any of the movie uh i first need to do a loading uh of the information if i don't do the loading then i will still see these values as the blank values so for that what we will do is let's go to our code all right and inside our code we have this jsx for the left-hand section and for the right-hand section so what we can do is let me add a fragment here so i'm going to add a fragment here and a fragment here all right so now i have a fragment and what we will do is we are going to add a condition here and that condition would be that if the so let me add a condition here so what i will do if objects dot keys of data so if we have this data then only we want to render the jsx otherwise we are going to have a different kind of a jsx so i'm going to have the key as data dot length and this length is equal to equal to equal to zero so if it's true then in that case what we want is we need to have a different kind of a jsx so let me add a there and i'm going to close the there all right and then i'm simply going to have dot dot dot loading all right and if it's false then in that case i want to have the jsx okay so i will just remove this from here and this will be a bracket so i'm going to add a bracket here and if the other case then i'm going to add a bracket here and that bracket will be closed in the last so i'm going to have it here so i'm going to close the bracket and i'm going to close this all right so now we have this and now let's go and test our application so if i go back and if i do a refresh i'm able to fetch all my data properly then if i click on the movie then i can go to the movie if i click on the back and i can go to some other show then we are having a loading and then we are able to display the information and this is how easy is to use the redux toolkit and i really like to use the redux toolkit and do the stuff in in a new way as compared to the old redux stuff so if we go to the redux store we have a lot of actions the async actions and as well as the synchronous actions and this is how our state looks like so that's all i have in this video i hope you liked the video a thumbs up is appreciated and i think that now you have a good grasp of using the redux toolkit with your react js projects so that's all i have in this video i hope now you understood the redux and the redux toolkit very well with this project and you can use the redux which makes it very easy to manage the state of your project all right guys so i'm using the same application code which we built in our previous video so if you have missed the previous videos then you can click on the card above and jump to it directly and i'm also running my application on the local environment so if i go here and if i show you then we are running the application on the localhost 3001 and if you see that we have the movie cards but we don't have the corrosion or the slider for the movie cards so the first thing we are going to build is we are going to build the movie slider so for the movie slider we need to find a library so this is the platform we are going to use to explore the react carousel libraries and i'm going to go to the search bar and i'm going to write react carousel and i will hit enter now we will see that there's a lot of libraries we have in the search results which are belongs to the react carousel and we're going to choose the first one the react slick so i'm going to click on the react slick and if we go to the react slick page then we see that we have a lot of information about this react click library so we can see how to install what is the github page what's the npm page and the official document of the react slick and if we scroll down then we will also see that how we can install this react slip into our project so i'm going to click on the copy snippet and let's go here and let's install it all right so i'm going to add it here so now the react click is installed and let's go to the package.json and we should be able to see the react slick and then let's go to the documentation so if i go here and if we see the react slick so this is the official documentation of the react slick and the first thing we are going to do is we are just going to copy the cdn links for the css so that we don't have to write the css for the sliders so i'm going to copy these links and i'm going to add it in my index.html so let's go to the index.html and here i'm going to add the links all right so now we have the css files and then what we will do is we will go to our movie listing component and inside the movie listing component you will see that this is the place where we actually render our movies or render our shows so for this what we will do is if we go back to the documentation and if we click on the example so in the example you will see that we have to import a slider so what i will do is i'm going to go here and i'm going to import the slider so i'm going to go here and i will import the slider and this slider will be coming from the react slick all right now we have the slider and next thing we need to do is we have to take this slider and we have to add it in our movie container so what i will do is inside the movie container i will create a slider component all right and i will just end the slider component here all right so now we have added the slider component and we have the render movies which is actually going to give us the movie card so this is the movie card so what we need to do is in the slider component we have to create a settings prop so if you see in the documentation then we have the setting constant so i'm just going to copy this setting constant and i'm simply going to add it here for now so i will go here and i'm going to add the settings constant and we can restructure the setting constant in our component so i will do a destructuring settings so let me add these settings all right so i have missed one dot so let me add the dot okay and now if we go here and if we see then we see that we have a the only one movie is able to see and we see the dots so we can do a bit of customization on this so let's go here and i'm going to do the dots as false first and the slides to show is i want to show six card so what i will do i'm going to change this to six and the other property is slides to scroll so i will change this property to three all right so now let's go and let's see then we can see that we have at least six lights but this doesn't looks nice so what we need to do is we have to go to our css file and inside the css file we have to remove this grid because we don't want the grid anymore and the css for our slider will be coming from the react slick cdn link so i'm going to comment this out and now let's see and we can see that we see all the six movie cards but there should be some space between the movie cards so let's add some css to the movie card so i'm going to go to the movie card and i'm going to go to the css part and here what i will do is i'm going to add the minimum height of my card so i want my min height of my card to be 450 pixel and i'm going to add the height as 100 percent also what i want that right now the there are no space between the movie cards so let's add the margin as well so i'm going to add the margin of 10 pixel all right so now we can see that we have a proper space between the movie cards but if i do a small screen then you will see the images are getting squeezed so we have to add some more settings that based on the screen size this particular movie card should be adjusted or the responsive so for that what we will do is if we go on the reacts link documentation and if we click on the responsive then we see that we have a settings and we have a responsive breakpoints so based on these breakpoints we can actually decide how many movie cards we want to show so what i will do is uh let's go to our code and i'm going to create a file here so let me create a new file and i'm going to name it as settings.js so let me add the settings.js okay and in the settings.js what i'm going to do is i'm just going to export the settings so i'm going to write constant settings is equals to a object and i'm going to remove the settings which we have added here before so let me remove this completely all right i will save it and let's go here and i'm going to add it here so let me remove this and let me remove this all right so we have the dot as fall infinite true and we have the speed slide to show s6 and slide to scroll as three so we will add the responsive settings so i'm going to copy this all right and i'm simply going to add it here all right so now we have added it and now we can change the breakpoints based on our needs so what i will do is my first breakpoint for 480 what i want my settings and i want to show only one movie card and on every scroll i want to slide one movie card all right for 600 i'm going to keep the settings as same for 1 0 to 4 i'm going to keep the settings at same but we don't want the dots so let me add dot as false all right and i'm going to also add some more settings for the higher screen size so what i'm going to do is i'm simply going to copy this and i'm going to add it here all right and for the higher breakpoints i'm going to give this breakpoint as 1300 so if the screen size is in 1300 i want to show four movie cards and let this be as three all right and the last one i want to do is for 1500 so if the screen size is 1500 for the extra large screen i'm going to show five movie cards and let me change this to scroll s4 all right now let's go and let's see how it looks so if i go here if i refresh it then there is no settings so we have already exported the settings now we just need to import the settings in our movie listing so i will come here and i'm going to do import set settings all right and now we can use this settings to add it here so i'm going to go here and i'm going to add the settings here all right and we're going to do a very similar thing for the shows as well so let me copy this and let me add it here and i'm going to remove this and i'm going to add it here all right now let's go and let's see so now we can see that we have only four uh movie cards so that means if we go to the settings then if we go and scroll that we are in this breakpoint where we are going to have only four movie cards so now if i click on the next arrow then we see a movie slider and if i click on the previous arrow then we see that we have the slide and the same goes for the shows so if i click on it then we see the shows so if i expand my screens then you will see that now we are in a much larger screen so we see at least six movie cards and if i click on it then we see a smooth scrolling now you can also make changes on the css i am using the default css for the react slick and you can also uh override the default css and you can add your own css styling the next thing we are going to do is we are going to add a search functionality so right now if i want to search for other movies i cannot search it because i have a very default values for the movies for the harry and for the shows i'm searching for the friends so let's add a search functionality and i want to build a search so i'm going to go to the header component so let's go to the header component and in the header js so what i will do is uh i will just going to remove this link from here and i'm going to add the link here and let me remove the link from here and let me add it here all right and then now i'm going to create a div here so i will have a div with a class name of search bar all right and inside that i'm going to create a form and inside that i'm going to have an input with a type of text value is equals to something and then we are going to have a placeholder so let me add a placeholder and this placeholder will have sir movies or shows all right and then i'm going to have an onchange function so let me add the on change function and i will close it then we will also need to have a button for the search so let me add a button and inside the button i'm going to have the i tag and i'm going to add the class name for the i tag as f a f a search so we already have the font awesome added to our project so that's why i'm using the font awesome search icon and then for this one button i'm going to have the type as submit all right so we will also need to have a on submit so i will go here and i'm going to click on submit and on submit uh i'm going to add a submit handler so let me add a submit handler and also we need to have a local search state so what i will do is i will go here and i'm going to create a constant i'm going to add here as term and then it will be a set term which will be equals to the use state and the initial value of the term is empty so now we can add this term as a value on our input tag and whenever we have an on change then we can actually set the term value so i'm going to have a function here and this will be equals to the set term and to the set term we are going to have the event dot target dot value all right so now we have it and what we need to do is we need to write the submit handler so let's go here and i'm going to add the handler i'm going to write a constant i will have the submit handler and this submit handler will be an arrow function all right so it will take an event and in order to prevent the refresh of a page whenever i click on the search i'm going to add the event dot prevent default so if you don't know what this event.prevent default is then i have a video on it you can click on the card above and jump to it directly all right so we have it and what we'll do is i'm simply going to do a console log of whatever the term i have all right now let's go and let's see how it looks so if i refresh it then we see that we have a use state which is not defined so let's go to our code and i'm going to define the use state so i'm going to add the use state here all right so we have the used state and our search doesn't look nice so we need to make changes in the css so we also see that the css of the movie app which is the logo is changed now so let's fix that so let's go to the app sas and here what i will do is i'm going to have the color font primary so let me add the font primary and if we see that now we have the proper css back now let's style this search bar so if i go to my header where is my header so yeah this is the header sas and in the header says let's go down and here i'm going to add the search bar all right and then for the search bar i'm going to give a width of 50 so i need a 50 off width i'm going to add a display as flex all right and i'm going to give a justify content as center and inside this search bar i have a form for the form also i'm going to give a display flex and i'm going to give the justify content as center so if you don't know about the flex and the flex properties then i have video on it you can click on the card above and jump to it directly and i'm going to give a width of 70 so let me add the 70 width all right then inside the form i'm also having a button so let me add a css to the button so i'm going to go here and i'm going to add the button and for the button i'm going to give a padding of zero pixel eight pixel all right and then i'm going to give a font size to my button as 20 pixel then i'm going to have a cursor pointer so let me add the cursor pointer and let's give me a height all right so now we have it and let's go and let's see how it looks so it looks a bit nice but we can change more on the input element so let's go and change a bit on the input element so i'm going to go here and i'm going to write the input and to the input what i'm going to give is i'm going to give a font size of 18 pixel and then i'm going to give a width of 100 percent then i'm going to give a padding and the padding will be 5 pixel 5 pixel 5 pixel 10 pixel on the left hand side all right and then let me give the height so i'm going to use the same height which i have for my button which is 38 pixel all right and the last one is let's give the outline as uh none all right and now let's go and let's see so we have the search bar and it looks pretty nice so we if we type anything right now uh there's no functionality so let's add the search functionality so if i go to my header.js so we have done a console log of the term so let's go and inspect it so if i go and inspect element if i click here and let me add if let me remove this term and let me add the page here then you will see that we see of the page here so let me zoom this little bit then we see the page here so we actually get the value whatever we are typing in the search bar now we have to take this search term and we have to dispatch an async action which we have already created so if we go in our features and if we go in our slides then inside the slides you will see that we have the fetch async movies and this async movies right now have a term which is a hardcoded heading and for the shows we have the friends so let's remove this term first so i'm going to remove this and i'm going to remove this and it's going to take a term so let me add a term here and i'm going to add the same term here all right and instead of this movie text let me add the term and same let me add the term here all right and i will save it and we have to go to the home component first because this is the home component where we first time make the api call to get the data so here we don't have the term so on the home component what we can do is we can actually create here the constant so let me add the constant here and for the constant i'm going to have the movie text which is the harry so on the first uh whenever we load the page we don't have a system so in that place we have to do a search for the movies and the show with a constant value so i'm going to have a constant show text and this will be equals to the friends all right and now i'm going to pass this movie text and i'm going to pass the show text all right and if i refresh it then we should be able to see the movies and the shows all right but if we do anything on this search we are still not able to see anything so let's go to the header.js all right and in the editor.js here we have to dispatch the action so let me add the dispatch here so for that we need to import the dispatch so let's import the use dispatch all right and then i will go here and i'm going to create a constant with a dispatch so let me add a dispatch will be equals to the use dispatch so all right so we have this and now we have to use this dispatch so let me add the dispatch here and we need to do the fetch uh async movies all right so it will get auto imported and we have to pass the term whatever the term we have so i'm going to add the term and this is for the movies but for the shows also we have to do a dispatch so let me add a dispatch and let's add the fetch sync shows so it will get auto imported and we need to pass our term all right so let's go and let's check so if i change this to a different view all right if i refresh my page then the first time the text for the search term is the harry and the friends which is a hard coded value but now let's do a search for the mission so if i click on it then we should be able to see that all the movies with the mission and if we see in the redux tab so if we go to the redux tab then we will see that we have a dispatch actions so if we go to the state then we will see that we have the state movies and shows all right so one more thing i have to do is that after doing the search i want to clear this fill so what that what i will do is i'm simply going to do a set term and i'm going to set this term value as empty all right so now let's go back and let's do a search for harry so when i do a search it should get cleared out automatically so if i do it search then we will see that we have the heady and the search is also clear now i have a bit of assignment for you what you have to do is whenever i do a search there's no loader involved here so you have to build a loader where you can show the loading icon and once the data is loaded you can actually display it so if i make this change to mission again then you will see that it happens but it takes some time so in that interval of time i want you to build a loader so a small tip would be that if you can go to the slice and you can also add one more state to the slice which is the loader and you can make this loader true or the false based on these extra reducers if it's pending then you keep the loader as true as you want to show the loading icon but if it's fulfilled you will make the loading icon as false so this is a small assignment which i want you to do and one more thing we will do is if we have a empty search bar and if we click on the search then it's actually going to create a problem which is the incorrect id incorrect imdb id so for that we can add a bit of small validation here so let's go to our header gs and inside this header js i will go here and what i will do is i'm going to add here if this term equal to equal to empty then in that case i just want to return a alert and i'm going to add here as please enter search term all right now if i go back and if we refresh our page and if now we click on the search then we see the alert so this is uh something we are preventing to make the dispatch of our async action creator and make an api call because we don't have the search term all right so we have added both our features the react corrosion and we have also added the search filter which is actually going to help us to search for the movies and the shows so that's all i have in this video i hope you like the video a thumbs up is appreciated you can also connect with me via facebook or instagram you can follow me on twitter for latest updates and before you go don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one and if you want to do a quick start of your project then you can use the handy platform for searching of the libraries and the project you can find all the links related to the candy in the description below thank you thank you for watching

Channel: Dipesh Malvia

Views: 116,391

Keywords: redux, react, react redux tutorial, redux tutorial, react redux, react redux axios crud, redux tutorial for beginners, react redux explained, react redux tutorial for beginners, Learn Redux, react js with redux, react with redux tutorial for beginners, react with redux example, redux toolkit crash course, redux get state from the redux store, redux toolkit tutorial, createslice redux toolkit, react redux toolkit project, redux movie app, redux toolkit

Id: 2kL28Qyw9-0

Length: 126min 42sec (7602 seconds)

Published: Thu Dec 23 2021