Learn React Redux with Project | Redux Axios REST API Tutorial | React Redux Tutorial For Beginners

hey guys welcome back to another video so in this video we are going to learn and master redux so we are going to build an application using react and redux hooks from scratch so if you are not familiar with the concept of redux then i have a video on it you can click on the card above and jump to it directly let me show you the demo that we are going to build in this video so this is the application that we are going to build we are using fake apis to get the list of products once we get the data from the server we add the data in the redux store using the redux lifecycle methods so when i click on any of the product then we actually fetch the details of the product from the server and we will see how we can update and access our redux store and how all this react and redux works together so if i click on the inspect then we will be able to see a redux tab in my browser dev tool and here you will be able to see the state so we have two states one is the all products which gives us all the products and the other one is the selected products and here you will be able to see the actions what actions we are performing and what actions are getting dispatched when we fetch the data from the server so this is going to be an exciting part 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 [Music] all right guys so i have already bootstrapped my react application so you can bootstrap the react application using npx create react app and name of your application and along with that i will also need two more packages which is the axios for calling the apis and the react router dome for routing the application so you can install the axios with npm uh install axios and the other one the react router dome you can install it via npm installed react router dome so what we are going to do is we are just going to remove all the boilerplate code so i'm running my application on the local development environment so this is what the application looks like the basic react application and let's remove the boilerplate code first so let's go here and i'm going to remove the logo we don't want the logo we don't want the manifest we don't want the robot.txt so i'm going to delete that all right and then we are going to delete the other files as well so i don't need the test we are not doing anything with the test this file as well logo and we are going to delete the index and app test.js all right delete and let's see how the application looks like and now we are getting the error so let's resolve the errors so i'm going to go to the index file and from the index file i will just remove this stuff we don't want this as well we don't have the css file all right and in our app.js we don't have the logo anymore so i will remove that and i'm going to remove all this stuff so we are going to simply have the let's have the hello first so i'm going to add the hello all right and now let's see and if i refresh my page then i can see the hello so we are not going to focus more on the css stuff so this video is completely on the react and redux and how they works together so for the css part i'm going to add the semantic ui so let's go and add the semantic ui cdn link all right so i'm going to copy the semantic css cdn here and then i'm going to add this in my index.html so let's go to the index.html and i'm going to add it here all right and i will just remove this manifest file because we don't have the manifest file all right so now we have added the semantic ui we can see that the font is being now changed so what we are going to do is to add the redux in our project we first need to install some dependencies for the redux so to install the redux dependencies what we will need we will need to install the redux and react redux which is going to give us some hooks that we can connect from the react with the redux so let's install them so we can install them using the npx install redux and the react redux so i will hit the enter and meanwhile what i'm going to do i'm going to give you a small overview on the redux lifecycle methods so this is the redux lifecycle methods where you have an action creator which is our components and from our components we actually dispatch the actions which goes to the reducer and the reducer has the power to update the state so this is what we have to implement in our project so let's start with the folder structure first that we will need to create the redux store so let's go back to our visual studio code all right so our redux dependencies has been installed so if i go to the package.json file then inside the package.json we should be able to see the react redux and the redux dependencies so let's go and first create the folder structure so in the source first i'm going to create a folder with the name of containers and this folder is going to contain all our components and then i'm going to create one more folder which will be the redux which is going to contain all our files related to the redux and inside this redux folder first we are going to create the actions so let's create and folders called the actions so this will contain all the actions then we are going to create an another folder which will contain all the constants so let me add the constants and then we are going to create one more folder which will be for the reducers so let me add the reducers and one file which will be for the store so i'm going to create a file which will be our store dot js all right so this is how you're going to create the structure so there are multiple ways of creating the redux structure in your project like the duck method or you can create this way also so this is what i prefer to create so there's no hard and fast rule that which method you need to follow so i'm going to click on this action and i'm going to create a action file so my action file will be the product actions dot js so this are going to contain our actions and then let's go and create the constant which will contain all the action types so here i'm going to create a new file and this new file will be the action hyphen types so this is going to contain all the action types so let's create the action types first so i'm going to create here the action type so i will export constant and i'm going to write the action types this will be an object so i'm going to create three action types here so the first one will be the set products and always a better naming convention for adding the action types is that you always use it the upper case so this will be equals to the set products all right the other one will be the selected product so whenever we click on any of the product to fetch the details we need the selected product so this will become selected product and this will be equals to the selected underscore product and the last one is the remove selected product so i will tell you why we are having the last one the remove selected product later so let's create it first so this will become a remove i'm going to copy this and i'm going to add it here all right so now we have the action types so now let's go and create the actions so i will go to my action files and inside the action file i have already created the product action file so inside the product action file i need to create three actions one will be for the set products other one will be for the selected products and remove selected products so i'm going to export a constant and this constant will be equals to the set products and this is going to take the products here so i'm going to add products as the argument i misspelled the products all right this will be an arrow function and the action always return a object a plain javascript object which has a key as type and the payload so the key will be the type and this type will be the type of the action you want to perform so we have created the action types here so we need to perform the set products so i'm going to copy this and i'm going to add the set products so we need to import the actions so let's import the action i'm going to import the action types and this will be coming from the constants and inside the constants we have the action types all right so this will become the action type dot set products and this is also going to have an another property which is the payload the data and this will be equal to the products that we are getting all right and let's create the other action the other action will be the selected product so this will become selected product and for the selected product we are going to pass the product which is got selected and for this the action type will become selected product all right and then we have a payload and this payload will become the products all right the third one we are not going to create it now we are going to create it later when we actually see the need of the remove selected product all right and now let's go to the reducer part so i'm going to go to the reducer and inside the reducer i'm going to create a file so the first file will be the index dot js and i'm going to create one more file which will be the product reducer dot js all right and inside this product reducer.js we are going to create the reducer so a reducer always take the initial state and the action so let's create first a reducer i'm going to create a reducer for product reducer and this product reducer is going to be an arrow function and it always takes two parameters the first one will be the state so you're going to add the initial state and the next parameter is the action so i'm going to add the action here all right and we don't have the state at the moment so let's create an initial state so i'm going to write a constant and this will be an initial state and the initial state will be an object and i'm going to write a products here and this product will be an empty array all right and then what we are going to do we are going to add the switch cases here so this switch case will contain the action dot type so what i'm going to do i will just do a destructuring here so i'm going to destructure the type and the payload so i'm just going to write this all right and the first action is that if our action is a type of set products so we will write it for that so this if this becomes the action type dot set products then for now we are just going to return the state whatever the state we have which is the empty state so i'm going to just remove this all right and i'm going to return the state a here as well all right and let's create a initial object in the state so i'm going to add an object which will have the id of one and then i'm going to add the title and this title will be let's say the page and then i'm going to add the category and this category will be programmer all right so we have the initial state with the products and there was a fun product inside the products area all right so we have created the reducer now let's go to the index.js so when you create the application you're going to have multiple reducers so we are going to combine all those reducers in this index.js file so inside this index.js file what i will do i'm going to import the combine reducer so we have a combined reducers and this combined reducer will coming from the redux core so i already installed the redux we have and then we are going to import the reducer which we created which is the product reducer and that will be coming from product reducer all right and then i'm going to create a constant of all the reducers and this constant will be equal to the combined reducers so this combined reduces takes the object and here you can define any key so i'm going to define a key of all products and this all products is equal to my reducer which i have created all right i have saved it so now we have created the actions we created the action types we have also created the reducer and we have combined the reducer as well now it's time for to create the store so let's go to the store and inside the store we are going to import the create store so i'm going to import create store and this is going to come from the redux core all right and let's import the reducers as well so we have the reducer which is coming from the reducer and inside the reducer we have the index file and then i'm going to create a constant of the store and this is going to equals to the redux store all right and in this redux store it takes couple of arguments the first argument is the reducers so all the reduces that we have created so this is the reducer the combined reducer part so i'm going to add this first here and the second argument right now we are not using any middleware like the redux tongue or redux saga so we are going to enhance this application later when we will see that why we need the middlewares so right now there's no middleware and the second argument is the state so my state is an empty state all right and then i'm just going to export the default store all right so now we have created the store and let's go and see does it make any difference so in our react application it doesn't make any difference so if we want to see the redux store in our chrome dev tool then we need to have an extension so this is the redux dev tool extension where we will be able to see all our states and when we fire or dispatch the actions so if you go here then for that what we need to do inside our store we already have the reducers and we just need to add this part so we will be able to see the redux devtool extension in our inspect element so i'm going to add that here so i'm going to add the last part here all right and now let's go and see that if i go here and do an inspect element then if i go to the redux tab right now no store is found because this application react application is not linked with the redux at the moment so now we need to link our react application with our redux store that we just created so to link the react application with the redux let's go to the index.js and inside the index.js what we need to do first we need to import the provider which will actually provide the redux store to our react application so i'm going to import the provider and this provider is coming from the react redux which is a connection of a react and redux all right and here what we are going to do we are also going to import our store which we created so our store will be coming from redux and inside the redux we have the store all right so now this is our app and we need to provide our redux store to this app so what we will do we are going to add a provider here all right and inside the provider we are going to place this app component and this provider we are going to pass the store here so this has a prop called store and this is going to pass the store which we have created all right so now we have linked the react and redux let's see in the browser what happens so if i refresh my page then i am getting an error all right so we made a small mistake so let's go to our reducer part so i'm going to go to reducer here and this is not a default export so let's go here and here we made a mistake all right so we forgot to export this so i'm going to do an export default reducers now we should be able to see so if i refresh it we get an another error and inside the accent types we are going to replace this equal to with the colon and if okay so we missed one more thing which will let's go here and we need to assign the state to the initial state all right so now if i refresh it then we will be able to see the store here so now if i go to the state right now our products contain only one product which is the product which we have added so now if we want to access this product in our components how we can do it so let's go to the application and inside this application now we are going to create some components so let's close the store we don't want the store we also don't want the reducer now action types we don't want we don't want html file so i'm going to close all this all right and in the app.js so i have created a folder of the containers and inside the folder we are going to create the files so the first file we need to create is the header so let's create a file and this will be a header dot js all right second we need to create the product listing so that is going to have the list of our products then we are going to create the product component which will be an individual product so this is the product component.js and we are going to have the product details so i'm going to create one more component which will be a product detail.js all right so we have created the components let's quickly write the header.js so inside the header.js i'm going to import a react from react and i'm going to create a constant which will be a header and this will be an arrow function and then we are going to export default the header so this will be a header all right and inside this i'm going to write some jsx so this is going to return us some jsx with a div the class name will be ui fixed menu so these are the classes which we are using from the semantic ui all right and inside this i'm going to create an another div with a class name of ui container center all right and then we are going to have an h2 tag which will have our shop name which is the fake shop all right so we have created the header and now let's go to the app.js and inside the app.js we are going to import this header so i'm going to import the header from containers and inside the containers i have the headers all right and now i'm going to add the header here so this is going to be in header all right so now if we see then we should be able to see our header all right so the next thing we are going to do is we are going to have our product listing so if i go to the product listing i am going to import uh react from react all right and then i'm going to write a constant of a product listing and this will be an arrow function and we are going to export this product listing so i'm going to write expo default product listing and inside this i'm going to return a jsx so let me add the jsx and for now i'm just going to write a div and this div is going to have an h1 and i'm going to write as product listing all right and i'm just going to copy this and i'm going to add it for the product component as well so this will become product component so i'm going to do it d and then i'm going to just change this to component so this will become component all right and i'm going to copy this and i'm going to add it for the product details as well so this will become the product details all right so now we have all the components and now let's add them one by one in our app.js so we are going to make the routing so for the routing we need to we already installed the package so i'm going to add the browser router as router so if you don't know about the routing so i have a complete tutorial on the react router project you can click on the card above and jump to it directly so i will need the switch and and i will need the route and this all will be coming from the react router dome all right and we have the header so we are going to add our router here so this will be our router and inside our router i'm going to cut this and i'm going to add this here and then we are going to create the route so my first route will be the path and the path will be slash so when we are at the slash i'm going to add the exact i need to load my component and this component will be the product listing component all right so it's get auto imported then i'm going to have an another route which will be for the product details so this is going to be changed to product detail and the path for this will be the product slash colon and i'm going to add the product id here all right and i'm going to also going to add one more route for 4.4 so i'm going to remove all this stuff 404 not found all right so we have created the routes and if we want to test the routes we can actually test our route so if i am on the three zero zero one so this is going giving me an error so i made a mistake somewhere let me remove that all right and we are also going to add the switch here so let me add the switch as well all right and this switch so that we don't have the i made a mistake on the switch so it should be i t ch i'm gonna copy this i'm gonna add this here and i'm gonna add this here as well all right so now if i refresh it i should be able to see but i'm not able to see something because of this uh header but we actually have a h1 here so that so that means the routing is working fine so what we are going to do we are going to first do the product listing we are going to fetch the product that we have in our redux store so what we can do in order to get the access of our redux store we are going to make use of a use selector so this is going to give me the products and this will be equals to the use selector so i'm going to add the use selector it get auto imported and this you selected it actually takes a argument of the state so it's going to give us the state and then it's going to return us the state so inside the state we are going to have the so let me do a console log of the products so i'm going to do a console log of the products and let's give the classes here so that we can see something so i'm going to give a class name and the class name will be the ui grid container all right and i made a spelling mistake here so i'm gonna write this products i'll change it here as well all right now i have saved it and let's go and see what actually happens so if i refresh my page and we need to go to the okay so we have the product listing and if i do a console then we should be able to see the all products and this products are coming from our redux store so if we go to our redux then we will see that if we go to the state and we are going to so this is how you can actually access your state all right so now we can get the access to the products and now we can use this products to display it on our application so what we are going to do is we are going to change this to a component of the product component so i'm going to change this to go to the product component all right so we are going to display this product inside this product component and as we are using the redux state so we don't need to pass this product as a prop we can access this state in any of our components so if i go here and i'm going to add the here so i will be able to access directly the products here all right now we have the access of the product and now let's display this product so i'm going to give some classes and jsx here so this will become 4 column and this will be white so all these classes are coming from our semantic ui so i'm going to add a div with a class name and this will be equals to the ui link cards all right and then i'm going to create a div with a class name of card all right inside that i'm going to create a div with a class name of image and right now we don't have the image so i'm not going to add the image tag and then we are going to create a class name and this will be the content all right inside that i'm going to create a div with the class name of header i'm all right so now let's see in our state that how we can actually access the product details so if i go here and if i need to go to the redux so inside the redux we get this product information and we can we need to access the title so what we can do we are actually going to destructure it so i'm going to write a constant and inside this constant i'm going to have the id i can have the title as well and this will be coming from the product all right and let's import the use select so i'm going to write import and let's have the use selector all right and this you selector will be coming from the react redux all right and now we can actually add this title here so let me add the title all right so we have the state and inside the state if i click then we have the state dot all products so let me add the dot all products and inside the all products we have the products so this will become the product all right and this is going to give me a products array products all right and this is also products all right and this is the product of zero because it's an array and we only have one record at the moment so if i save it then we should be able to see something here so we have the page here so this is how we can actually access now let's convert this with the apis so i have a fake api store and this is going to give us the actual products from the apis so if we are going to go to the products and inside this product so if we click on the view detailed documents and we are going to fetch all the products so for that we are going to use this endpoint so let's create the axios and make this api call so i'm going to copy this and i'm going to go to the product listing inside the product listing i'm going to import the axios so let me import the axios from axios all right so now we have the axios and we will also need the use effect so i'm going to import the use effect hook all right and let me create a function which will be the fetching of all the products so i'm going to write fetch products and this fetch product will be an arrow function and this is going to be an async function so we are going to write a sink and then i'm going to write a constant which is going to give me a response a weight and then i'm going to write the axios axios dot get and this is going to give us all the products all right and then i'm going to write a catch to handle the error so this is going to give me an error this will be an arrow function and then i'm going to write a console.log i will just log the error if there is any so this is equals to the error all right and then what i'm going to do i'm just going to console log the uh response so let me do a console log of the response so let's see what we get in the response and now let's call this fetch function in our use effect so i'm going to write a use effect here so if you don't know about the use effect then i have a complete series on the react hooks where i cover each and every hook in detail so you can check out the link in the description so here i'm going to call the fetch products all right and now let's run and let's see we get the products or not so okay so our api is getting called and we get all the products so in the console log i can see that all the products are in the data part so we can change this to products response dot data all right so now we have received the data from the server now once we get the data from the server we need to add this data in our store so for that we need to dispatch an action and our action was the set products so let me show you our actions so in our redux we have an action of a set products which actually takes all the products so i'm going to go here and what i will do i will actually going to dispatch so to dispatch we have a redux hook which is the use dispatch so i'm going to write a dispatch and this will be equals to the use dispatch all right and this got auto imported so i'm going to take this dispatch and i'm going to dispatch an action so let me import our action support our actions so our action is the set products and this is coming from redux slash action slash product actions all right so we are going to pass this products in our action so when we pass this product in our action what is going to happen it will go to the action and it is going to return this object and this object will be taken by the reducer so if we go to our reducer so our reducer here and here our reducer will get the type and the payload so the type will be the set products and once we get the set products as a type we need to pass the new state so what i will do i'm just going to remove the record from here all right and then we are going to update this state with the payload that we have received the data from our server so for that what we will do we are going to return the state so first you always take the state which is the existing state and once we have the state we are going to add the products with the payload whatever the payload we have all right so now if we go to the product listing and inside this product listing if we do a console log of our product all right and these products should contain all the products which we got from our server so if i go here if i clear it and if i refresh it then we are getting an error cannot destructure the property id all right so we have to change this uh in the product component and let's change this for now let's comment this out and let's comment this out all right so if i refresh it then we are able to see all the products and if i go in the redux tab then you will see that when we get the data from our server we actually dispatch an action and this action is the set products and when we set the products we actually change the state and our new state is with the records which we have received from our server so this is how you can get the data from the server and then dispatch an action and update your store now what we are going to do we are going to display the complete data in our component so let's go to our component all right so i'm going to remove this and i'm going to uncomment this as well okay and what i will do is now this product is an array of products so we need to use a map in order to display all the products so let me create a variable so i'm going to create a constant and this will be a render list and this will be equals to the products which we have dot map and this is going to give us an individual product all right and then we are going to return the jsx from here all right and this jsx will be the complete this structure so i'm going to cut this and i'm going to add it here all right and then we are just going to finish this part so we have the header and after the header we need to have a class name this will be equals to the meta and this is the price i'm going to add the dollar and i'm going to add the price here all right and then we are going to have the last one which is the div class name and this will be equals to the meta and inside the meta i'm going to add the category all right so this title price and category we are getting it from the products array so if i show you here and if we go to the inspect element and inside the inspect element if we go here then we can see that the state and inside the state we have the products and we can see that we have the title price and category so we need to destructure them so let's go here and i'm going to add a constant and this constant will be having the id title image price and category and all this are coming from the product all right and let's add the image as well now so i'm going to add the image and the source of the image will be the image itself and for the alt i'm going to add the title and i'm going to close this stack all right and we are going to add the key as well so the key will be the id and what we are going to do we are going to add this render list here so i'm going to add the render list but we need to add a div or something so what i'm going to do i'm going to add a empty fragment like structure all right and now if i save it then we should be able to see something so let me refresh it and i'm seeing only the render list because i haven't added the braces here all right now let's see how our product page looks like so we have listed all the products and the css is also working fine so now what we need is when we click on the any of the product we need to take it to the product details page so what we are going to do is we are going to add a link tag here so i am going to import a link tag so this will be a link tag and it will be coming from the react router dome all right and i'm going to add a link here so here i'm going to add the link and this link will go to so i'm going to add the backtick and this will be the product slash and i'm going to pass the id so this will become the id all right and then i'm going to just close this link tag here all right so now i we have added it so if i refresh it i get the products and if i click on it i am able to go to the product one page so what we need to do we need to take this parameter product id and then we need to make an another api call to get the single product which is the product slash one so i'm going to copy this and now let's go to the product details page so this is our product details page and inside this product details page i'm going to import the axios to make the api call so this will be coming from the axios and i will also need the use effect so i'm going to add the use effect here all right and we need to get the param values and we need to get the param value so to get the parameter value what we can do we can make use of the use param hook so i'm going to import the use param and this will be coming from the react router dome all right and if i do a constant here and this constant is going to give me the product id and this will be coming from the use param all right and now let me do a console.log of this id so we should be able to see the parameter id and let's see that we are able to see it or not so if i go here and if i go to the inspect element and if i go to my console right let's go back and if i click here then i'm able to get the id so now using this id i can make an api call so i'm going to write a function here so that function will be the fetch product detail this will be an arrow function and inside this i'm going to do a constant there will be a response is equal to the weight axios dot get and this will be our so let's take the url to fetch it so i'm going to copy this and i'm going to add this here and this we are going to get it as the product id so let's change this to a backticks so i'm going to change this to a backtick and then i'm going to do a catch this is going to give me an error [Music] all right and i'm just going to do a console log of the error so this will become the error and this will become error all right and i'm going to change this to a sync so we need to add a sync here okay and once we get the data we need to dispatch the actions so i'm just going to write the dispatch all right and let's do the import so i'm gonna do a constant of dispatch and this is going to coming from the use dispatch so it's get auto imported all right so now we have the dispatch function reference we need to add the action here so let's go to our actions and inside the action we have the selected product so i'm going to copy the selected product i'm going to go here and i'm going to add the selected product all right and inside the selected product i'm going to pass the response dot data and let's import the selected products so i'm going to import selected product from redux actions product actions all right so now we have imported it and the next thing we need to do is we need to access the selected product so to access the selected product we are going to make use of the use selector so i'm going to write a constant product and this will be equals to the use selector and it's going to give us the state access and this is going to return us the state dot product all right and this state dot product so we should be having a reducer for that so let's go and check the reducer so right now we don't have the reducer so we need to create the reducer so for that what i will do i'm going to write an export constant select date product reducer and this is going to be an arrow function all right and it takes two things the first one is the state so i'm going to give an empty object for the state and it's going to take the action so i'm going to destructure the action with a type and payload all right and then i'm going to write a switch case and this will be equals to the type and the value of the type will be the action types dot selected product all right so when we have the selected product we are going to return whatever the state we have and then we are going to destructure the payload as well all right and let me remove this and if it's a default case then we need to give the state back so let me add the state here all right so now we have uh the reducer and let's go to our product detail and inside the product detail we have this product so we need to add this reducer to our combined reducer so let's go here and i'm going to add a selected product and i'm going to give a key as product here because this key is the one which we are using it here which is the state dot product so this product will be equals to the selected product reducer so i'm going to copy and i'm going to add this all right so we have linked it and we also created the reducer we also have the actions so now we are ready to dispatch and we are ready to get the product back so let's console this product and see the do we get the product back or not and we need to call this fetch product details so let's call this in a use effect so i'm going to write and use effect and this user effect will run if we have the product id and our product id is not equal to empty so in that case we need to run the fetch product details all right and we want that this use effect should run every time whenever the product id changes all right so we made some mistakes so let's go to our reducer back so inside our reducer we need to return here the state so this will become return state all right and now if i refresh it then we should be able to see the selected product so this is what the product is selected with a 2 as id and if we go to the redux then inside the redux we have a dispatch action of a selected product and we get our product so if i go to the state in the state we have all products and then we have the product which is the selected product so now we have the access to the selected product and now it's just that we need to display the data so i will go to the product details and inside the product details we are quickly going to write the jsx to display our product so i'm going to remove this and i'm going to add a class name here so this class name i'm going to give a ui grid container all right and inside that i'm going to give a div with a class name of ui place holder segment all right and then i'm going to give a div with the class name of actually i can do one thing i can just copy paste the jsx because uh anyway that is not the part which we are more focusing here so i'm just going to copy paste the complete jsx all right so i'm going to change this and i'm going to add the complete jsx and now we need this id price category and the description which we actually have in our product so we are just going to do a destructuring of it so i'm going to go here and i'm going to do a destructuring of it so i'm going to write a constant and what i will need i will need an image i will need the title i will need the price i will need the category and i will need the description and all this will be coming from the product so i'm going to copy this and i'm going to add this product here all right and apart that what i have done that we need to show this loading part whenever the product is empty object so we are checking with object dot keys and if the length is zero we need to display the loading and if it has the product then we need to display the product details all right and let's go and check now so now you can see that we have the so let me zoom out this screen little bit all right so now we have the product and if i go back then i should be able to see my the listing of the product and if i click on this then i should be able to see my but you will notice that there is a problem so if i click here i initially see the old product and then it gets updated to the new one and we can do a fix for that so what we can do is we can do a cleanup so whenever the component gets destroyed we are going to remove the selected product which is a valid we need to remove the selected product whenever the component is destroyed so what we will do let's create an action type first so we already have an action type of the remove selected product then let's create the action so inside the action i'm just going to copy this and i'm going to paste this we are not going to get anything for the removal of the product so i'm going to change this to remove selected product and this will become remove selected product and we are not going to have any payload for this all right so we have the action and now let's go to the reducer and add the condition for the reducer so inside the reducer we are going to copy this and we are going to add one more case and this case let me align this and this case will be that if we have the remove selected product then in that case we are just need to return the empty object all right and now we can actually go to the detail and dispatch our action which is the remove selected product so i'm going to do a remove selected product here and we need to dispatch this whenever we are destroying this component that means whenever we go back to our listing page so we can go to the use effect and inside the use effect i'm can actually do a cleanup so i'm going to write a return this will be an arrow function and i'm going to do a dispatch here so this is the dispatch and inside this dispatch i'm going to call the remove selected product action all right so now we have the remove selected product action and now let's see if i go back then i can refresh my page then i can see all my products if i click on the first product then it shows loading and i get to see my first product detail all right if i go back and if i click on the second product then you will see that it's still loading and then it gives the new product so if we want to see in the redux dev tools then we can see that we have a set product then we select a product then when we move away from this page we actually remove the selected product and then we again set a product we select a product and we remove it so now if i click on the back then we are going to call an action remove selected product so this is how you can actually work with the redux and this is how you can play around it and you can manage your complete application state so if i click on here then i should be able to see we have this i2 card but we don't have the features for add to cart but the purpose of this video was to make you understand and make you master on the redux how you can use redux for the application state management so that's all i have in this video i hope it was a long video but it was a very useful video and you must have learned a lot of things in this video so if you like this video a thumbs up is appreciated you can also connect with me via facebook or instagram you can follow me on twitter's 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 so what we are going to do we are going to enhance this application and we are going to use the middleware uh like redux middleware redux thunk or the redux saga and we will see that these all we have done are the synchronous actions we need to see that how we can do the asynchronous position thank you thanks for watching

Channel: Dipesh Malvia

Views: 114,933

Rating: 4.9438481 out of 5

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, Master Redux, Learn Redux, react js with redux, react with redux tutorial for beginners, react with redux example, redux crash course, useselector redux, usedispatch and useselector, redux store, state management react, redux store design, redux get state from the redux store

Id: 0W6i5LYKCSI

Length: 51min 44sec (3104 seconds)

Published: Wed Mar 31 2021