React Redux Tutorial - Redux Tutorial For Beginners | Redux 2023

hello everyone this is Manoj welcome back to my YouTube channel in today's video we'll discuss and talk about react Redux how we can Implement Redux functionality in react apps that's all we are going to do in this video before going to start the actual implementation let's go through with some documentation so what is and why we need Redux why it is needed to use Redux library in react tab so if you see this image so let's say this is our parent component and these are Childs these are grandchilds and these are for their Childs so let's say this parent is having a data which we need to access in this child component so how we can access the data in this child component for that we have to pass the data through this parent to this child then this child and then this grandchild so that's a kind of prop drilling issue so with Redux how we can overcome this issue basically we have to create a store and we can put our shareable or common data inside the store and then this store is accessible throughout all the application and to all the components whether it is a parent component or child component so let's say we are having our common data in the store and this child needs to access the same data then he can directly access this using Redux functionality all right so that's how we can use and we can achieve our index functionality so if you see so what is Redux so basically Redux is a predictable State container for JavaScript applications so basically what does it mean it means using Redux we can create a common place where we can put our common data or the data which which components needs to access all right so Redux is a state management tool Redux can be used with any JavaScript framework library and Redux stores the state of the application and the components can access the state from a state store so the store is our common place where we put our shareable data all right so now what are the principles of edex we have three most important principles first is single source of Truth means we have a single state tree okay in the store and using that we can access our data now State result only means we cannot mutate our state we can only get the updated State and changes are made with the pure functions means if you need to get data or into put your update your state so that could be only happened through reducers and reduces are nothing but pure functions and if you see this diagram so this views are the components so through our components we dispatch actions those actions go to reducer and then reducer goes to store and based on our action definition either we get the state or either we update the state all right now let's go to vs code and start the actual implementation so I have created a new react.js application if you see this is the default behavior of a new react.js app so first of all let's open a new terminal because we have to install two packages so npm install react Redux and for the toolkit we have to give Redux JS slash toolkit so meanwhile it is installing the packages let's go to the source folder and add some folders so first of all components and Also let's create a new folder called Redux and inside Redux let's add new folder called slices all right and in the component so both the packages has been installed so if you open our package.json so we have predux toolkit and we have reacted this so both are installed all right so now the first step is we have to go to our slices and we have to create a new slice so let's give it a name products slice or either product slice dot Js so here we have to create our slice for the products so if you go back to the browser so this is a website which provide us some dummy eCommerce products so let me hit this URL so we have this product key and inside that we have some dummy eCommerce product with ID title description price all right so we'll use this API to achieve the Redux functionality so go back to visual studio code so here first we have to import create slice from Redux toolkit and now we have to create our slice so const product slice create slice so here we have to pass some parameters so first is name so let me give it a name products and then we have to pass our state so the initial State and let's pass a blank array and then we have to create our reduces so reduces and in this reducer we have to create some actions so let's create a first action as ADD product and for this product we have to pass some parameters so it will take two parameters so first is action and second one is first is State and then second is action all right so here so based on action whatever we pass from our component we have to update our state so State DOT push and we will take our payload from action okay so action dot payload and finally we have to export our actions as well as the reducer so let's export first our action so export const add product and that will come from product slice dot actions and let's export this default product slice Dot producer okay so our product slice is ready so we have created a product slice inside we have given name initial State reducer and inside reducer we have created one action method called add product and finally we exported the action as well as the reducer so we are done with this and now we have to create our store so inside the redex folder let's create a new file called store dot JS so inside this will create our store using our Redux toolkit so for that we have to import a method called configure store that is coming from Redux toolkit and we have to import our reducer from this product slice so so import product reducer from slices product slice perfect so now we have to create a store so export const store and configure store and here we have to pass a reducer so reducer and here let's give a name called products and here we have to pass this product reducer so what does it mean we are mapping our product reducer inside the store so let's say you have multiple reducers so you can give the same thing so you have to pass another reducer and then the actual reducer from your slice so that's a kind of combining reducer all right so let's save it so our store is ready now next up is we have to go to our index.js so here we have to wrap our app component inside a provider and we have to pass the store as a parameter so first let's import provider from react Redux and let's import our store also so import store from create drugstore and now provider and this will take a parameter as store and we have to pass our store which is coming from our Redux store.js and we have to wrap our app inside this provider perfect so now this store is available to this app component and whatever component we will Import in this app that will be accessible to this store all right so all the components can access this store whatever is there in this app component done now inside the component folder let's create a new file products dot Js and I'm using a vs code Snippets rfce so that will create a simple functional component so here let's create a state first so cons data set data and use date and here use effect pass blank dependency means it will only call one time and here go back to browser and let's copy this fetch API let's align it and inside of this console.log result set data result and if you see the response so our this list or you can say the array is coming inside this key so let's copy and result dot products all right so our data is ready and here now let's open this index.html and go back to browser so I'm using the CDL link for the bootstrap if you want you can install the bootstrap library but just to save some time I am directly using this just to give some style to the component so go back to index it's hereproduct.js so let's create some devs and give it a class name container Also let's create a new Dev give it a class name row and now we have to place a card if I can go back to our Chrome so this is our card CSS or you can say the cart HTML so let's copy this and inside this first let's use if data and then data dot length greater than 0 then data dot map item and index return let's paste this and finally if there is nothing then display a message loading products I think okay first let's close this yeah so let's align it perfect so we have to change this class as class name because in react we should use class name instead of class all right so let's change these properties so for the source source will come from item dot let's see the property name that is thumbnail spaced and for the card title item Dot okay title and item Dot description and let's change this text as to card let's save okay and let's also pass as key otherwise it will give a duplicate key warning so let's save this and go to our app.js let's remove this header part and we should use this products save go back to browser so it says loading products okay okay go back to visual studio code in the product we have to change the style because in react we cannot pass style like this save perfect so you can see our products are coming in a card view perfect so go back to visual studio code again in the component folder let's create a new component called cart and in that we will try to display the total number of product and the price so cut details dot Js again I'm going to use the snippet rfce and inside this car detail let's use our Dev class name and let's use another div inside this and for this let's use alert alert success and for this class name let's use text Center and here we can pass total products as of now I'm giving 0 and total price again zero save and go to the product and here we have to use this after this container let's use card details save go back to browser so perfect so now let's try to achieve our Redux functionality so first what we have to do whenever I click on this add to cart so this particular product will go to our cart all right how we can do that so basically on this anchor link we have to create a on click event so whenever we click this hyperlink so we have to dispatch an action so how we can do that so first of all we have two import use dispatch from react Redux and we also have to import our action from this product slice so import add product from product slice okay now we have to go to our anchor tag so here we have to generate on click event so on click and let's create a arrow function and here we have to dispatch our action so let's patch const dispatch use dispatch so copy this patch and in the dispatch what we have to dispatch the action method if you see the intelligence it is asking for an action so what is our action that is ADD product okay and if you see again the intelligence this add product is expecting a payload all right so how we can pass the payload so here let's say ID and this ID is coming from item dot ID and let's pass title from item dot title and also description item dot description and let's also use price and price is coming from okay we have a price property also so item dot price okay let's save so what we have done so far we have created a on click event on that we have to pass a dispatch we have to dispatch an action so we are using dispatch and we are dispatching our add product and inside that we are passed the details whatever is available all right so let's save this and now we have to go to our cart so I go to the cart page so in the card details first of all if you see here just to update our state or just to send some data into our state or into the store we are using use dispatch just to get the data from a store we have to use youth selector hook all right so import use selector from Redux react Redux and here let's call cons products and you select state and let's try to get this state and also console.log products all right let's save go back to browser let's open developer tools so in the console so if you see we have a blank array so let's try to click this product so add product so again if you see we are having one item so that is coming from our state so we are successfully uh pushed our single item into the store and we are also able to access the same state so let's try to add this iPhone x let's also add the Samsung so let's open this so we have a list of three items all right we are successfully able to access the state also now go back to visual studio code and here instead of this static zero amount let's try to put the items from data so here products dot if you see we are having products okay so products Dot length capital P save oops remove the start save yeah so see we have three items in this product array and we can also see the actual item so if I click this so 4 5 all right so let me refresh it again perfect so close it so we have one item two item three item four item all right five and six perfect so this is working fine again go back to our Google studio code so for this price let's also use the state so here if the length is greater than zero greater than zero then reduce and here we have to pass the property because we are passing directly the item and comma 0 else display zero so done save go back to browser let's refresh it so on the initial load products are 0 price is also zero so let's try to add this add to cart and if you see the first that is 549 perfect let's also display this property so that will give more sense so here just below this let's add another dip and here Price save go back to browser perfect so add to cart 549 add two cards so 549 plus a double line one four four eight perfect so now you see we are successfully able to update our state using our dispatchers using our reducers and we are also able to get the data from our state so that's how you can easily integrate your Redux functionality into your react app all right so that's it about today's video and I have one announcement so if you are doing any kind of internship or you are working on your final year project and you are facing any kind of problem or difficulties in your daily assignments so you can contact me on my Instagram or you can contact my WhatsApp number so these details are available on my channel description so all right I'll see you in the next one thanks for watching take care bye

Channel: Manoj Kumar

Views: 1,564

Keywords: react redux, redux tutorial, react, redux, react redux tutorial, reactjs redux tutorial, reactjs redux, redux for beginners, what is redux, redux in react js, react js redux, redux in one video, why redux, redux tutorial for beginners, redux in 2023, redux project, react redux project, manoj deshwal, connected programmer

Id: yqw66HGpYZA

Length: 25min 15sec (1515 seconds)

Published: Wed Aug 09 2023