Redux Tutorial - Beginner to Advanced

Redux helps manage application states, and it is  often used with React Nicoleta. Donnie is very   experienced with Redux. And he will take you  from beginner to advanced with Redux. Hello,   everyone. My name is Nikhil, and in this video  I will be teaching you the Redux, and I will   take you from very beginner level to the advanced  level. First, we will dive into the basics of the   Redux, and we will build a counter application.  And then we will move on to the bigger project,   we will create a shopping cart application. And  the whole cart data will be then fetched via the   Firebase. And then we will manage the shopping  cart logic with the Redux state management tool,   which is a central data store. And then we will  fetch all of the things from the HTTP request,   and then we will try the thunk pattern as well. So  let's start. So now please like the video if you   are new to the channel, and please subscribe as  well so that some more people can see this video,   and I will create more videos like this. Now  let's dive into the basics of the Redux. So right   now about the Redux. So there are some basic  requirement for the React Redux applications.   So you should have the basic knowledge of how  the React works. And now we will see about   some terminologies in the Redux. So first,  Redux, so Redux is a state management tool,   which helps us to manage the complex states. And  with the help of Redux, we can create a CD S,   which is exactly the central data store, which  help us to manage the whole data store in just   one stone. So the whole state can be managed in  just one data store. So about the reducers. So   about the reducer functions, they manages the  state, and returns the newly updated state. So   they are actually the function which manages the  states in the Redux. And there are some actions,   which is a part of the reducer function, which is  actually the parameter and the reducer function.   So they have the two properties of type. And then  it is a payload property. So the type property has   a unique identifier in it. And the payload  property has the data in it, and about the   dispatch. So the dispatch is created whenever we  want to send an event data. So whenever an event   occurs whenever we want to send a data to the  Redux, so we have to use the dispatch function   to send the actions to update the data. So these  are about the basic terminologies in the Redux. So   now, we will create the React Redux application  to build the sound application in the project.   So I have created a basic react application here  and you should also create it from the command MPX   create hyphen, react, hyphen, F, and then the  app name, I have given the app name as the React   Redux. So you can also give any name to this. And  then we need to go inside the directory. And then   we need to install two libraries of the Redux,  which is the NPM install. And the first library is   the Redux itself, and 10. There is also a library  with the React it will the React iPhone Redux. So   we have to install these two also. So we have to  wait till it completes the installation in that.   And now packages are now installed. So now we have  to go to inside the React Native application from   here also. And now we need to create a this  store inside the source folder, so the store   will contain all the state management tools.  So we have to create a new folder it will store   and then we have to create an index.js file  in this store index dot j s. And now we have   to handle all of the React seats in this  single index.js file. So now first, we have   to import the Redux. So it will be the import.  And then the function will be the Create store   from the Redux and then we need to create here  the store. So the cause store will be close to   the Create store. But now the Create store needs a  reducer. So, we have to create a reducer function   also as we have talked in the PPT, so it will  be the cost reducer function will be equals to   an arrow function. And this will contain a state  and action as the parameters. So the state is a   state which we will provide and the action  the action will have two properties in that   the first is the type and the payload, which we  have discussed in the PPT. So now when the reducer   function if I will not define nothing here,  and then if I will not define the Create store   as the reducer function in that, so now the store  is now created and then we can use the store.   So now for the state now if I will give an  initial value to the state as an object,   so it will contain a counter and the value  will be the zero. So now the state has a   counter property with the zero value inside that.  So now we have to handle the state here so so now   if I will now create a counter in the app.js file  and for the and for using the store, we need to go   to the index.gs which is the root file and then we  need to provide a store so we have to provide the   store to the whole application which contains in  the application. So the app component will be the   main application component and it will contain the  store. So all of The components will have access   to the React store, which is this index.js file.  So we have to provide that now in the index.js.   So we need to import here the import, it  will be the provider from the React Redux.   So the provider will provide a store and then we  can wrap a whole app component of the react with   the provider. So the provider will be now  from the react until the strict mode ends.   So they will be the provider. And now the provider  will contain a prop, which is this store and then   the store will need to provide a store which is in  the which we have to export this store. So then we   have to export a store also export default store  from here. And now we need to import the store in   the index.js. So it will be the store. So it will  be imported from the store application from this   index js. And now we have given this store so  now the app component have access to the store.   And now we need to handle the state and then we  need to show the state. So in the app.js If I   will now go here, if I have to remove from the  header till the header. And then I will remove   the class name app also from here. And now we  have to add daily h1 tag, which is a counter   app. And then we cannot provide here the counter   inside does. And then to get the counter here from  the index dot data store. Now we need to get here   in the app.js with the use selector hook and the  use selector who is available in the React Redux.   So we need to import the use selector if I have  to remove the logo, so import the use selector   from the React and Redux and then the use selector  will give us and help which we can accept the   counter from this index no data store. So it will  be used selector from the const selector, or like   the counter will be equals to the use selector.  And then the use selector will be the key   to get the counter and now the counter will be  done from the selector. So we need to provide   the callback function and the callback  function will have the state inside it,   and then we have the counter property in this  state. So, we have to access the State DOT   counter. So, it will be the counter now. So, the  counter is now actually the counter. So, if I will   provide you another like as to and inside that, if  I will provide a counter here, so to the counter.   So, now, if I will now save and if I will just  start the application now npm start. So, now, we   will see the counter on the screen. So, we have to  wait till it compiles and it loads to the browser.   So now in the browser now, so we have the blank  application. So, if I will now check the error   in the console that what exactly is the error, so,  the error is because Cannot read property of the   undefined reading counter. So, now this error is  coming, because now in the index.js Now we have   our store and in the Abdo JS we are now accessing  the counter, but in the reducer function,   we haven't written anything from the reducer  function. So, if I will now just return here the   counter or like return here the main state, which  we have the state inside that. So, if I will now   save and if I will now go again. So, now you will  see the counter app and the counter is now showing   on the screen. So, now if I will give a value of  the 10 to the counter so that 10 will be here.   So then you will see we have the state  of the 10 here now we will create a some   reducer functions inside that. So now I will  move on to the Abdo J S and inside the counter   I will create two buttons button the onclick  will be equals to the like increment and then   the button will be the increment same and then  there will be an another so it will be having   the one click it will be the agreement. So,  now, this will have the text of the agreement   and then we need to create the functions also with  a const increment will be equals to a function   and save that the pounds decrement  will be equals to an arrow function   inside that. So now, we have now the increment  ended decrements here. So if I will now say if so   now you will see two buttons will be  here of the increment and decrement.   So now, I want this application to be when I  will click the increment. So the counter will   increase and when I will click that decrement  the counter should decrease. So, for this help,   now, we need to dispatch an action. And now we are  seen in the PPD that how to do that. What exactly   is the dispatch? So dispatch is used whenever  we want to send the data to the Redux store.   So for the dispatch, we need to import something  from the React Redux into the use dispatch. So the   use dispatch function will help us to dispatch  Action, and then we have to provide a unique   action and then the Redux store will fetch  the action and then it will update the store.   So, for that in the Abdo js for the  increment, now, if I will use a dispatch   and for using the dispatch first we have  to give a variable the call dispatch   will be equals to the users. So, now, we are  now giving the reference of the use dispatch   to the dispatch. So, it will be here so,  it will be down dispatch and then in the   dispatch we have to provide an action. So, for  the action if I fire will provide an object   for the action. So, first it will contain a type  property. So, the type if I will provide as I NC   increment, and then if I will save and then we  need to go to the index.js store and now, we have   to check if we have the action of the type with  the ANC. So, we have to increment the counter.   So, now, there are some limitations  for the React reducer functions. So,   first they should be the synchronous function and  then and the second limitation is that we should   not mutate the original state. So, here we  have two major limitations that first it   should always be a synchronous function and it  should not contain an async code inside that and   we should not mutate this original state and we  are not allowed to do that in the retail store,   because it will crash the application. So, it  should always be a copy of the original state   and the main state should not be updated.  So, for that I have to create a the So,   if I will use the if condition. So, the if  the type equals to the if the action dot type   property in which we are now sending then if the  action type will be equals to the increment i NC.   So, then we need to create a here the new state  and then we need to return the state for the   return it will be like an object with the state  property and the state will equals to the counter   state will be close to the State DOT counter,  which we have here and it will be plus plus.   So, then we need to return the state object which  will be equals to the state counter plus plus. So,   now, if I will use the counter as zero start from  zero, and then if I will say if so, then you will   see if I will click on the increment. So, actually  there is an error I think so, we have to fix that.   So, the error is coming because we are now  sending the state and now, we are now using   the counter property, so, we have to send the  counter. So, instead of the state we need to   stand here the counter so, if I will now save  again and if I will locally on the increment,   I think the counter plus plus is not here. So,  if I will add here this as a counter plus one   and then you will see it will increment the state.  So, then you will see the counter will increment   now the state. So, these are about handling  the state in that. So here we are now sending a   dispatch action and action is the ANC. And here  we are fetching the same action here i NC if   the action type equals to the ANC. So we have to  return the counter state and the counselor table   will be the State DOT counter plus one. So, these  are handling the states in the Redux and now if I   will use a or the decrements rate and for the  decrement we need to send another dispatch. So   with the dispatch and then the action type will  be equals to Now the decrements will be the DC   so then we need to handle the DC in that. So, we  have to create one more if statement if action not   type property will be equal to the agreement. So  then we have to copy we have to return the copied   state counter will be equals to the State DOT  counter minus one. So if I will now save again.   So then you will see Bitcoin. So it will be  implemented and once I will create decrement   so it will be decremented the original state. So  these are about handling the counter app in the   React and Redux. And now if we have to send some  data to that, if I will now add one more thing   like in the app.js If I will add another button  inside that button and the button will be the   head and it will be the value and the add value  if it will be the 10 like it will be the on click   like it will be the Add by so we have  to create another function as the Add by   const and BI tools to the NRO function and this  will contain a dispatch action and the dispatch   action will be close to the type property and  the type property will be equals to the like the   ad and then if I will provide you the payload  also. So the action is an object with the   type and the payload property. So if I would  provide you the payload so it will be like the   10 and then you will see So, it will add by 10.  So, if I will now save and if I will move on to   the So, it will be in the payload payload will  be close to the 10. So, now we need to go to   the index.js store, so, it will be the F now,  the action dot type will be equals to the ad.   So, then we need to return to the puppet state  again. So, it will be close to the counter   will be equals to the State DOT counter  it will be plus and now we have the action   property and now we have the payload property  also in the action, so, it will be the action   dot payload. So, if I will now save this action  dot payload, so, if I will save this and if I   will now move on to the application now. So,  once if I will locally get the increment, so   increment is working agreement is working. So, if  I will click Add button, so, then you will see add   by 10 is also working. So now we are sending the  data from the main app.js to the Redux store. So,   this is about the basic application with the  React and Redux. So, now we have created the   application. And now there is one more way to do  the Redux part, and which is the Redux toolkit.   So if I will now move on to the Google Chrome.  Now, if I will search for greater toolkit,   lugar edocs toolkit. So then you will see,  which will help us to manage the complex state,   and with the batteries included like it will have  the functions in that which will help to mutate   the state. And then which will help us to manage  the automatically created the actions identifier.   So you don't need to send the actions like the  hard coded actions we are providing from the like   the decrement, the add the increment, and then the  Redux will handle all the reducer functions inside   that and we can create the reducer functions  here. And then we can directly call the reducer   functions from the main applications. Now, if  we have to use the Redux toolkit, then we need   to click on the get started here. And then if you  will click on the documentation, so then you will   see first it will be the MPX create react app.  So it will directly install the Redux toolkit   in there. And if we are using an existing app,  then we can use the LPN installed AWS toolkit,   and then what is included here. So first, it will  be the Configure store, which will wrap the Create   store to provide the simplified configuration  options, and the Create reducers action slices   and about the slices. It accepts an object of the  reducer functions. And then we can call directly   these objects from the main applications like from  the app.js, or anything, it contains a slice name,   and an initial state value. And it automatically  generates a slice reducer, which corresponding   action creators. So these are known as the  action creators, so they automatically add an   action identifiers and then pass to the reducer  functions. So this will help us to do the all of   the things very easily and then it has a big  advantage that here we can mutate the state.   So we should not mutate the state anyways, but  it will help us because the Redux toolkit uses   a new package, which is images, which will help  us to mutate the state, and then it automatically   identifies that which state has been changed.  And then it will send an automatically created   copy of the state to the main applications. So  it will help us to mutate this. So now we need   to use this application with that. So first,  if I will move on to the main application here,   if I will close the server. And then we need to  install this Redux toolkit. So it will be the NPM   install Redux toolkit. So we have to click this  and then we have to paste this here. So now you   will see it will be installed in a moment. And now  the Redux toolkit is now installed. And now we can   just remove all of the things from the index js  now, from this and now we have to build from the   scratch. So it will be the first the import, we  have to import the Configure store. Cure store   from it will be from the Redux  target. So at the red Redux toolkit,   Redux, he has rolled it and then we need  to now configure the store and then we   have to import a create slice from there,  he and design to the slice, so it will be   imported and now we have to create a slice.  So, first, it will be the const counter slice   which will be equals to the Create slice function,  and then it will contain an options with that. So,   first it will contain the name of the slice.  So, the name of the slicer will be the counter   and then it will contain the initial state and  initial state will be equals to like the counter   will be equals to zero and then it will contain  the reducers and the reducers will be an object   which will contain the functions. So first  function which we have is the increment.   So it will be the function  there and then it will decrement   so it will also be the function and then it will  be the ad by so it will also be the function   and they are exactly the reducer functions so they  will contain the state and the actions inside that   state and the action and also state and the  action and here also the state and action. So,   first it will be in the increments. So,  then we can return here this like or we   can directly return here the mutated state. So, we  can directly mutate the state here into the State   DOT counter, it will be the plus one. So, we have  to do this and Tao same for the decrements state   DOT counter will be equals to the minus  one or like directly doing this and then   we can create here the Add by so, it will  be the State DOT counter will be plus 10.   So, it will be equal to the plus 10. So, if  I will now save, and then we need to create a   configure store with that. So, it will the const  store will be equals to the Configure store,   which we will do this and then it will contains  So, first we have to provide a an object and it   will contain a property of the reducer and then we  can provide a directly the counter reducer like it   will with a counter slice dot reducer. So, if I  will now save we have to just export the counter   slice actions. So it will be export it will be the  const actions will be equal to the counter slice   not actions. So, now the actions which we are  writing here will be now exported and then it will   be imported in the main app.js file. So, if I will  now save and if I will move on to the index.js   the main app dot j sorry. So it will be the like  import first we need to import to the actions.   So, with the actions from the store  from it will be like the from the   store and the actions index. So, now the  actions will be imported and now we have to just   accept the instead of this decrement that type.   So, now the hard coded values will not be here.  So, we can now just directly call the actions   dot increment. So, the increment will be  called whenever we click on the increment   and same for the decrement. So, here it will  be the actions not decrement. So, here that   agreement will be called and here the same thing  it will provide we can call your the ad by actions   noted by and then we can provide any value as  we can provide your the payload to this property   and the action will automatically be created from  that. So it will be the 10 and then if I will not   save and if I will just restart the application  npm start so the application will be now started.   So, now there is one error  that module bill failed,   because of because we are not providing any equals  to side the object we have to give away are the   following. So it will be an initial state  and the counter will be close to zero. So,   if I will now save and I should see if there  are more errors. So, there are more errors as   the export default important as store was not  found in that. So, first we need to get here   like the actions will be there and the store.  So, we have now to export the default store also   export default and will the store. So, if I will  now save again. So I should see it should be the   compiled. So there is an another error. So we have  to get this like expected an assignment call of   the function. So an expression index.js store here  we don't have to just give a hard coded value. So   if I will provide the plus plus and here also plus  plus and here. So, here it will be the minus minus   and here if I will provide your State DOT counter  plus equals two it will be the plus action   action so it will be the payload. So if I will not  say with that, so then I think there is one more   unexpected assignment inserts or expressions.  So there should also be anything like that   plus equals two will be that. So if I will have  save again. So now you will see it is now compiled   because it doesn't need any hard coded value.  So if I will now save and if I will go to that.   So now you will see it will contain the same  application. So I will click on the increment. So   then you will see increment is done. increment is  creating. So if I will click on the Add by 10. So   then you will see the Add by 10 is also working.  And if I will not provide you the dynamic value   of the app like the 20. So then you will say it  will increase by the 20. So if I will refresh   it by 10. So it will be increases by the 20.  So this is the basic react application with the   Redux functionalities. And it contains all  the functionalities of the Redux, and all   the fundamental concepts of the Redux, which are  most important if you are building a real world   application. So now we have built a basic counter  application with using the Redux and the Redux GS   toolkit. And now we will move ahead with a larger  application. I have created a basic structure of   this application which you can download or clone  this repository using the gate and then you can   run the NPM install command to install the node  modules and this will be the application which   we are building so first, it will be having a  login screen and then if I will now click on   the login button The state will be updated into  the Redux. And then the shopping cart application   will be shown. And I'm handling the cart state  into the Redux stores. And then I'm sending the   data to the backend to the Firebase. And then we  will handle the HTTP states via the notification,   as well like sending the card data. So if I  will click on the Add to Cart, now you will   see now we have a notification of the request and  successfully. And once I click on this again, so   then you will say request sent successfully again.  And even if there is an error, so everything will   be shown into the notification as well. And for  these products, and I'm using a dummy product,   Sarah to be displayed on to the screen. And the  whole state of the application, including the   cart items, the total price and the login logout  screen is handled with the Redux dynamically,   and with fetched with the Firebase. So isn't it  interesting. So let's type into this project.   And now I have a sample static project for this  application. And we need to get this application   by going to the GitHub. So we have a Redux demo  here. And then we need to select the branch   to branch will be the starting app for the  starting project. So we have here the branch   and then we have to copy this URL from there. So  we have to copy this URL from the code. And then   we have to clone this project here. So we need  to create a new folder here as the shopping app.   So it will not be inside the my app.  So it will be in the shopping app.   And then we need to go inside the  shopping get from the command prompt.   So here, and then we can go inside it. And  then we can run the command as a git clone   and then the URL. So once it will be completed,  it will be cloned into the shopping app. So now   you will see it is now cloned. And now we need  to go inside this application, the Redux demo.   And then we need to go to the branch of this  starting app. So it will be the git checkout.   And it will be the branch name. So the  branch name will be the starting app.   And then you will see it will be switched  to the starting app branch here. And then   you will see we have here the source. And then  we have some components as the author. And then   we have a cart component, we have the cart item,  we have the header, we have the layout, we have   the product. And then we have here the Store  application also. And then we have the app.js.   So then we need to just clear the  console, clear the command prompt,   and then we need to run the NPM install  command to install all of the dependencies.   And now we can run the npm start command to  start the application. So the application will   be started in a moment. So the application is now  started. And now once we will go to the Chrome,   so then you will see there will be a login screen  on the Chrome. And once you will click on the   login and then nothing happens. And once you  will go to the app dot JSON, then you will see   we have here the layout, which is now commented  and once I will come in the art component. And   if I will just uncomment the layout. So then you  will see we have here the layout onto the screen.   So we have here the Redux shopping app, we have  we have some products on the screen. And then   we have the cart and then we have the total. So  these are the static values. But now we need to   create a dynamic. And now this will be handled in  the Redux store, which is a central data store.   So we need to fix all of these functionalities  then So first, we will work on the auth component.   So then when the user will be logged  in, and then we need to show user,   the cart and the shopping list. So now we  need to work on the auth component first.   So we can create the central data store by  going to the store and then by creating a   new file as the auth slice dot j s, so  it will be the new slides for the Redux.   So then I will just minimize this terminal, I  will just minimize the file step from there also.   So now we can build the functionality of the  odd slice. So after creating an ox slice,   now we can just create a slice for the odd. So  it will be the import and as a create slice.   And it will be imported from the Redux toolkit,   and then we need to just create the CLI.  So it will be the const as the auth slice   and it will be equals to the Create slice function  and then it will contain an object with all of the   functionalities. So, first first property will  be equal to the name. So the name of this line   will be the auth. So we can define as the auth  and the second field will be the initial state.   So initial state will be equal to now it will be a  state now we can have a state as the is logged in   to check the user if the user is logged in or  not. And then we can just define some reducers. So   now reducer will contain some functions  inside that the first function will be   the login. So it is now the login function  and then they will do the logout function.   So now we have the two functions in the reducers.  And now we have to build the functionality. So   login will contain the state. And then the Logout  will also contain the state as a parameter.   And now here we are allowed to meet the state  because we are using the Redux GS toolkit   and not the Redux or the React Redux. So you  should not always mutate the state but now   This library uses the EMR package to just  mutate and creates a new copy. So we can   hear and mutate the state. So it will be state.is  logged in will be equals to the true here.   So this is now mutating of the state. And now in  the logout, we can just mutate the state that the   state.is logged in equals to the false. So now  we have the two functions in the auth slice.   And now we need to just export this slice. So  first, we need to export as the const or actions.   For the actions will be exported as the  auth slice we have a and dot actions   to all of the actions of the oxidize will be now  exported shall be the export as the named export,   and then we need to just export default as the  off slide so that it can be imported in the store,   which will be the main store in the index.js,  but will the default, and then it will oxidize.   Now we need to import it in the index.js, which  will be the main store of the Redux. So first,   we will import the Configure store from  the Redux GS toolkit. And then we need   to just build here the store so it will the cost  store will be equals to here the Configure store   and the Configure store will have an object inside  it at the reducers. So the reducer will contain an   object this time. So it will be having first the  auth reducer. And the auth reducer will contain   the auth slice. And the auth slides will be  then imported from the auth slides that we   have exported as the default. So the odds lies dot  reduce or so this is now exported as the reducer   of the author. And then we can just add here for  the shopping cart also. But now, let's do it for   the auth only. So now we can just export it as the  default of the store as the export default. And it   will be the store. So now if I will now save. So  now you will see all of the functionalities of the   auth component of the auth state is now completed.  And now we need to go to the index.js, which is   the main file which is a root application.  So here we can just import the provider.   And it will be imported from the React Redux.   And then we can just wrap the app component with  the provider. So we can wrap the app component   with the provider by providing here this state  as the provider. First it will be the prop. So   probably will be close to the store. And now  we need to import the store from the store   of the Redux store. So it will be the provider  now. So now you can see the store is now imported.   And now we can just grab here the app component  and then we can just close this. So now you will   see all of these Redux state store will now be  covered into the app functionality into the app   component, which is the main component in which  all of the files will be rendered, all of the   components will be rendered. So now you can see  here we have an error. So the is logged in is not   defined in the autolyzed.js. So we have to go. And  then we have to go to the auth slides. So then you   will see that is logged in here. So we haven't  defined the is logged in because we haven't   defined yet the value. So the is logged in value  will be equals to as the false. So if I will now   save so now you will see there should not be an  error. So now it is compiled. And now we need to   go to the app dot js, which is the main component  and then we need to grab the state from the store.   So it will the cons, we need to grab the state  from the use selected hook as we did in the   introduction project. That will be the state name,  which is the is logged in. And it will be equals   to the use selector hook. And the use selector  hook will be then imported from the Redux,   that will contain the state as the callback  parameter. And then we need to grab the state,   the Redux state of the author, and the state name  will be the is logged in. So we need to grab the   is logged in state. So this is the state from  the Redux. And then this is a name of the state   as we have exported in the store here as the auth.  And then we need to grab the state name, which is   the is logged in. And then if I will now just  console dot log the value of the is logged in.   For now, we should see the change onto the  screen. So if I will now go to the Inspect   into the Chrome. And then we should see the value  here as the false because now we have the state   of the false and once I will change the state of  it, if I will now go to the auth slides once I   will change the state as a true so then you will  see the state will be shown as the true here. Now   we can create here the functionality that if the  user is logged in, then we need to show the user   the shopping list. So for that once we will go to  the app.js and then we will see in the layouts. So   then we can just wrap a or the auth component into  the expression and then we can check if the user   is not logged in. If the logged in is logged in is  false, then we have to render the auth component.   And if the user is logged in, then we need to  show the user the layout. So if it is logged in,   and then we can show the user as the layout for  the will be there as the component and if I will   now save because so now the logged in is true. So  then it should show us the layout onto the screen.   So now you will see it is showing us the layout  onto the screen which is a static layout. And then   if the user is not logged in, so if I will now go  to the auth slice, so if the user is the false,   so the login chain will be shown to the screen.  So then we can just give it the value as the   false ID as the default. So we can go now to the  auth component from there, that will be the auth.   And then we can change the content by dynamically  updating it. So once the form will be submitted,   so then we can just create the is logged in  as the true so we can just add the the on   Submit prop to the form, so the on Submit, and  then it will be handled at the handle submit.   And the handle submit we'll have a function  here called handle submit will be equals to the   function which will contain the E as a parameter,  and then it will be the E dot prevent default.   So the E dot prevent default will prevent the  browser from sending the data from the form   and it will just prevent the page from the  thrashing also. So event dot prevent default.   And here we can dispatch the actions.  So for the dispatching of the actions,   we need to create the use dispatch hook. So we  need to create a dispatch. So the dispatch will   be equals to the use dispatch and the use dispatch  will be then imported from the React Redux.   So it will contain a dispatch functionality  and then we need to dispatch some actions   to the dispatch. And then to dispatch some  actions we can import the autolyse actions   which we have exported into the auth slice. So  we can get this so it will be the auth actions.   So it will be then imported from the slice and  then on actions dot the login functionality. So   once the user will click on the button of the  login, so it will be logged in. And then the   layout screen will be shown to the user. So now  if I will now just save and if I will refresh   the page once again. So now you will see once  the user will click the Login. So now you will   see layout screen will be shown and it contains  a shopping list. So now we have created the auth   slice component. If I will now refresh the page.  So then you will see the shopping list will be   gone. And now the user is now false is logged in  is now false. And once I will click on the login   again. So then you will see the user is logged  in. So now we can see the functionality. But so   here we haven't sent any data to the form because  now this project is only structured to make use of   the central data store and it will only handle  the login state of the user because this state   will not be handled by the Redux. So the only the  login state will be handled, so we cannot send any   data to the form or we can send also but it will  not impact the states. So we have to just work on   the login functionality. So now you can see we are  now logged into the shopping app. And now we have   to work and then we need to just fix this static  data here. So once I will click on the add to cart   to the cart should be updated, we can also  increment or decrement the cart items from that.   So we have the static products here to the cart  functionality will be built then we can create a   store for the cart. So it will be the card slice.  So we can create a new slice as the card slice.   So it with the card slice.js. So then  we can just import here the Create slice   from the React Redux. So it will create a slice,  and then we can just create the slice for the cart   as the const card slice and it will be equals to  the Create style and then we can just add here   as the object. So first it will contain the name  as always. So the name will be containing as the   cart and then the second it will contain the  initial state. So here the initial state would   be different. So the initial state will contain  first the items of the cart with the items list   and then it will be an array and then  we can just have the total quantity   and then it will be having a default  value of zero and then we can have a show   cart and it will be equals to the by default as  the false. So, once I will click on the cart,   so then the cart should be shown. So we have to  handle that state also. And now we can just create   the other reducers functions. So this will be a  complex logic here. So, first the reducer function   will be containing the add to cart. So, once I  will click on the add to cart to any product,   so the cart should be updated. So it will be the  new function here at the add to cart and then it   will be the function and then there will be  also a function for the remove to the cart   remove from cart and then  it will also be the function   and then we can just create a a one more  function to just to create a as the Set Show cart   and then it will be the function again and then  it will contain the state. So we can implement   the Set Show card first. So it will contain a  state and then we can just add here as the State   DOT show cart will be close to the true now, and  then we can just work on the add to cart. So,   now the add to cart will contain the state  and the action as the parameters inside that.   So, for the action, we can get the data from the  user. So, once I will click on the Add to Cart,   so, this product will be now sent to this  reducer function and then it will update. So,   now the product will be sent to the add to  cart function and now we need to just create   a new item. So with the const as the new item,  and new item will be equals to the action   dot payload, which we will receive from the  Add to Cart functionality. So the new item   is there and then we need to check if the item  is already there. So we can just increase the   quantity of the item. So it will be there  to check if the item is already available.   So for this, we need to create  a const at the existing item.   And it will be equals to like this state DOT  items list that we have. So the State DOT item   list and then we can just call your the find  function to find if it has any product for the   given condition. So we have to get this item. So  first ID with the item as the parameter and then   we can just fetch here like if the item which we  have, if it's ID is now equals to the new item.id.   So then, we can just fetch that the existing  product will be there and now if the existing   product is there, so I will just say  if the existing product is now there,   so then we can just create a some functionalities  like that. So, if the existing item is available,   so we can just increase the quantity like the  existing item that we have taught quantity   will be incremented as the quantity plus plus and  then we can just increase the price although like   the existing item dot price will be incremented as  the plus equals to the new item dot price. So now   we are now incrementing the quantity and the price  will be which will be equals to the old price of   the existing item and the new price which we are  getting and it will be the same as always from   there. So it will be equals to that. And then in  the else case where the product is not available   inside that so we can just create the product.  So the SKU will be there and then we can just add   some functionality to it. So then we can just add  the product to the list. So it will be the State   DOT items list dot push so we can just push a  product and then it will be having an object   with the ID and the ID will be equals to the new  item that we have grabbed.id And then it will be   having the price which will be equals to the  new item dot price, which we will get from the   components and then it will contain a quantity  and it will be equals to the one because if the   quantity will be equals to 32 then we have to go  to the existing item state. And then we can just   go and can we can just grab as the total price  for the total price will be equals to the new item   dot price. And then we can just have here the name  of the product also. So the name will be equals to   the new item dot name. So these fields will be  now available into a single product. So it will   contain ID the price the quantity and the total  price will be close to the new item dot price. And   then we can just have here all of the things is  the same. So now we have created the add to cart   functionality. And now we need to check if the  add to cart is working or not. So we can just go   and then we can just stay or just export the cart  as the export const it will be the cart actions.   And it will be equals to the cart slice dot  actions. And then we can just export here the   cart slice export default as a card slice. And now  we need to use this card slice into the index.js   store. So it will be there will be the another  reducer as the card to the card we'll be having   a card slice.it will be having the reducer of  the card slice. So now we have the two functions   in the reducer which contains the authentic  cart and the auth contains the reducer of the   auth. So now the add to cart functionality is now  completed. And now we need to go to the product.js   which we have here which is containing a single  product inside that and it contains a name ID   image URL and the price. So then we can just grab  here the add to cart function from there. So we   have here the add to cart function. So we can  just add here the on click to it. So the on click   will be having a function as the add to cart. So  then we can create a function also inside that   on Add to cart will be close to the function  and then it will be a dispatch some actions.   So we need to get the dispatch also as  the concert dispatch. It will be equal   to the US dispatch So the USD is parallel with  an imported from the React Redux and then we can   just call here the dispatch. And then the  dispatch will be having the cart actions,   which will be imported from the cart slice and  dot add to cart. And then the add to cart will   be having a payload. So to send the payload, we  can send here the object to it, which will contain   the name of the product, and then it will contain  the ID of the product and then it will contain the   price of the product. So it will be hanging name,  ID and the price. So now, we are not adding as the   name key equals to the name, because now this is  a functionality in the ESX. So it will be gone.   So the name ID and price will be sent to the add  to cart function from the store and then into the   add to cart function. Now we have the ad name, and  the price and the quantity and the total price,   we are now ending the state only from the  Redux store and not from the component store.   So this will be handled from there. So once I  will click on the Add to Cart, so the cart items   should be populated. And now we can get the cart  items here also, but for the just time being so,   we can just add here the cons, as the cart  items will be equals to the use selector,   and then the use selected will be imported.  And then we can just grab the state   and then we can just grab here  the State DOT cart dot items list   the item list will be then there. So if I will  now just console dot log the item list here also,   so we can check if we have the cart items  here. So, once I will click on the Add to Cart,   so the add to cart items will be then shown to  the cart, we have to go to the Inspect 10 console,   so we can just so now we can see, we have here the  area of five items. So, once I will click on the   Add to Cart, then you will see now we have here  the add to cart function on that. So then you will   see we have the price, we have here the single  area on to that and it is rendering five times   because we have the five products on to that. So  we have to get this functionality, I will remove   this functionality from here, and then we can just  have the functionality in the main app component.   So, if I will now save and if I will now just go  to the Chrome ones again if I will now clear the   console. So once I click on the Add to Cart, so,  now you will see we have a single product in the   array, which will contain a MacBook and the price  will be close to like the 50 and the quantity will   be close to the two because now we have the two  quantity over here. So, if I will just refresh   and if I will just log in here. So then you  will see once I will click on the Add to Cart.   So then you will see we will have a D ID as  the one we have here the MacBook which is   containing the price as the 25 and the quantity  will be close to the one and the total price of   this MacBook Pro will be equal to the 25 and  once I will click on the Add to Cart again.   So then you will see no new product will be  added to the array, but only the quantity   will be increased and that quarter price and the  price will be increased. So now you will see the   price is now increased as the 50 and the quantity  will be equals to the two. So now we have here   the functionality of this. So, now we have to  see if we can do for the all of the items. So,   if I will click on the add to cart for the Lenovo  Yoga once again. So, now you will see we have the   array of the two items into the list. So it will  contain the array and then you can see the Lenovo   Yoga is also there into this and the price equals  to the 25 and the quantity is one. So if I will   now click on again on to this. So then you will  see the quantity is now incremented to two. So,   I have now discovered an error. So, if I will  click on the Add to Cart. So, now you will see we   have the area of the product and once I will click  again to the same product. So then you will see   now we can see here now we have the price equal  to the 75 but the total price is equal to the 25   now it is just opposite of it because the price  should be the 25 because this contains a price   for the $25. So, the price should be the 25 and  the total price should be containing the total   buys into quantity which is the 75 so, we need to  go to the cart size instead of this price, we need   to just increase the total price to the new item  price. So if I will now save So, now, you will see   once I will click on the login and once I will  click on the add to cart to the one product. So   then you will see the price equal to the 25 the  quantity is equal to the one and the total price   25 Once I will click again. So now you will see  the price will be just the 25 same and the total   price will be the 50 but now we have fixed this  error now we need to see the items onto the cart.   So now we need to fix this items because this is  the static items on to the cart.gs. So if I will   now go to the car.js Now you will see we have  the static items and the quantity will be close   to the five. So we need to see how many items we  have in the cart as we seen in the Error List.   So then we need to go to the cart slice against  and then we can just increase the total quantity   in the else part when we are pushing the items  to the array. So we need to increase the total   quantity of the cart. So it will be the State  DOT total quantity of to the items it will be   close to the plus plus. So if I will now save.  Before that we need to go to the cart.js and then   we can just grab the quantity So the quantity  will be goes to the US selector hooks so the US   selector will grab the state and then we need  to grab the State DOT cart dot total quantity.   So, the total quantity will be shown to  the quantity so if I will now save so now   we should see the quantity onto the screen.  So if I have no login, so then you will see   now we have the cart of the zero items.  So once I will click on the Add to Cart,   so now you will see we have the one items into the  cart when once I will click on to second book. So   now you will see we have two items on to the cart.  And once I will click on the add to cart for the   same product. So now you will see we have a in the  cart but now the cart items is only two because   now we have only two products into the cart.  Now we have built the cart item functionality   and now the functionality which is remaining  is now we need to show the cart items here.   So then you can also see we have the total  here also as the 100. But now, we will fix   that later. So then first we need to build the  cart functionality that how we can see the cart   now we are in the cart items.js. So it will show  us the single cart item which is ID equals to the   one the price equals to the 2500 and it is equal  to the MacBook. So it is just showing on to the   single card. So now we need to fix that. So we  can just grab here the state from to the Redux.   So it will be the const so to the cart items, and  it will be equals to the US selector hook from the   React Redux. And then we grab the state and  then look at the State DOT cart dot items list.   So, now we have the list of all of the items into  debt, and now we can just grab here as the state.   So then instead of the single li items, so we can  just comment it out, or we can just remove that.   So we can just grab the cart items, which we have  on the map and it will map every single object   into this array. So it will be the first item it  will be the item and then it will contain here the   cart item which is a single cart item. So we  have to just Asendia the props to the cart   item. So the ID will be close to the item which  we have not tidy and then it will be having the   the second property close to the  price. So it the price will be the ITA   dot price we have and then we have to send via  the total equals to the item dot total price.   And then we need to send here the name also the  name will be equals to the item dot name. So,   now all of the things which we want to do now,  we have done that, and then we can just wrap   this inside the LI component also. So when to  wrap inside either li so the Li will be there.   So, for the every list item, the cart item will  be then shown to that. So it will contain the ally   there, then we can just close this and then we can  just wrap it inside the Li. So now you will see we   are the ally and then we can provide the key to  this ally because we are now just rendering the   list in so that and each release should contain a  key prop. So the key prop can contain the item.id   inside that So, if I will now save so, then you  will see now we should see the items. But now,   we are not seeing any items onto the screen,  because we need to just render these cart   items into that. So we need to go to the Layout  and then we need to just grab the cart items,   which we have. So, the cart items will be there  after the products. So, if I will now save   and the cart items will be then imported here then  you will see now we have the two items into the   cart and once I will click on the delta T route  also. So then you will see it is also there into   the cart. So now we have the card. And now we  need the functionality that once I will click   on the card icon here. So then only it should show  me the card and once I will click on it again. So   then you will see the card should be removed.  So we need that functionality. And for that we   have also build that functionality in that in the  card slice.js That set showcard will be close to   the true. So, we need to go to the cart item and  we need to go to the cart and then you will see   we had the essay. So we should have the unclick  prop into s3 and then it will be the Show Card   to card function would be there and then  just we can show the card from this function.   So it will be a dispatch an action. So calls  dispatch will be equal to the use dispatch.   And then we can just add a function of the show  card as icons show card will be equal to the   function and then we can just endear an action so  to the dispatch, it will be the card actions dot   will be the set show cart. So the Set Show Card  will be there and then if I will now just save   so then you will see the show card will be shown  but now we need to also go to the Layout also and   then we need to grab the search Show Card.  So for that we need to go and then we need   to get here this actual card as the show card  and it will be equals to the use selector hook   and then it will grab the state and it  will get the State DOT card dot Show Card   So the shortcode will be there. And then  we need to only render this card items   when the show card will be close to the true.  So when the show card will be close to the true   and then only we need to render the cart item. So  if I will now save and define will Naja, refresh   the page once again to clear that cache and all.  And once I will click on the login, so, then you   will see the cart items equals to zero once I will  click on the Add to Cart. So, now you will see the   cart items has the two items on to that and once  I will click on it. So now you will see we have   the cart items here. And now once I will click on  it again. So then you will see the card will not   be shown here because now in the cart slides.js  We are just only giving the value as the true   and instead of this true we should give the value  as the State DOT show cart. And it will be the   opposite value of this state DOT show cart. So if  I will now save. So now you will see once I will   log in and add to cart here add to cart here also.  So now we have the two items. So once I will click   on the cart, so then you will see we have the cart  here on to the screen. And once I will click on   the cart again. So then you will see the cart will  be gone. So now we have built the functionality of   the cart. And now if I will click on the cart,  so then you will see now we have the two buttons   here also to just remove the item from the cart  to decrease the quantity and to increase the   quantity. So then we can also fix that. So then  you will see the quantity is now the we cannot   see the quantity into that. So we have to see the  quantity also. So we need to go to the cart item   cart items.js. And then we need to render and then  we need to see how many items we are having here.   So then you will see we have the name, the price,  the quantity, the total. And then we have here   all of the things like that, we need to go to the  cart items and then we need to sit as and one more   prop as the quantity which we have missed to the  quantity will be cost to the item, not quantity.   So if I would now save so then we should see the  quantity. And so now you will see the quantity is   one and one two, the item. So if I will now click  on this again. So then you will see the MacBook   has the quantity of three and the Lenovo Yoga is  one. So if I will click on the Add to Cart again.   So then you will see the quantity is two and the  total price is also equals to the 50 because 2525   equals 50. And now we need to work on the on  these two buttons here. So then we need to go   to the cart item. And then now you will see we  have the two buttons here on to the cart items.   So we can just grab here the unclick state  of the button, and then we can just increment   cart item. And then we can just create a  function for the increment also. And for   the decrement. Also, we need to create a  on click, which will be cost to decrement   card items. And then we need to just  create the other functions that the const   increment function will be close to there.  And then this week, we'll be having a const   as a decrement cart items will be close to  the function and then it will be having the   function again. So now you will see now  we have the two functions here. But now   we need to build the functionality also into the  cart slice for the remove items from the cart.   And for that we need to go to the cart slice and  then when to just work on the remove items from   the cart. And now to work on this functionality.  Now we have one thing that now we only need the ID   to just remove. So for that we need to get this  ID. So first, it will grab the state and then   it will grab the action. So then we can just grab  the ID from the payload. So it will be the const   ID of the product will be close to the action dot  payload, or we will send the ID in the payload and   then we can just check if we have the existing  item into this state. So, for that, we can just   take the call existing item will be equals to this  state DOT items list thought it will be the find   or we will find the item if we  have the item already available   on to the state and then we can just decrease the  quantity. So if we have the item has the item.id   is equal equals to the ID. So, it will check if  the ID is there and then it will just return here   the value. So, we can check if the existing item  dot quantity will be equal equals to the one. So,   if the quantity is now equals to only one so we  can just remove the items from the quantity and to   remove that we can just create a new state at this  state DOT item list will be equals to this state   DOT item list. So we need to remove from the  array and for that we will use the filter here   for the State DOT item list dot filter. So  we will just filter this area of the list.   So item will be there as the parameter or we  can just filter as the we only want the items   which have the ID item.id will not be  equals to this ID. So we want only this   items onto this item list. So it will filter  the array and it will be shown to the user.   So if I will now just save here from that so  then you will see now we have the quantity   cost to the one already If the quantity is now  greater than the one on to this find method,   if the quantity is greater in the existing items,  so we can just decrease the quantity like the   existing item dot quantity will be close to the  minus minus, so the quantity will be decreased.   And then we can just decrease the total price also  like the existing item, dot total price will be,   total price will be equals to the, like a  minus equals to the existing item dot price.   So, then now we can see the functionality here,  guys, so, if I will now save so now, we should see   the functionality on to that, and then we need  to go to the cart item.js, which we have here,   the single cart item, and then we can just grab  here some functions like first, we will grab the   dispatch on the const dispatch. Now, we'll  dispatch the action from the use dispatch.   And then just we can create the other  dispatch functionality onto the increment. So,   the dispatch, we will just increment  again as the auth actions like the cart   actions, it will be dot add to cart and the add  to cart will be there as the same as we did in the   product.js. So, it will have the name ID  and the price again it will be having a name   ID and the price which we are also getting into  that and then we can dispatch this action. So,   if I will now save and if I will not just  go to the Chrome if I will not log in so,   then you will see, I will click on the Add  to Cart. Now, we have one items into the cart   and now if I will not increment that  quantity. So, then you will see now   we have the five quantity and once I will  click click on the plus increment again. So,   then you will see now there is an error I think  onto the screen. So, we have to fix that error.   So, then you will see all the minus icon  we are now sending the increment. So,   for that we need to send the decrement and for  the increment, we need to send the increment. So,   it is just changed. So, if I will now just  save and if I will refresh the page again   to see if there would be any change. So,  then you will see once I will add to cart,   I have added three to four items here. So then  you will see we have the four items of the $25   Once I will click on the increment, so then  you will see the quantity is now incrementing   and the total price is also incrementing over  there. So if I will now click on the Lenovo   Yoga also if I will click on the increment. So  then you will see the quantities incrementing   and once the quantity and now we need to work on  the decrement also and the decrement we need to   grab the dispatch the card actions. So, the card  actions will be there and dot remove the card   and then we need to remove the card  from only the ID. So, if I will now save   and if I will now just click on the Remove. So  then you will see the quantity is now decrementing   and once it will reach the one and five will  not just decrement again so then you will see   it is now decremented from the cart also  it is not removed from the cart also   for now, we have seen all of the functionalities  are now working again. So, then now, you will see   once I will click on the Add to Cart Add to Cart  again. So then you will see the cart as the two   items one tab will click on the remove this I will  remove this. So then you will see now all of the   things are not removed from the cart. So, now we  have built the cart functionality also into that   and now we have one more error because now once  I will click on the Add to Cart, so then you will   see now we have the cart items as the four because  now we have removed that items and now you will   see the cart items are only incrementing but not  decrementing so if I will just decrement this.   So now you will see the cart items are not  decrementing so for that we need to go to   the cart slice and then in the cart slice  so if we have the existing item dot quantity   equal equals equals to one so if we have only  the single quantity then we can also just   decrement the total quantity from the cart. So  it will be the state door total quantity minus   minus family law login once again. I will now  click on the Add to Cart now we have the three   items on to the cart opens I will show the cart  so then you will see now we have the MacBook of   the three units once I will decrement so then  you will see now we have the one unit remaining.   And now you will see now we have the two items  once I will decrement it also now we have the one   item if I will not decrement this now we have the  one item only on to the cart. And now you will see   all of the things are now working now fine. And  now we only need to fix this total price also and   the Logout functionality. For the total we need  to go to the layout which we have that layout.js   And then we can just create a the total because  total is a static value. So we can just give   the value as zero. So we can grab all of the items  from the state from the Redux state and then we   can just increment the total from to their price.  So it will the cost items list will be equals to   the use selector and the utility will grab the  state and this state DOT cart dot items list.   So then it will be having the item list so we can  just create here the items list dot for each loop.   So the for each loop will contain a parameter as  the item And then it will contain the parameter   then inside that also. So, it will just increment  that. So, the item So, the total will be plus   equals to the item.it will be the total price. So,  the total price will be there of the items with   their quantity also, total will be plus equals to  the item dot total price. So, if I will now save   and if I will now just go to the screen once  again. So, now, we should see the total price. So,   now we can see the cart as zero items and once  I will click on the add to cart so, then you   will see now, we are the total of the $25 Once  I will increment it so, then you will see now,   we have the $100 and the four items here in once  I will click any other item like HP Pavilion So,   now you will see we have the $25 again So, now  you will see all of the things are now working   except the logout. So, for the logout, we can  create another button after the cart items after   for the Logout functionality. So, now, for the  Logout functionality we need to go to the header   component and then we can just create a new ally  after the card should be the ally and it will   contain the button and the button will contain as  the logout. So, then we can just style the button   as well. So, we can just style as the class  name will be equals to like the button logout   button. So, then you will see we need to style the  class name also and then we need to go to the CSS   and then we need to style the CSS so the layout  dot css and then we can give the Layout button and   then just we can provide a as the class name and  then we can just provide as a padding of the 10   pixels and then we can provide here another thing  like we can provide as far as the background.   So the background we are injured and then if  I will not provide a one thing as the border   will be close to the none. So now we have  here and then if I will not provide as the   logout button as the hover. So the  hover will contain the background.   So the background will contain as the RGB  06 and the five nine so five will now save   so then now we should see there will be a  button and then you will see we have here   the Logout functionality. So once I will click  on the logout. So we should be logged out. So   we need to go to the header.js and then we can  just provide the functionality of the own click.   So the own click exam and then we can just provide  as a logout function logout handler and then we   can just provide it as a function like now we can  just create the function as a const logout handler   and then we can just create the other dispatch  functionality also said with the const dispatch   will be close to the use dispatch once again  and then we can just dispatch here and action   of the logout of the auth slice. So it will be  the dispatch and then auth actions which we have   dot logout so it will be just a logged out. So  once we click on the logout, so it will be logged   out. So if I now save so now you will see we  have a logout button. So once I will click on the   logout. So now you will see in the screen is now  logged out. And once I will click on the login,   so now you will see we still have the card of the  two items on to the state. So we have covered the   functionality of all of the things. So now we have  built the logic. And now the only thing which is   remaining is sending the shopping card data to  the backend. But we know that the reducers must   be pure and side effect free and the synchronous  functions always. So if we have an HTTP call,   which is an asynchronous task to such type of  code must not go through the reducer functions,   we can't send an HTTP request inside the reducers.  We can't use any fetch and the Send Request from   one reducer function to fetch the request. And we  must never do something like this. So I strongly   suggest you that don't run the asynchronous code  here. So instead, we have the two options to put   the asynchronous code, the first option is inside  the components with using the use effect hook like   we can do inside the product.js whenever we are  sending the data to the cart, so we can add the   use effect to to send the data to the cart. And  the second option is to create an action creator,   which would allow us to run the asynchronous  code. So these are the two main options here. And   in this course, we will perform both the operation  to the so now we will go with the first approach.   And for the backend code, I will use a Firebase to  Firebase is a great tool which don't require any   back end code. So we can go to the Firebase. And  we can create our account here with the Firebase   so you can go with the second link. And then we  can go to the go to console. So it will just log   in, and it will just allow us to create a new  Firebase project. So we can create a new project   with a button at the Create a project and then we  can add a project name, like I will add a Redux   HTTP, and then I will just accept the terms  and conditions. And I will just click on the   Continue button. And then we can just click on  the Continue again to enable the Google Analytics   and then the server would be saved. Don't want  to change. So we can click on the Create Project,   it will create a project within one minute,  and then you can use the Firebase. For now   the Firebase setup is now completed. So now we  have to go to a product component. But now if   we directly add a product from the product item  component, so it would be wrong, because if we   only send the data to the backend, and it doesn't  have any logic, and reducer functions will be of   no use then. Because if we send any  single product two times into the backend,   then the backend doesn't know that this  product is already being part of the cart   for all the logic we have in the producer. So  if the product is already part of the cart,   so then we can update the quantity. So these  DoDIG won't run on the Firebase, or you have   to add another functions in the Firebase to do  that, too, could add a server side code to it,   and then the functions. So if you want to try  the another solution, so the another solution is,   we have to let the Redux manage the state on its  sound. And then after the Redux manages the state,   then we can update the server on the backend  with the updated state from the Redux.   So we can first do the work on the front end and  let the Redux update the store. And second, after   that, we will send the request to the server. So  we can do it in the main app.js file, because now   then, in that file, we can grab the state from the  Redux, by creating a new selector hook. So cost,   the whole card state will be close to the  card, and it will be closer to us selector,   and then it will be having a state inside it,  and then we have to grab the State DOT cart,   we can grab the cart state from here, and then  we can just send an HTTP request from there.   So we can add here the use effect after this  console dot log, so we have to remove this cart   items, because it is of no use, then, then we can  use a use effect. So the use effect will then be   imported from the React and then it will be having  a callback function inside it. And then it will   contain an array of dependencies. So then we will  add the dependency later. So then we can use our   inbuilt JavaScript function, which is the fetch  to send the request to the database. So then,   to add they are the URLs, so we have to click  on the continue after the project is completed.   And then we need to go inside the project, and  then we need to go, and then we need to click   the Build, and then the real time database, so we  will use a real time database from the Firebase   to use this, and then we can go, and then we  can grab the URL of the real time database,   we can click on the create database here. And  then it will ask you some options. So you can   just click on the next again, and then start  in lockdown mode. So you can just enable again,   and then you will see the URL will be here within  a moment. So now you can see we have a URL here   of the Redux, it is a REST API URL, which we will  be having here. So this is the URL here. And then   we can just go to the roles to add the data to  inside it. So we have to go to roles. And we have   to modify these rules. So read, we have to enable  it to the true and then to the right, we have to   get it to the true, we have to change the read and  write data here to from false to the true and then   we have to publish. And then the new rules will  be published within a moment. So you can just   click the dismiss here. And then we have to go  to the data. And then we have to grab these this   URL. But we have to grab this URL, just copy the  URL and then in the fetch, you have to paste this   URL. And then after this slash 25 is.com to now  we have to create a collection to the collection   name will be can be the cart items, dot JSON dot  JSON should be always there now because it helps   to add the collection there. And then we can  just fetch and then we can just specify here   some object, the method of this fetch URL will  be the put. So we have to send the put data,   so whenever the data will be modified into  this state. So we can just add the add the put   requests, so the so the Firebase could also  access that modified state from the Redux.   So we can just add there, after the method,  we have to add it to the body of the request.   So we have to specify the body and it will contain  a JSON object, like the JSON, it will be having a   string defy, so it will just Stringify all the  card data into it, and then the request will be   sent to the backend. And then we need to specify  the card into this array of dependencies so that   the if the card value will be changed in the  Redux, so the use effect will notified and then   we can just run the fetch function and then it  will update the data there. So if I will now save   and defy will now go to the Redux app at five will  now just refresh and then we will start from the   scratch. So now we are logged in. So if I will  add any product to the database like MacBook,   if I will click on the Add to Cart. Now you will  see the cart has won items and defi will add the   Lenovo Yoga also. Now the card has two items.  So if I will now go to the real time database   now you will see We have a collection of  the cart items. So if you will expand,   now you will see we have the total quantity of  two, and the Show Card which is equals to the   true. And then we have the items list inside  that. So then you will see we have a array to   the zero index of the array have the MacBook,  which is of the price and the quantity is one,   and the total price is 25. And then we have the  first array, which contains a Lenovo Yoga laptop,   the price is 25. And the total price is also 25.  So now you will see the patrykus is working. And   now the Firebase is now able to access the latest  state snapshot from the Redux that we have.   So whenever the data will be changed  inside the Redux slices Redux reducers.   So the use effect will be modified, and it will  send the request to the Redux by the HTTP. So   now I'm sending this request. But I am not doing  anything with the response, which I will get from   the server. So I'm not handling any type of  potential errors that could occur during this   fetch function. So we will create a notification  component, so that we should be notified about   the errors and the states of the Redux that  how and when the Redux state is updated.   So first, we have to convert this fetch  function into the asynchronous function.   So we have to declare the function here  inside the use effect at the Send Request.   And it will be equal to the function and it will  be the async function and the arrow function.   And then we have to just create a new variable  here as the cost response, which we will get   by doing the await. And then by updating the state  from the Redux to the Firebase. For now, we will   just await for the fetch function to run and then  we will get a new data variable. So whenever the   response will be successful, we will just convert  the response to the JSON format, whenever we will   get from the server. And this will also be the  await, so that it should take some time. And   then now, whenever we will use the data here. So  it means that now the response is successful. And   now, we should see the data in the backend. So now  we will call the Send Request function. So we have   to create a notification component. And then we  have to create the slice and the new state for the   notification to handle all of the state from the  UI. to Now we have to go and we have to create the   notification component for the notification dot j  s. And I will add a basic setup here for that. So   now we have to go to the material UI. So you have  to go and type the material UI into the browser,   and you have to install the material UI library  from the React. So you have to copy this command,   and you have to paste this command inside  the terminal. And you have to install this   material UI, we have to wait till it completes  the installation, and then we will continue.   And now the material UI is installed. And now  we have to import something from the material UI   which will be the alert. So we will show the alert  box from the material UI and it will be imported   from the UI material, instead of the notification  then we have to add here the alert the alert, and   then it will contain two props at the severity.  And it will be equals to the dynamics of it. So   we will get to the to props here is the type and  then the message we want to show and then it will   contain a message here also inside the alert into  the message. So now we have created the alert box.   So now we have to go to the app.js. And then we  have to add here the notification. So then it will   be imported. And then we can just provide you that  type prop. And that type will be equals to the   success is a static and then it will be converted  to the dynamic into the notification. And then   we can add here the message will be equals to  like it will be the like this is dummy message.   If I will now save. And if I will not just  get the notification also. So it will be   imported. So if I will now save so then we  should see the notification onto the screen.   So now it is compiled. So if I will now go to  the React Redux app. So then you will see there   is a dummy message onto the screen, which is a  notification component. So now you will see we   have a notification. And now we need to handle all  of the states of the notification into the Redux.   So we will create a new slice into the Redux.  So it will be the UI slice. So it will be the UI   slice dot j s. And then we have to create a new  slice for the UI. So to pay the cost UI slice we   will be equals to the Create slice. And the  Create slides will then be imported from the   tax. So first, we will provide here the name  so the name will be equals to the UI slice.   And then we will just create an initial state so  initial state will be having an object with the   notification inside that. And the notification by  default value will be equals to the null and then   we will just create a the reducer functions to add  some data inside it. So first, it will contain a   function as the show notification to the show  notification function will contain the state   as the parameters and then it will contain the  action. So then we will just add the action dot   payload property into the notification object,  and then it will show the notification into the   app. dot js. So then we will add here as is state  DOT notification will be equals to an object,   and then it will contain the message will be equal  to the action dot payload dot message. And then it   will be having a new thing as the type. So the  type will be close to the action dot payload   type, and then it will have an open prop. So,  whenever we need to open the notification, so   we have to add the open so the action dot payload  dot open. For now, these three things will be now   there into the show notifications. So, whenever  this thing will be there, so the notification will   be shown. So then we need to just export here  the actions of the UI slices to the UI slice   dot actions. And then we need to just export this  count variable. And then we need to just export   the UI slice now as the default export, so it  will export default as a UI slice. So, now we   need to go to the index.js into the store and then  we need to add there, the UI slice also has a UI,   and it will contain the UI slice, thought it will  contain the reducer. So, now we have given the UI   slice on to the Redux store, so then we can use  the store also. Now, we need to go to the Abdo js   to handle the state. So, now, we have to use the  dispatch into the Abert function. So, whenever we   will read the Send Request function, we will send  the Zurich state as sending request, and then we   will just go whenever we will get the data so  then we will send a new state at the send state   to notification has now the request is successful.  And whenever we get an error from the request, so,   we will use the Send Request dot catch it will  have the error inside that So, we will just add   a new dispatch function inside that. And here  we will dispatch a new action as now we have   now error so send state as error. So now we have  the three dispatch functions will be here. So   now we have to use the dispatch function. So we  have to create a calls dispatch will be equals   to the use dispatch. And it will be from the React  Redux. So it will be imported from the React Redux   as you can see, and then we can just dispatch an  action. So, whenever we are sending the request,   so, it should be the dispatch and then we have to  get the UI actions which we have imported. So, it   will also import from the store and the UI slice  to the UI actions dot show notification. And now   it will contain an object. So, first property will  be close to the open. So, we have to set the open   property now equals to the true and then we have  to set a message. So, the message property will   be equals to Now as the it will contain like the  sending request. And now, it will contain a type   of the alert box in the material UI which needs to  be specified which will be close to the warning.   And that type should be of the same spelling  here because it is using the material UI at this   static strings. So then we are now dispatching the  actions of the show notification. So type it goes   to the warning. So whatever the response will  be converted to the lesson. So then we have to   use it another dispatch and then we have to get a  open trough. And then we have to set the message   at the Send Request to database successfully.  And then the type will be equals to a success   from the material UI and then whenever we will  get an error from this and because function so   we will catch an error. And then we will  throw a new dispatch function here again.   So the dispatch will be having an open truth  the message will be sending request failed.   And that time will be equal to the error. So if  I will now save so now we should see all of the   things here. But now we need to convert all of  the Tybee go to success and the message to the   dynamically. So then we need to just add here,  the use selector hooks. So const and it will be   having a notification will be equal to the use  selectors. So we will get the notification from   the state from the state and then the state.ui  dot notification. And then he will send all of   the data dynamically through this object. So it  will be having the type will be equals to like,   we have to get here the type as the notification  dot type. And then in the message, we have to get   here as the instead of this, we will get the  notification dot message. And the open probe   should always be in the notification state. So we  have to go to the notification. And then we have   to get if the state is now open. And Dan only  we need to show the notification. So for that   we will create a new selector hook as the cost  open will be equal to new selector hook again.   And it will be having a state as the parameter  of the callback. So we will get the state.ui   dot notification. So we can only get the  notification here because we have to get the   notification. So sometimes it would be undefined.  So we have to get we have to check all of the   error. So it will be the notification. And it  will because to state your UI don't notification   and then we will check whenever we have the  notification inside that. So it will be having   that. So whenever the notification dot open is  screw and then only we need to show the alert   and then we will add one more thing to the  alert. So it will the on clause. So whenever   it will be closed, so then it should be having a  function or the handle close. So then we will get   the handle clause. So, it will be having a cost  handle clause will be equal to the function. So   the handle clause will now contain a new dispatch  again, so we have to get the dispatch from the use   selector. So almost dispatch will be equals to  the use dispatch from the React Redux. And then   we need to dispatch an action wherever we are  now closing the alert box, and then we need to   set the open to the false, we need to set the open  property of the UI slice to the false so that and   it should not overlap the content of the state.  So, we have to get here as the open so, it is   showing as the open so we have to fix this also,  then we need to go to the notification again.   And then we need to set here the UI actions again  UI actions will be equals to the UI actions dot   show notification will only need to set the  prop the open which will be close to the false.   So, if I will now save and if I will now just  go to the app.gs. Now to handle the things.   So now we need to go to the app.js. And then  we have to check so when we would be having the   notification into the state, and then only we have  to show the notification. So if I will have saved   so now you will see Claire destroying initially  because the use effect is only on the first render   as well. So to fix it, we have to just stop it  from the rendering for the first time. And then   we can create a variable before the component  function to check if it is the first render and   then we need to stop the use effect from rendering  or we can create a variable is asked render   will be equals to like the true and then we  can just go to the use effect and then we   can just check a condition like if it is the first  render, we need to just said that his first render   will be consumed now the fall. So now the first  render is false and then we need to just add   the other return whenever it will be the first  standard. So it will be returned. So if I will now   save now, you will see whenever I will refresh.  So now you will see it will not show initially.   And once I will click on the login, and now you  will see the application is now working fine.   So now you will see now the Redux state has empty  items. So now you will see the array is empty.   So we have to check if the array is still  there or not soon, and you will see.   Now we don't have anything inside that. So  if I will not just add something to the cart,   add to cart. So then you will see the sending  request is there. And then you will see that   now the request is sent successfully to the  database. And once I will go to the database,   so then you will see the cart items is there.  And we have the quantity cost to the one and   we have the first item in the array. And if I  will locally go one more item to there. So add   to cart. So then you will see sending request,  the notification is showing. And then you will   see the notification is now completed send  requests to database successfully. So then   you will see now we have total quantity two  and now we have one more error in the database.   So now we have completed functionality of the  notification icon. And now we are missing one   thing. And now we need to fetch the data from the  Firebase. But before we start fetching the data,   let's have a look at the alternative solution that  we have discussed, which is the other option which   is the action creator. So now even the dispatch is  that action greater is sends an action now we can   write our own action creators as well, which  is known as the thunks. So what is a thunk,   but a thunk is a function that delays an action  until later. And we can write an action greater   as stunk, this does not immediately return the  action object, but which returns another function,   which returns the action. Or we can run the other  code before we dispatch the actual action object.   And it is very common battery in the Redux.  Let's now we will see how we can achieve that.   So we need to go to the card slice. And then we  need to create our after the reducers now we need   to create a function like this send card data. Now  the sound card data will be close to the function   which will receive a parameter as the cart. Now,  we will see from where we will call that but now,   we will just stick to the implementation of this  send card data and then it returns the another   function as we have discussed which  contains the dispatch as the parameters   and then we will dispatch another action. So this  will return another function inside that and now   we have to go to the app dot j s which we have  and now if I will just grab this action objects   like this will be close to dispatch to I will not  dispatch this action if I will look at from here   and if I will now go to that slice and then  if I will just add a dispatch here and then   you will see we have a UI action then we have to  grab the UI action and we have to import that.   And now you will see now we are dispatching first  the notification icon which is a sending request   and then we will go to the app.gs once again and  the file will now just get to the Send Request   function also from there. So we have to get this  function I will grab this function from there   to dispatch so I will just copy this function  and if I will now just cut this here and if I   will just paste to the card slice Now, we need  to call the Send Request function with the try   catch block line we will try and then it will be  the await and then it will be the Send Request   with the Send Request. So, now, we are now using  the await So, and it can be an async function   also. So, now it is now await. And now, after  this, we will add the catch block which will catch   an error. And then instead of catching the error  now, we will go to the app.js Once again, and I   will now grab the UI actions dot show notification  also if we have seen an error, so, I will grab   this and if I will just go to the cart slides  once again, I will not dispatch the action with   the error from here. So, now we have implemented  the sandbar data function to there. And now we   will see from where we will call and now we need  to export this data, export this function the send   card data. And now we need to go to the app.js.  And I will now just clean everything from there   from the Send Request. And now, we need to call  here the send art request data center card data   here. And then it will be having a cart as the  parameter and then we need to provide the card   parameter there. And now we are now sending the  data. And now this is a thunk and the action   creator. So we need to dispatch it, we need to  edit inside the dispatch. So do the dispatch.   And now we are now dispatching the send card data  function. And we are now adding the card inside   that. So now this will be the function which will  be using the dispatch and the send card data if I   will not save and if I will just go to the Chrome  once again to check if everything is working fine.   So now we are in the React Redux app. If I will  now just refresh now you will see now we have a   login screen, I will click on the login. And if I  will click on the Add to Cart. So now you will see   we have a sending request notification. And then  it should be successful. So now you will see the   notification is successful. And if I will not  just go to the Firebase, so you can see we have   the item list. And we have one data into the item  list. So now you will see everything is fine now.   And if I will click on the add to  cart once again. So then you will see   the request should be successful. And then we  should go to the Firebase. And now you will see   we have one more item into the list. And now what  we are doing here. Now we are sending here the   dispatcher like this, and we are adding a sandy  card data which is a thunk function in the Redux.   And we are adding a cart as the parameter which we  will receive from the card from the use selector.   And now the Redux will go ahead, and  it will dispatch this function for us.   And all other functions will be dispatched inside  the send card data function. Now we have so many   functions inside that. And our HTTP request will  also be performed. And this pattern may look   complicated, but it is supported by done by the  Redux entity is known as the thunk pattern. And   why we had this because this is an alternative,  that we should have the logics and all of the data   and the action creators inside the Redux only, and  the most important, you can stick to the previous   pattern as well, if you found it good, but  it's a good idea to keep your components clean,   and just only have all of the logics and  the side effect logics inside the Redux.   And now you have seen about the tang function. So  now let's build another action creator to fetch   the data from the Firebase to fetch all of the  card data from the Firebase. So now, if I will   go to the card slice once again, defy will now  just grab this. So now you will see we have a   card slice. And now we have a cart slice and card  data function, which is now exporting. So now,   to make this file cleaner, so I will cut this file  and the file will now create another file as the   cart dash actions.js will now add this function  into this cart. So then you will see now I have   pasted this function into this cart. So then we  need to import the UI actions also to make that   file cleaner. So now we have seen this function.  And now we need to create a one more function   to fetch the request from the Firebase and  to fetch all of the data from the Firebase   and to just update to the front end. And for  that, we need to create a another action creator   thunks. So it will be like the export, it will  be exported and the course at the fetch data,   which will be equals to like the function and  then we need to add here the function inside that.   And then we need to return here another function  inside that as we have did in the previous video   also, but we'll look for dispatch, and it will  be equals to an arrow function once again. And   this will also be the async function because  we are fetching the request from the Firebase.   So now we can create a new request to fetch  the data. And for that, I will create a   function as the fetch handler inside that and it  will be the function to fetch the data inside that   it will be the asynchronous function. And then we  will create a one more variable with the function   to fetch the request like response. And this was  we will get from the Firebase from the await.   And then we have to fetch the request. So  there is a function with the fetch. And then   we need to add the URL inside that we can grab  this URL from the HTTP till the contract JSON.   And this will be a get request. So we don't  need to specify the method here inside that.   And then we can just get the data as the cause  data will be equals to the await server Once the   request will be successful, so we will get the  response and then we will convert the response   to the JSON. So now we have the data inside the  data variable and then we will return the data.   So the data will be now returned and  now we need to call this function.   So we can call this function inside the  try catch block. Because this is a promise,   we can just get the course card data will be  equals to await. And then the fetch handler   for the fetch handler function will return the  data. And now we have the data. And now we need   to create a one more reducer function in the  card slice to get the data and to update the   data on to the Redux and the front end also,  before that, I will add another function here   as like the in the reducers, I will add  up one more function as the replace data   replace data. So the data on the front end because  now initially, the data would be empty. So we can   just replace the empty data with the data we have  in the Firebase to update the content of the cart.   So it will be close to the state,  though total quantity will be equals to   will be equals to the action dot payload, which  we will receive. So it will receive two properties   and the state and the action. So the action dot  payload will be there and 10 action dot payload or   total price, it will be updated from the Firebase  and then it will get the item list also item list   will be close to the action dot payload dot item  list that we have. And now we replace card data.   Now we need to call this function replace data  inside that so whenever we will send the request   to a data. Now, we will dispatch one more function  as the cart actions. So we need to import cart   actions dot replace data. So the replace data  will be there and then we need to replace the   data with the cars data which we have. So it will  replace all of the data with the card data which   we have in the Firebase, and it will reflect  onto the front end. And now we will add a catch   block here also, to catch an error if we have  an error. So if so, it will serve as an error.   And then we can just add here one more thing, we  can add a new dispatch action as the UI dot error,   so it should show us the error onto  the screen. So inside the catch block,   we will add this error and this will act as your  sending request it should show us the error.   And now the thing is now we have created the  function and now we have we want to call it   and to call this function we need  to go to the app.js that we have   and in the app.gs we need to create another use  effect to call this and this use effect will run   initially as well as we have stopped the another  use effect to don't run initially and then it   will be having a fetch data. So we have to get to  the dispatch function we have to dispatch here.   So whenever we will get the request whenever the  application will be open. So we need to dispatch   an action and then we need to fetch the data from  the Firebase. So, the first data will be imported   from the actions from the cart action. So then  you will say cart actions it will be imported   and then it should show us all of the things and  then now you will see in the era of dependencies,   we can add a dispatch function we have and now we  will see now we have moved the send card data into   the cart actions as well. So I will remove from  here and I will just import the send card data   from the cart actions as well. So, now you will  see the send card data and the all of the things   are imported from the correct place. So if I will  now save and if I will now go to the screen, so,   it should not show us an error. So now  you will see it is showing us an error   it is not an error, but it is the initial request.  So whenever we are opening the application,   it is sending the request to the database, and  when the first render is complete, then the second   render is then completing. So then you will see  the sending card data is now pending again and   again the data to the user to the Firebase. So,  whenever this request will be successful whenever   the application will be opened. So this request  will be run and after that, then the second enter   will be true and then we will send this request  here. So, we have to stop this because this is   a problem. And now to solve this now, we need  to go to the cart slice and then now we can add   a new parameter here as the changed it will be  close to the change will be close to the false   and then the change will be equal to the false so  we can check whenever the data will be changed,   and then only we need to run this render, and  then only we need to send the request to the   database. So then you will see once we will go to  the Add to Cart so then you will see the state.   So the state will now be changed. So when it will  reach the add to cart stage will be changed to   true and then once it will reach to the remove to  cart as well. So the state will be changed as well   from here also stays dotnet equals to the true  but now we need to check that inside the app.js   also. So once we will go to the app.js and then  we can check we have to send card data only when   we have a condition we can check our condition  via if statement like if we have the card and   then if the card dot change equals to the to and  then only we need to send this dispatch request.   So if I will not copy and if I will notice paste  inside that so if I will now say with all of that   and the and I should see the server should be okay  so then you will see now we have the application   Now, initially, we don't see any requests. And  once I will click on the login, and now you will   see we have the cart of the one items as well into  the Firebase also into here also. And now this   means that now we have completed the full Redux  functionality into this application. And now we   are also adding the card data from the Firebase  as well. And once I click on the Add to Cart,   now you will see the sending request to database  successfully, we can close this notification. And   I will add one more item. Now you will see now we  have three items inside that. And once I will go   to the Redux Firebase, now, you will see we  have the all of the items in the item list,   we have the quantity of three and now we have  all of the items inside that. But now we have   completed the full Redux course, and I hope you  have learned a lot from this course. And there   can be some optimizations as well. So you can  just move the chase property and the showcar   property to the UI slice as well. And it should  be the assignment for you. So you can do that.   But now we have completed two applications with  the Redux. The first one is a basic counter   application. And the second one is a bigger  project with a shopping cart application.   So now I hope you have learned the Redux,  then what is the Redux? Why we need it?   And how can we make use of it in the real world  applications? And how can we learn asynchronous   tasks with the Redux, but if you have any doubts  or you are facing any issues, so connect with me,   and I will help you out. And I have added  the source code also into the description   so you can take help from that also. So thanks for  watching and if you learned something new from me,   then do me a favor, like this video  and please subscribe to the channel   so I can create more videos like  that. Oh, thank you. Have a nice day.

Channel: freeCodeCamp.org

Views: 415,122

Keywords:

Id: zrs7u6bdbUw

Length: 101min 33sec (6093 seconds)

Published: Thu Mar 03 2022