Redux Beginner Guide with React Hooks | RapidDev Pro | Skillshare

Redux Beginner Guide with React Hooks

RapidDev Pro, Full Stack Developer & Tech Entrepreneur

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
31 Lessons (3h 25m)
    • 1. Introduction

      1:11
    • 2. Install Node.js and npm

      0:44
    • 3. Tools used in this course

      0:24
    • 4. Promise vs Async Await

      13:33
    • 5. Spread Operator

      9:04
    • 6. Object and Array Desctructuring

      6:03
    • 7. Redux : What and Why

      9:02
    • 8. Redux Actions

      6:27
    • 9. Redux Reducers

      5:33
    • 10. Redux : dispatch Action

      6:45
    • 11. Multiple Reducers

      9:51
    • 12. Redux Middleware

      8:06
    • 13. Async Action and Redux Thunk

      9:36
    • 14. Getting Started with React

      2:58
    • 15. App Header

      3:14
    • 16. Setting up Dummy API Server

      4:18
    • 17. Get task Action and Reducer

      7:23
    • 18. Redux DevTools

      7:35
    • 19. Dispatch Get Task Action

      5:41
    • 20. List task: useSelector Hook

      12:52
    • 21. Get Task Loader State

      8:39
    • 22. Redux Logger

      3:26
    • 23. Toast UI

      4:26
    • 24. Add Task : Action and Reducer

      3:35
    • 25. Add Task Form UI

      11:29
    • 26. Dispatch Add Task

      17:35
    • 27. Update/Improve Task List UI

      2:10
    • 28. Delete Task Feature

      9:51
    • 29. Modify/Update Task Status feature

      11:04
    • 30. Time Travel Debugging

      2:09
    • 31. SOURCE CODE

      0:24

About This Class

Master Redux with the latest React Hooks.

What is Redux?

A Predictable State Container for JS Apps

♦ Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
♦ Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more.
♦ The Redux DevTools make it easy to trace when, where, why, and how your application's state changed. Redux's architecture lets you log changes, use "time-travel debugging", and even send complete error reports to a server.
♦ Redux works with any UI layer and has a large ecosystem of add-ons to fit your needs.

What is React?

A JavaScript library for building user interfaces

Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.
Learn Once, Write Anywhere.

What is React-Redux?

♦ React Redux is maintained by the Redux team, and kept up-to-date with the latest APIs from Redux and React.
Designed to work with React's component model. You define how to extract the values your component needs from Redux, and your component receives them as props.
♦ Creates wrapper components that manage the store interaction logic for you, so you don't have to write it yourself.
♦ Automatically implements complex performance optimizations, so that your own component only re-renders when the data it needs has actually changed.

You will learn the following things in the course:

♦ Build the React app with hooks and redux state management library.

♦ Learn redux concepts such as Action, Reducer, State, Middleware, Dispatch, Async Action, Redux logger, and Redux-thunk.

♦ Learn to implement the best practices when handling application-level state with redux in react.

♦ Learn to make use of redux-thunk middleware to make your action creator asynchronous.

♦ Feel Confident with Redux Concepts and its integration with React Hooks.

♦ Learn the best practices to update the global state from reducers.

♦ Learn to debug the react app state with redux dev tools.

♦ Start with redux concepts basic and then implement redux with react hooks by building the real-world app.

♦ and much more.

Transcripts

1. Introduction: Hello, everyone. And welcome to my course on Redox with react talks. My name is Leopard a pro, and I'm going to be an instructor in the scores in the scores. We're going to learn Redox from scratch and will cover its fundamentals on later will learn how to use it with the latest the act Hooks. You will start by learning all the redox concepts from scratch, such as actions reducers, store easing action graters, middleware, Redox, tunc, Relax, lager, Redox, dentals, time travel debugging and much more on all of this concept will going to help you in building acts smoothly which has very complicated state off Pelin different. Ah, Mendel's will move on with using the Redox in the react app. We're going to make exactly test react hooks, and it is going to cover all sorts off corner scenarios that you might encounter while building your application with react analytics. So because I'm so excited to share all my knowledge and the learnings with you and I'll see you in my first listen 2. Install Node.js and npm: Hello, everyone In this particular video you're going to see how can you install the Norges and PM which comes with the Norges on your machine? So simply visit Norges door quality on you will see this page globally, a downward section on Choose your operating system as well as the architectural with the redistricted over 64 bit on. Once you click on this, it is going to download the executable file on just simply double click install on one certain installing head over pretty terminal and to check world wars. And you have installed simply done Nord hyphen B and you can also down in him, haven't we to check the NP immersion? So that's it. That's how you installed in northern and be a modern machine. So I hope you were able to follow along. And thank you so much for watching this video 3. Tools used in this course: Hello, everyone. In this particular video, we're going to look at the tools that will be using in this particular course. So I'm going to use DVS court as my coordinator, and I'm using the commander terminal for the windows so you can find it on cmdr dot net. You can use any criminal that you like. So this partial on windows are the bys terminal on dilly Knox. IndyMac And thank you so much for watching this video. 4. Promise vs Async Await: Hello, everyone on in this video, we are going to understand how they think of it. Differs with the promises. And how can you work with the single right? OK, so I'll just explain you by example. So let me this create a file over here called us. It's in Kobe. It okay, And you could name it, whatever you want. So first of all word I'm going to do is I'm going toe create a promise which is going to get result after three seconds. Okay, so those three second can be any icing task in the world. Example such as an a p A call to us over which is taking some time to get the response. Okay, but here, I'm just going to make it off the set time old method which is going toe simply return the result after three seconds. So, first of all, let's create the promise. Okay, on, we're going to work with this promise. First on, as soon as we're done with the promise, then we will move one video single bit. So there you can clearly on the understand the difference between the think of it and the promises. Okay, so for stole here. I'm going to create a promise card as display message. Okay, so there's basically returns new promise, Okay? And the force argument is always result. And the 2nd 1 is Did eject. Okay on. I'm going to make use off the set them up method over here, so I'm going to simply suspect emote. Okay, so this receives a call back, so this called Big is going to run after three seconds. OK, so here we specify their timing milliseconds, hands 3000. So here I am going to simply it is all the promise. Okay, So I'll resolved with a message which we will get as a parameter. So this particular function okay said it was a space turned over here. Now, the way you can simply work with the promise is by calling this function okay on, you will get it, then call back. Okay. On inside of that called callback, you will get the dessert as soon as this promise is fulfilled. Okay, So, in this desert, let us simply console log this popular dessert. Okay, on as far as the pedometer is concerned, let me just simply pass. Hello. Okay. So hopefully this makes sense. Now let me open up terminal that I'm going to simply say North unsinkable torches so you wouldn't see it right? After three second, we will get out of my search. We just Hello? Okay, as you can see now let's assume that we want to bring more message. Let's say we want to make more AP calls. OK, once we have this result. Okay, So the idea is to only make another promise, Saul, when the 1st 1 is the result. So the way you can do it is by running your task in this call back only, OK, right. If you do anything right after this, it is going toe ground radar. We write, for example, let me just simply print any log and let me just employed on this file, okay? So, as you can see, this is printed right over here, because this task is running a synchronously on. This is the callback which is executed when this task is done executing right. So when you toe put our second card in this callback only. Okay, so here I am going to simply say again, display message. And this time I'm going to pass death. Okay, so again, we will get it, then called back. And then again, we'll get dessert. Okay, so here also, I'm going to simply console log the results. OK, on in sort of this call back. I'm going to make another call to this function. Okay, Let me to simply the messages wassup on. We'll get the results over here. OK, so now what will happen is first of all this promise with lexical on after three seconds will get the hello. Then I get after three seconds, Will get did there. Okay. And then I'll get after three seconds, we'll get the What's up. Okay, so they destroyed with on this now, right? So we got all of this three message. OK, But the problem with this is that we are basically and bringing to the callback help problem. Okay, on this is one of the biggest problem when working with a singleness task in javascript. Okay, so you end up being in callback. Hell, right. So let's say you have five more calls, right? So just imagine what kind? Of course it would look like, right. And if any of the promised fails, then we need to up, like catch, block, toe each and every promise. Right, Because we never know which promises going to get rejected. Right. So what we need to do is we need to apply catch block. Okay, which receives the other object. Okay. And they need toe. Bring this era right over here. Okay. ATM. It'll Buddhists for each and every promise called. Right. So let me this copies, baster. It'll heal it. And Mr Door here has been right. So now you can see that How are court is looking? It is basically ended up in the callback. Hell, right, so this is not a reliable court. Okay, so the a think of it, keyword basically allows you to work with the promises on it makes your court more readable by making your court look very cynical. It's OK, so this is off course looking isn't gonna score right, because we have a lot of call backs over here, but like to see how can you work with the think of it on, do the same thing over here. Ok, bring the same message is okay. So remember that the thing of it works with the promises only. Okay, So, first of all, I'm going to create a function. Okay, so for example Const. My function. Okay, on in this function, I'm going to call this promise display. Miss it. Okay, so the way you can call the promise with the easing of it keyword is by first awful writing the overt keyword. Okay. And then you need to specify your promise, which is display message. Okay, on off course it is expecting an argument. So I'm going to pass the hello as well. Okay on. Always remember there to make use off off key word. Your function. It's to be a sink. OK, so wherever you're writing the awake, give all your function, it's to basing. So I'm going toe put the sink keyboard over here, okay? And I can simply get the result Were here like this. Okay. In fact, what I'm going to do, I'm going to declare the results over here, which is going to be empty. String is off now, and I just get saying this resort to this particular variable. Okay? Now, what I need to do is simply again called the display message, okay? And just passing the my sister. I want to pass So here this time I want to pass there, Okay? And I can again simply assigned the desert. So this particular variable Okay, on again, I can do the same thing with Newman. Said if it is wassup. Okay. Now, important thing to note here is that this is in call Will only exclude once this is fulfilled. Okay, so that's the beauty about the thing of it. So the of it is actually going toe stop the control flow moving forward until and unless this particular promise is either results or reject. So that is the most important thing about the thing of it. Hence we don't end up in the callbacks, right? Because this is basically waiting until and unless this problem promises resort. Okay, so our control flow is not going to move forward. And let me add the console log over here so that you can see properly the sequence off execution. So here I bring the result over here. Simply copy this printed again and print it again. Okay. And let me simply commend the promise out so that you can, of course, see properly. So let me just say this on alleged go to their terminal. Okay, clear the console and run this file. Okay? And I think I forgot to call this function. So let me just simply call dysfunction as well. Over here at the bottom. Now, on this file on hit. Enter. So let's see. What do we get? We got the result as hello for civil over here. Then we got there, and finally we got B. What's up? Okay, Now you can yourself compare the court difference it brings when we worked with the promise and when we worked with the think of it, this court is extremely straightforward and readable to the developers as compared to this one. Okay, so you can imagine how easy and efficient it is to work with these. Think of it. Keyboard rather than the promises. Okay, on. Even if we talk about the error handling, it is so much better in case of a single bit as compared toa the promises. As you can see here, I have to apply the catch block to each and every promises, right? Okay. The reason is that any off this promise can get rejected, right, But in gets office, innovate The overhead keyword throws theater as an exception. Remember, this promise is rejected. Okay, So what you can do is you can handle the exception using just single try gets block. Okay, so let me show you what it looks like. So let me. I did write gets blocked as well on. All I need to do is simply bring the adult over here in the console log. Okay, so let me just do it on. Let me just take everything from here, okay? And pasted over here. So now if any off this promise is rejected than it can be simply handled over here in this sketch block, OK? So as you can see how good your core looks of a new work videos Think of it as compared to the promises. Okay? And let this even try. Do it on a scenario to show you the other case. So let me just come in this out. So let me this even show you an example how this cage block will be executed. So let's on this particular promise. My number divorce up messages saying we need to basically reject the promise. So here I can simply say if the message is required so what's up then? Simply rejected and simply say something went. But all okay on here are also I'm going to our didn't statement so that the court blocks is not executed for that. Okay, So letting us embassy of this large garbage terminal on dry road on this fight, so you will see that force will get the hello message. Then they there. And as soon as the boss up, our task is as executed will get there. So, as you can see, we got there on it is here in the something went wrong. Okay? And we're able to do this bites in applying a single catch block. Okay? And in case of promise, we had hoped, like edge, block to each and every promise called. Okay. And one more thing I would like to tell you about the think of it. Keep it. Is that the await keyword off course expects the promise. Okay, so in our case, it is returning a promise. So it is working. Fine. OK, so you can apply the orbit keyword on lee to do two things. The 1st 1 is if you're function, is returning a promise which, in our case, it is doing OK. So the display messages returning a promise or your function should be facing function if it is in order turning a promise. Okay, So remember these two cases, Either your function is returning a promise or your function is an amazing function. So let me show you by example. So let me There's declared a function over here quoted as greetings on, let me make this function as a sink. Okay? On it is going to simply return, for example. Hey. Okay. So now I can apply the gatekeeper to this getting function because it has these in Cuba with it. Okay? And remember, I just told you right now that either the function has to return a promise or it has to be amazing function. Okay, so let's just rightto apply the await keyword. So this greeting function okay on, let me simply get the result here and let me even console lobby. So now I'm going to execute this. But before that, let me to simply let him comment about this court blocks so that we don't get any sort off better. Remember, this particular promise is executed. Okay, so let me just go be their dominant on on this fight says you can see we Gardez Hey, my sexual here, which is printed over here, right? So now let's understand what special difference does the ace in keyword makes to a normal function. So Annamarie off lies in keyword toe a normal function, and it returns the value than this value is not return as a simple value. Instead, this value is returned as a promise. Okay, so what it will do is it will try to always result this particular value as a promise. And that's the reason why you are able to apply the orbit. Key word on the matter of the fact is, if you are using this hazing function, then you can also simply say great things. Thought. Then you can apply then over here. Okay, so the reason you can do it is because this is basically resolving as a promise. Implicitly, you are not able to see it. But the Zinke what is doing that? Okay, so let me one show You Okay, so I'm going to simply quickly console log they deserved over here. Okay, Now let me go to their dominant and run this file so As you can see, we got the value right away. So there is. This was all about these. Think of it. Keyboard on. I hope you were able to understand this on. Thank you so much for watching this video. 5. Spread Operator: Hello. Everyone on in this really of your going to understand what a spirit operators in tax on how can we use it? So basically spread operatives in text allows you to go fetch the elements from the variables such as our A string and even the object says Well, so let me show you by example. So first of all, I'll hear create a file called as spirit operator. George is okay. And let's say I haven't had a over here called us Everyone okay, which is holding value such as Warren to entry. Okay. No, the way you can make use off spirit operator is resting place saying let me show you by example this index for it is people dot on the your trouble with this. Okay, so let me to save this. Let's go to the terminal on this particular fight. So I'll say North spirit operator Dajae. So as you can see regard, they weren't 23 Okay, So what this index is doing is it's simply taking out the values from this area and spread it over here. Okay, so it just printed 123 Okay, Now what I want to do is Let's suppose that I have another day called as Const Readyto, which is equated toe for five and six. Okay, now let's I want to create Thurday using this forced to always so I can simply say concert a tree equal toe. I can spread over the other one. Okay, then I can spread over all the values off the radio, and that's it. That's all I need to do. So let me just console log this as well. Okay, let me simply say of this on down this file. So as you can see, I got it. Artery, which holds value such as 1234 which belongs to the 1st 1 Okay, so it is spreading over here, and then we have 456 Okay, which belongs to the secondary. No, If I was not using this spirit syntax than what would have happen is that it is going to simply, um, put this whole array instead off values over here. So this word form on a state. Okay, so let me show you. So as you can see, this is your main today and insert off this. You have this Holaday. So this is the everyone on. This is the radio, but that is not what we want, right? It is creating a complex data structure. No. One more important thing about the spread operator is that along with the spreading values , it always make a copy off the sore. So, for example, here, the sources. Everyone on here, The sources are there too. So it is not going toe. They're friends this way over here. Okay. It is always going to make a copy. So how it is beneficial for us. So whenever you make a copy to a new area and if you make changes to the newly, then it is not going to reflect on the old one. Right? So that's also ended one days off this pretty operator. Now, let me this also show you the example how their friends creates the problem and it's no legs spread. Operator is mainly for solving the difference problem, although it is spreading out values. But it is also creating a copy off those sores. Okay, it is not going to the friends it. So let me show you by example. So I will come in this out, okay? And let's assume that we wanted to keep the array three as their they were so the one. Mr. Do this. We just simply assigning the everyone podiatry. Okay. And let's suppose if I change the area tree on, push some other values such as six over here on. Let me simply print both off the area. We're here. Okay, So I'm going toe for India. Where one as well as theory three. Okay, so they're going to save this gold with their terminal on if I run this particular file. So as you can see aboard the array, hold the same value. That means the six eyes post toe the area one as well, even though I just pushed her to the rectory. Now, the reason this happened is because this is creating a friends to the array three. Okay, so it is not creating a copy offered. Now, one ways to solve this problem is by using the A one dot slice matter. Okay, So what this will do? Is it instead off for a friend singer? They want to the territory. It is going to make a copy off the other one to the other three. So let me just around now. So, as you can see, this time, the everyone is holding its original value, which is 123 only. And since we pushed the six value to the other three, it is holding 123 and success. Well, okay, so, no, I am going to somebody comment out this line. Okay? And instead of slice matter, I'm going to make you love the spread operator, which is everyone. Okay, let me to sport do triple dot over here on GMA. Tried to run this again and you will see that again. The everyone is holding its original values and the tree is holding 1236 Okay, so that means this spread operator always makes a copy off the source instead of creating a difference. Okay, Okay. So now that we have understood everything about the raise, now we will understand. How can we work with the object using the spread Syntex? Now I'm going to make it off the same object that we used in the previous video, which was this one. Okay, which is a user object and holding some of the properties. So let me just simply call this as user one, okay? And Let's assume that we want to create a user to object. We told the same values, but I just want to change the name from David to John. So let's see, How can we do this? So here I'll say user toe, which is equal to user one. Okay. And I want to change the value as user to dot name equal to John. So let me just consoler both of this. So he writes a console log. Use that one, which is user one over here. Okay on. I'm going to console along user toe as well. Okay, Now, let me open up a terminal on school. Don't over here and let me just sit on this fight. So now you would see that the user one named property is overrated with the John. Okay. Even though I only a predator user to object. So the reason this happened is because user one is being created as a reference to the user to object. Okay, it has not been covered, so let's see, How can we copy this? So the one way is to make use off the object assigned matter, So I'm going to simply say object daughter sign on. I'll be is their target object where I want to copy the object. Okay, so their target object issues there, too. And this source object is the user one. Okay, Now, if I run, leave this fight again. You will see that the original object, which is user one, is holding the same name property with this debit and their target object updated. The name property is John. Okay, Now, let's see. How can we basically do everything using this print operator that we're doing over here? Okay, so the idea is to make simply a user to object, and over it. The name property is John using the spread operator. So I'm going to come in this out, okay? And here, I'm going to say, const user toe equals to object. So first of all, I'm going to spread away all the properties off the user one Okay on. I want to update the name. Okay, so he rides. His name is John. Okay, on Let's I want to add extra property, which is gender, Okay. And I'll call your desk meal. Okay, Now, this name property will be overrated in this user to object because we're spreading the all of this property over here on this name, Robert is already present. Okay, so it will be overrated. And since this gender is a new property which is not present in the user one object so it will be simply I did for the user to object. Okay, so let me just try good on this again. Let's see what result over get. So as you can see, the original object is holding the same values. And the new object has the Jonah's new property. Also, it has the gentle property that we added over here. Ok, so as you can see how easy it is to our makers off this print operator OK on simply had some properties to it on. You can see that even though I know where I did the name property, it is not being overrated. Toe the user. One object because you're this creating a copy of the user. One object nor data friends okay on and you can see instead off these three lanes it is the court guard converted into just sing a line right on. In fact, there should have been one more line for riding the gender over here. Okay, So in fact, the four lines are converted. Known tojust single line. Okay. So as you can see how easy it is to work with this spread operator and how it basically is the least spread over the values OK from the terrible, such as object. But as well as strings on it is going to create a copy off the source instead of the difference. Okay, So you guys, this was all about this spread operator on. I hope you were able to understand on Thank you so much for watching this video. 6. Object and Array Desctructuring: Hello, everyone. So in this video, we're going to understand what this day structuring and how can we use their de structuring ? So districting basically allows you to fetch the properties from the object on values from the into individual variable. So let me show you by example or they mean by that. So here I'll create a file called as they structuring Norges. OK, now, in this file, I'm going to First World declared a user object. Okay, on this user object is going toe hold some of the property such as name as David then we have ages. For example 22 then we have city as so like city on Finally, we have country as USA A OK, so let's say we have the user object now. What we want to do is we want to fact to the name and the country into individual variable . Okay, So the way you would do without the districting is very declaring available over here. So you would say const name equals user Gortney. And you would say const country equals use a dark country. Okay, No, let me the same play playing these two variables over here, so I didn't say name as name A with you. Look it on the same 40 country. Okay, so now let me open up a terminal Onda on this particular fight. So here I'm going to say Nord the structuring George's. So, as you can see, we got the name is David and the country, as you say. Okay, now let's see. How can we do the same? Using their day structuring. So that will do. Before that the succeeding allows you to fight the properties from the object. Okay. And here, very now, using the object will also consider the example of theory. But let's first have a look at the object. So first of all, I'm going to commend this out and the way you can Destructor this object is basing Const. Then you have the space of medical lib assists. Then you have to specify the property names that you want to fight from this object. And remember that this property name should match the properties president in the object. So, for example, I want to face the name and the country. Okay, so this is how I would do it, and I'll pass the user object. Okay, so What it will do is it will basically source for the name property in the user object and declared country property in this user object. Okay? And it is going toe create the same to individual variable with those values. OK, so this is not creating object. Okay, this implicating to conserve variable. So let me simply say this And since we're to control logging this very well, be sure against get the same dessert. Okay, so here, I'm going to see North destructing Gorgeous. So as you can see again, regard this individual variable. OK, so a lot of people get confused, like whether it is an object or something, but no, it is just creating two variables. Okay, This is how our districting works with the object. No, let's understand. How can we deal with the party as well? Okay, so here, first of all, I'm going to declare in Caldas Maya on Let's assume that it is holding lusitans one toe, three in four. Ok, now let's say you want to fetch the first revalue into individual variable. Okay? So we don't be structuring. The way you can do it is blessing const. Food equals toe My array off zero. Then you would say, Const bar equal do my audio one and finally const. As equal to my day off. Okay, so let me just spring this individual variable so that you can see properly who has food, Okay. And then I'll simply pin the bar as well. And the last one is the jazz. Okay, so let me open up a terminal, okay? And school over here so that you can see properly. So now I'll say, Lord, restructuring Dodgers. Okay, so these were the previous locks, but as you can see Okay, So this is not food. This is food. Okay, So, as you can see, we have this fool as one bodies to and the jazz as three. Okay, So this is how you would do it with Alderdice factoring by simply fighting the value from the using the index's. Now, let's see, how can we reduce this number off? Lines on use their destructive. So I'm going to come in this out, okay? And here I am going to say const and I'll declare this square brackets. So remember that in games of object, the structuring we were declaring the caliber assists, but in case off already. Structuring we have toe are declare the square brackets. Okay, on. First of all, I'm going to simply plasticity. Now what I want to do is I won't go fetch the, uh, 1st 2nd and third index value on a send them into individual variable. So I'm going to stay here simply so full. Then I'm going to hearsay bar, and I'm going to say jazz. Okay, so I guess object restructuring it was looking off for these properties in this object. But in case off Ray, what it will do is it will try to fetch the index according to index. So the first valuable point to this, he wrote next, the second value will point to the forced index and the Third Valley were pointing to the second index. Okay on, let me simply say this and again we showed City same result here also. So as you can see regarding forwards one bodies to win the jazz three. Okay, So you guys, this was all about the restructuring. Okay, So it allows you to basically reducing the more off line for declaring the individual variables from objects or arrays. Okay, so there was This was all about the restructuring on I hope you were able to understand on Thank you so much for watching this video. 7. Redux : What and Why: Hello, everyone on in this particular video, we're going to understand what this Redox and Vitaly user decks. So by definition, Redox is a predictable state conditioner for your JavaScript abs. The important thing to notice here is that it is for javascript abs, that means it is not just for react. So Redox is an independent library that can work with the vanilla JavaScript as well as with other framework such as angular or view. Just as well. There is a binding for Redox with react with specific over here so you can find it on react . Hyphen Redox J start are on this particular bindings basically is specifically made for react. Similarly, you will find various bindings for different frameworks as well on. Of course, you can use the Redox with the very large our script. So no, let's understand what are some features that they did extra weight. So redox is predictable. It is central ace. It is debatable on it is flexible. So redox basically allows you to manage your state in a predictable way. See, application level state in any off. Your application is very, very important. And it is also very important. Toby ableto have control on how your application level state is going toe update. Otherwise, what will happen is if you don't have control or a predictable way in which your application state behaves, then it will be very, very, very difficult. Toe debug your application and you won't have control as your application grows in complexity. And this is the biggest problem, which they re Taxol. It basically provides you a break table by predictable, it means did it can be tracked like how your application state is going to change what is going to change and who is changing that application level state on. Once you have this predictability, it enables you with having features such as time travel debugging, and we're going to say this in the upcoming videos. So we're going to use the Redox Devils so make use off the time travel debugging. So now that you understand this, you must be wondering if react has its own way off handling the state, then why does react need the Redox? So let's understand this particular need by an example. So here is an example off your react app. Currently, it's not using the redox, so as you can see we have some root company in some parent competent and the child company . Right now, let's assume a scenario where the child one competent, wants to share this date the detailed for company. So the way you would do this in a reactor app is by lifting of the state from child one competent, toe dependent, one competent and again passed from parent, one competent toe, the route competent, then passed on from route component toe parent toe component and finally passed from parent to component. So the child for competent. Now here you can see the main do problem. The first problem is that the state has to travel a lot to reach its destination. Second, all the intermediate component might not even care about this state, But still they have to either lift up the state or left down the state toe other components unnecessarily. They don't even need it. And the interesting thing to note here is that I have just used an example with one level off hierarchy. In a real world complex scenario, you will have very, very deeply nested components and just imagine how complex it will become when you're competent, which are deeply nested are, you know, lifting of the state, passing it somewhere you won't even have control on your application. So this is the biggest problem that he will face if you don't use any state management clarity on this particular problem is no nous props drilling in react. So now let's see if we introduce Redox into this particular picture how things are going to change now, As you can see, once we introduced the Redox insert off our application, We have a central place where in our state is stored. And the best part is that every component, no matter how deeply there nested they can just go to the central store and get the data from there on. This particular implementation is going to solve the problem that we discussed in the previous scenario, which was props drilling. Now let's understand some of different dem entails off Redox. How does it work? How this status changed on how developed flow happens now, As you can see on the screen, thes are the main part off the redox. The 1st 1 is your action. The 2nd 1 is your reducer, and the 3rd 1 is your central state. Now, the important thing to learn here is that whenever you want to update the store state, you need to fire in action or unit to dispatch. An action on this action can be spread maybe from the company. Anyway, that is your react component. Or it can be just are simply called from your javascript. As we discussed, Redox can be independently used with vanilla JavaScript. So here in the company y you can just assume that there is some JavaScript chord which is going to dispatch an action action will basically call the reducer and reducer finally updates the state. And as soon as this status changed, all those components are all those places who are subscribed to the central state. We'll get the operative data. It's as simple as that. And this is what make the deduct state predictable because the only way you should update your store state is by falling through this process, the process off dispatching an action, calling the reducer from the action and a breeding the store state. And if you're wondering, war direction and water reduces actions are nothing but an object which basically described what type of action it is so you may have a lot of action in sort off your applications that just adding Tasco are logging in. Users are logging or to use that or reading items toe the card efforts and e commerce app. So in action you basically defined the type. You also defined the payload witness to be updated in sort of the central store state. No action basically passed this to the reducer reducer basically understand what's needs to be updated. And finally it is going to update distort state on all those new changes are basically reflected whomsoever subscript with that store state. So let's suppose it can be a competently way for an example. An action can also make any single is called to the base reversal. It suppose you want to dispatch an action called as logging so action can make an AP called the server, Get the response and then call the reducers and always remember that reducers are all this singleness where in action can be singleness or asynchronous. Always remember this tumble because if you make reducer is in kunas, it will be very difficult to detect the changes made. Insert off your store state so so producers are always supposed to be singleness. And as I said, action can be singleness or it can be a sin. Ghana's as well. So this was the basic workflow off the Redox. And finally, I want to discuss with you the three principal of Redox. The 1st 1 is single, source off wrote. This basically means that the whole state off your application is present at the single place. You just not scattered here and there it is just at the single place. The second principle is that your straight is read only that means you cannot directly update and state do live A. You can update This state is very dispatching in. Action on action is going to finally call the producer, which is going to finally about this state. And the third principle is that changes are made with pure function. So as we discussed in the previous example, it is the reducer who finally updates this store state. It's not the action action is this part of the process. It is finally the reducers which a bleed the store, street and reducers are basically pure functions. And if you're wondering, water up your functions so pure functions are those function which first awful gives you the same output for the same given input. And the second they do not mutate the incoming arguments or the parameters that are passed to them. So your reducers are basically pure functions so that they do not have any side effects. So it is. I hope you were able to follow along and understand board and via FedEx. Thank you so much for watching this video. 8. Redux Actions: Hello, everyone on in this particular video, we're going to get started with the Redox on initially, we're going to use Redox independently and we're not going to use any other framework. Suggested he act and also will mainly focus on the action in this particular video. On gradually will move one with other concepts as well. So to get started, I'm going to create the new folder over here. So goodness am Katie Air on the name of the folder would be Redox high funland on. I'm going to get inside of this folder. It's currently empty. So here, first of leading initialized the project using in payment it on going to add the hyphen wife leg which is going to set the default answers. We just ask for the package, not Justin filed. So as you can see, the biggest gorges and valleys created over here. No, What I do is that it basically open up. This court in the Viet scored so as you can see. And now I'm in. DVs scored so far. So I'm going to create a file over here called us learn largesse. And now I'm going to open up their terminal from here on here. Gonna simply say, NPM installed Redux. So as you can see, the packages installed on here is the entry in sort of their dependencies. Now let's more onto the loan dodges on. First of all, going toe require the Redox on. The first thing that even introduce you is to create an action, right? And as we discussed in the previous year, though, that action is nothing but an object. So let's create a object over here on. Remember that action always have a compulsory type property, So I have defined it I property on. Let's suppose the type of the action is at underscored task, so this basically defends their type of the action that you want to dispatch. And, of course, you would also want to pass some data from erection that needs to be updated inside of the store state. Right? So let's suppose this act task. I want to pass the information, such as the title on the East computer. It's traitors, things like that. So the way I can pass the data is by specifying other key in this particular object, not the name of the key can be anything but the standard is too right ID payload again. It's not required. You can name it whatever you want, but the standard ways to righted in sort of the payload key. So here I can pass the data such as, for example, title on. I can say their task name as Let's Suppose, according is completed has falls so you can pass whatever object you want. Whatever you want to update, it can be string bullion number or an object or anything on the general standard is to pass it instead of the patriarchy. But again, as I said, this key can be anything. It can be info or whatever you want, but the general standard is to use the payload. Now. This is your basically action object. Right now. One more terminology that you will hear when you work with the Redox is the action creators . So the action creators are nothing but an function which basically returns the action. That's it. It's nothing more complicated. It's just a function that returns the action. No words they had wanted off using an action creator that want it is that this particular action can be fired from multiple places. Insert off your application. So instead, off writing this whole object in 10 files, What you can do is you can just create one function and call that function, which is going to return you this object. So begin clearly understand that Action Creator as just simply function which returns in action. Andi, are not anything special that you do instead of the relax, its gentle programming principles are not. Repeat yourself on make your coat less error prone. So I'm going to create our action creator over here. So here I'm going to simply say, const at task on this is going to be a function. And I'm going to simply pass this object from this function as simple as that. So here gonna say, didn't on going to place this object. So this is my action creator. That's it. That's how simple it is. Guys, this is nothing special. I have just completed on the action from a function and you call this function action created right now. Since we have made the action creator, they'd want it is that this function can be called from multiple places on it is going toe return the same action object on when what improvement that we can make instead of this action creator is truly find the type of the action in sort of a constant, no words the reason off defending this particular type instead of the constant. The reason is that this excellent type is basically used by the reducer that you are going to see in the next video on reducible basically decide what to update in sort of the store state, depending upon the type of the action. So let's suppose that if you're doing, they find this at one single place in sort of the constant. What may happen is that instead of the reducer, you might, you know, make a typo and write a report. City underscore d double e ask. So let's assume you basically did a spelling mistake. So if if this type and the type in sort of the reducer doesn't match, then you won't see detained this reflected inside of the store state, right? So this is very important to understand that this type should always be same in sort of the action as well as the reducers. So make everything work properly because reducer needs to know what type perfection is fired and what needs to be updated. Insert off this store. Right. I'll repeat once again, What type of faction is fired and what needs to be updated inside of the store State. So what I'll do here, I'm going to create a constant. So gonna said const. Ad underscored task on here, going to simply say I'd underscored Tusk and I'm going to basically use this constant over here instead of directly defining a string, not the and one day it is that they never liked the reducer. I'm going to use this constant. I'm not going toe hard court this string value so that I do not make any mistakes. In the name of the action, it is always going to be seen in sort of the action as well as the producers. So in the next video, we're going to have a look at the producers. But I really hope that you were able to understand action and the action creators properly on. And thank you so much for watching this video 9. Redux Reducers: Hello, everyone. And in this particular video, we're going to implement the producer. So if you remember, the purpose of the reducer is to update the store state. So let's see, How does reducer look like? So they reduce. It is basically a function which has access to the but he vested and the action object on it is going to basically returned the new street as simple as that. And one important thing to note here is that portable changes that are made to the previous state are not made to the original previous straight directly. Instead, the way it works is that first of all, you make the copy of this object on, then making just insert off it. And finally, that new object, a new copy along with changes, becomes your new state. So this is how it works. So let's ready emblem in the introduce, you know? So here, going to simply say, const reducer Andi as we know this will be a function on. It has access to the rivest. It I'll just call it state and the action object. And if the state is not present in sort of this store going toe, ascend this initial value. Call it as initial straight on This is this Inditex toe assigned a default value to a function argument in the year six. No, let were defined this initial state over here. So gonna said const initial state. It is going to be an object Onda, this will basically hold their tasks list as off Now I know what you need to do is you need to check what type of action it is on accordingly update the appropriate state. So the one we're don't do this is by adding the if check on you can simply say if action dot type he calls recalls to the at dusk, then update the dusk state on similar. You can add a lot off else. If so, here again, you can say if action dot type Equal Streak will stole their Suppose if there were someone that excellent types of just already user, Then here you can say here you're gonna basically radiologic for update User state. So in sort of writing a lot off if and else if what we can do is we can make our court look Lord cleaner so we'll make it off the switch cases over here. So here, going to simply I'm going to switch over the action dark tape. And now I'm will to match it with the action type. So gonna say case at dusk on it is going to fund laid it on an object which will be the new copy along with the new changes. So to make the copy off the previous state, I'm going to simply make it off the spread operator on going to first of all, make the copy off the previous state. And finally, I need to basically added new to us. So this existing Ari, right? So here I can say, that's list Golden. I'm going to basically defined the area going to spread all the values that are currently present in sort of the test list on going to add the new task in this area by getting it from action about payload. That said on. I'll also add the default case in case if none of the cases is matched. So in case of default case, I'm going to simply it on the state. So if in sort of the producer, none off the action type is matched, then were just returning the previous straight only. And here you can improve One more thing, which is to use the object day structuring. So since the action is the object which has two properties type and the payload, I can simply write it like this type and the payload on going to simply majors off type over here instead of action or type Onda payload over here in sort of action nor pillow, that's it. So this makes it look more cleaner because now we can directly access the property off the object in start off. Always saying action darts something on. Just to get the data, I would like to also discuss one more point which we discussed in the last radio, which was to be find the action type as a constant. So now you can clearly see there it wanted start whenever I'm in sort of the producer on Benny. What? I'm taking the excellent type. It is always pointing to this constant. I'm not hard, Gooding This air task like this because if I misspelled this task as it already in the school t as double K, then you will see that this case is never going to run on. If this never runs, this state is never going to update All I'll have. Is there the fall state being written? That means there will be no changes on that is the reason why we make the action type as a constant and user in sort of both action creator as well as the reducer. So, you guys, that's it for the reducer. In the next video, we're going toe finally see how this action on reducer work together on update this store state. So we're going to connect all the pieces together that we have learned so far since we're going to introduce store in the next video on will completely see how to create this store , how to dispatch the action and how the store state is updated when the action is dispatched . So a lot of good stuff coming in the next video. Andi, I hope you're able to follow along for this particular video and thank you so much for watching this video 10. Redux : dispatch Action: Hello, everyone on in this particular video, we're going to finally create the drugstore on We're also going toe. See, How can you dispatch the action which will basically call the producer on it is going to update this store state. So the first thing that Aldo is to get the create story method reference over here So gonna simply say const create store equals toe Redox Nord create store And here it the bottom I'm going to simply say const store equals toe clear store now create store basically takes three arguments. The first argument is the release or function. The second argument is the initial state that you want to pass to the store and the third argument is stored and answers which basically provides more features to your drugstore. So one off such an answers is apply Middle where which you are going to say in the upcoming videos. But as of now, I'm just going to pass the reducer function as the first argument on for the initial state . I'm just going to pass it on defined because we are already defining the initial state in gets it is not formed on the initial state will be this object which has touched list as an empty area. So that's it. Now, basically either console log over here on going to simply say in the Shell State and you can get this store state by calling the get state matter. So this is it. Now let's head over there. Definitely on going to simply run North London dark days. So as you can see, regard the initial state as this object which has passed list as an empty area. Now let's go to the court Weighs. Now let's see, how can you dispatch the action and how it calls the reducer and updates the state? So it's quite easy to dispatch the action. All you have to do is took, say store, not dispatch on this dispatch met her. Basically takes the object is an argument which has the type of the action on the payload. Right. But as you already know, we have already defined the payload and there type in this action creator. So instead, off passing the object right over here, I'm going to simply call the add Task Action Creator, which is going to ultimately return me the action object, which is this on. It has their type and the payload. So this is how you basically dispatched the action on Whenever the action is dispatch, it basically goes to the producer reducer will basically check what type of action it is and it is going toe update the appropriate state according to the type of action. It's quite simple. Onda. If you want to listen to the team this inside of the store state, what we can do is here. We can simply say store dog substrate and here, instead of the call back, I'll simply add a console log on here, going to simply say, store updated on going to simply get the state from store dot Get straight method. I hope it's we're simple. So whenever the state in sort of this story's changed, this subscript called big is going to execute on it. So kind off a listener and we're is basically simply printing the state whenever the status changed. On this substrate method also returns. You're method by calling which you can unsubscribe our tow this store. So here, going to simply say const un substrate and all you need to do is to basically called this unsubscribe method which is going toe not listen to these stories in just anymore. So that's it. Let's had or pretty Terminal and here going to basically done Nord learned RJ's So, as you can see, are the initial state waas That's list, which was an interior. And as you can see, the second log regard is stored updated and now they're test list has an object which has the title according and is completed falls. So this store street Garda change because we dispatched an action right on. One more thing I would like to show you is that you can directly past the action object right over here in sort of the action created. So let me one show you this. So I'll basically copy this object on going toe directly pasted over here on going to save this large head of work with the terminal. And now I'm going to run north London dot Js. So, as you can see, if you get the same result now, let's try to add more functionality. So this produce nothing. So what you do is start off, you know, passing the state big pillars every time. What I'll do is I'll basically, except this producer Payload has an argument. So this aired task action creator. So here, going to simply say the Lord on going to remove this object from here. Onda going to pass the payload over here now instead of the year six. If your key name and devalue Neymar seem you can basically like this in a more shorter form , which is there's only so this thing is equivalent to this. So I hope you understand this now What I'll do is I'm going to pass this object dynamically from here, right? So I have passed this object. Now what I'll do is I try to fire money deep election. So here I'm going to add another stored or dispatch on this time that suppose I want toe at the last name as dinner on that supposed is completed as false. On going to add one more action such as, for example, last name as shopping on going to add these completed as let's suppose true right now let's head over to the eternal and let's see what happens. So here, going to say north London dodges. So as you can see the initial state waas empty their task list was empty. No, when the first action is dispatched, As you can see, the store straight got up to date and it has title coding is completed falls. Then again, we fired on a direction due to which the store got operated on. Now we have two items in sort of their touch list. The 1st 1 is decoding New one is the dinner. And then we fired the action once again, which basically added another item in sort of the test list. So this is how basically dispatching an action works on This is how you can basically create this store, subscribe to this totally cento detainees inside of the store. Onda dispatching inaction on I hope you were able to follow along and thank you so much for watching this video. 11. Multiple Reducers: hallowed one on in this particular video, we're going to create multiple reducers, and we will see why there is need for creating multiple Judases. So to explain this concept, I'm going to create another action. Creator called us every user. So let's suppose that the new off the application is to menace the user visible. So let's suppose you want to fire an action called us at the user. So here, going to create an action called as the user on it is going to basically get it on the action, object on the type of the action. Let's suppose it is. Add underscore User on Now Window defined this action type constant over here on going toe . Simply do it like this on. Let's suppose that instead of the payload, I'm going toe dynamically. Take it as an argument from this action. Greater on. All I have to do is to first of all, meant in the state for the user, just like we have the task list. I'll also have the user list, which will be empty initially. Andi toe handle the air user in sort of the producer. I'm going to add another case on I'm going to update the case match toe add user on Dhere when returning the state, I'm going to update this toe. Use a list going to spread away all the existing user list on just going to open the payload object as ah which is a new user. So this particular day So our producer dis complete initial status complete on the action created results complete? No. The only thing that is the meaning is to dispatch an action. So here I am going to simply copy this dispatch function and instead off task. I'm going to call the end user on inside of the payload that suppose I want toe maintain the name off the user. Let's of whether it is David on going toe. Also add the is off the user. Let's suppose it is 25. I'm going to dispatch on a direction for reading another user. I suppose it is, John and the age is 30 right? So let's say this large, go to the eternal and see what happens. So here, going to simply say Nord Land dodges. So as you can see initial state waas empty test list and the empty user list on off course store straight is a single object. Always remember that. Hence it's a single object. Then in action is fired, which basically updated the dust list. So, as you can see, these are the action fired which initially abducted the cast list. Now you will see that here the user list is fired. So still here the user list was empty because there were three action at us. 12 and three. And then there was the at the user action, fired or dispatched with named David and age 25 residency in sort of the your list we have name David and age 25. Then again, another action fired which added the John and 8 30 So this would work. But the problem with this approach is that you would imagine that since we have the single producer, you will have Lord off cases like this, right? Your application might and operating 50 to 60 cases or maybe 100 cases, depending on the complexity of the application. And if you handle every action in just one single reducer function, which is possible, but this particular function court is going to become very large, so the way to solve this problem is by creating a separate desert for their task in the user. We will have one producer called this task producer, which is only going toe handle the task related actions and we're going to create another researcher called as user reducer, which is only going toe handled the user related actions. So the first thing that I will do is to copy this, reduce our function on going toe, pestered over here on I'm going to call this does reducer And now I'm going to copy this on Bay Street over here on going to create another producer called as user reducer. We just only going toe handle the user actions. So here, instead of the task, you deserve going to remove the user check for the action tight because, as I said, it is only going toe handle the task direction. So going toe removed this from here, and the user producer is only going to handle the user related action. So going to remove this task action check over here. So let me say this and one more thing I would like to do is to assign this separate initial state toe. What off this reducer because since now, really, sir has single responsibility. It doesn't basically need the other state. It just needs this state, which is specific to task. If you talk about pastoralism and if you talk about the user ready, sir, then use that only needs the user specific state. So I'm going to create a new state over here called as dusk Initial state. I'm going to create another. Korda's user initially stayed right on going to define the cast list over here on going to define the use A list over here and now I'm going to believe this on going to assign the task initial state toe, the task producer and user initial state to the user producer. So I hope this makes sense. Now. The interesting part to note here is that the create store function basically takes the single producer functioned right. But now, since we have created multiple producers, how do we pass this multiple producers over here? So the way you can pass multiple producers toe d create store function is by using combined producers. So to implement the commander users, I'm going to first of all, get their friends off the combine reduces. So gonna say const combined producers equals two redux dot com and nooses on Finally here in the reducer. I'm just going to remove everything from here as it is not required. So here I'm gonna say combined reducers on Instead of the object you can pass multiple losers and you have to define the key using which you like to access the state off A particular reducer. So it basically creates the name space using which you can access the producer specific state. So here I will. Ecto defined the key as task on going to posit task Rudisha on Dhere going to defend the user key ongoing capacity Use a reducer and finally this reducer is passed over here So I hope now you understand How do you combine the multiple reducers into just one single desert? It is done using the combined producer on Now let's go to the terminal on Let's try to run this So here, as in Nord learned gorgeous so as against see now the initial state is first of all, we have task key and then we have the task state on. We have the user key, Then we have the user state a year we didn't have this key. We directly had an object which had cast list as an empty ari on user list as an empty headed directly inside of that object. But now we have a proper nesting, so you can clearly see that all these straight related to their task will go under this key and all the state related to the user will go under this particular key. So I hope this makes sense on since we have nested objects hence, you are seeing this object instead of the console. So don't fix this. I'm just going to simply say this and got string. If I so here I am going to simply say Jason not string if I on going to pass the stored or get state. So let me say this. Let's go to the terminal and will run north. Learn dodges. So as against the again. This was our initial state on. Then the stories updated. That means the action is fired and similarly more action got fired on the state got operated, and I want to show you this final store state. So let me simply copy this on. Let me go to the browser. I'll basically go to the There's an idea that online on its ah, really good told to view digits in in a proper for my day to day. So as you can see, this is our deduct state object in This is a single object. In sort of this, we have task. So let me zoom in. If you want to say properly in sort of this object, we have task instead of their task. You have their trust list and then we have the user on instead of the user, we have the user list. It's as simple as that. And if you observe carefully now, our state object looks more clear because we have categorization off the state. So all the state related to the task will be present in this particular object and all the state A letter to the user really present in this particular object. So I hope this makes sense. And at last I would like to just operate the name over here, which we have defined. So as you can see, the method that is exposed by the real celebrity is combined reducers on. We have used combined it releases. So just because you don't get confused I'm going to remove this de from here on just going to the friend. This command reduces and everything worked. Justice. Fine. Let me go to their terminal on Done this once again. So as you can see, everything just worked fine on that's it for this particular video. I hope you were able to understand how to create multiple reducers How toe give single responsibility to introduce er's And how do you are? Locate multiple producers using the combined producers to your deduct store on. Thank you so much for watching this video. 12. Redux Middleware: Hello, everyone. And in this particular video, we're going to understand water middleweights in Redox. Now middle, there is not a special concept that is only available in the relax. It's a general programming concept. So first of all, let's understand what Jason middleware in general. So to explain you this, I would like to show you this image. So, as you can see, here is the image off toll plaza that you usually see. So every car, no matter where it is coming from it has to pass through this whole plaza, right? There is no escape. It has to go through this. So middleware is just like that within your execution off court, you set up something in the middle on your court has to pass through that on that piece off court which you set up in the middle is called us middleware. So I hope you were able to understand very clearly with example like Water Manila's. So now let's look at how my delivers is going to set up in ah Redox architecture. So, as you can see, here is the diagram off the middle wears in the redox architecture. So if you see clearly middleware is basically sit between the action and the producer. That means middleware will be executed just after the action is fired on before it goes to the reducers. Earlier without the middle, where whenever you dispatch in action, it was directly going to the producer. But now it has to go through the middle where and finally it's the middle there who is going to call the reducer and it is going to update district. So I hope you were able to clearly understand How does it feel it here in the Redox architecture, no words did wanted is off more deliver. You can make any sort off use case with the middleware because it's a really powerful tool . You can do lots of things that is logging your request or maybe doing some authentication, maybe taking some alteration checks. You can use it for n number off use cases, but for now what you are going to do, we're going to just set up a middleware with basically logs, the incoming action and the abraded state so that we clearly understand how can we implement our own custom Middle wears in the Redox, So let's go to the court base. So here I'm going to define my own middleware. So let's call it Const. My longer on the purpose off this model, where is that? It is basically going to log the action and it is going to run for each and every action fired. No matter words since it's a model where we just have to set up it once and for any action that this fired on this particular store, it will always go through this particular middle of it and just to give it a better naming , let me call it my logger middleware. All right, so the Syntex off riding the longer mill, Where is that? The first argument to your function is the store object itself, than what you have to do is you have to basically treat on a function. And in this particular function you have access to the next function on build, briefly discuss about what this neck function does. And then again, you have to return a function which does has access to the action object. So I hope you understand. Now, Onda, finally, you can write your middleware logic here. All right, so now let's try to log the incoming request. So here I am going to simply say console dot Log on here. I can simply say action tape dispatched on going to simply print out the action dot type. And now I would like to basically passed the action to the next function. So let me pass it like this. So know what this next function will do is it will pass this action. So the next Middlebury in sort of the chain. So currently, this is my longer middle of it. Let's suppose you set up another middleware called us authentication Middlebury. So what do you want to do is after logging you off course, Want to check the user authentication in that middleware? So if you do not pass it from this particular middleware, the request won't go to the ORP indication middleware. So you have to use this next function and passed the action. And if there are no further Middlebury president in sort of the middle of a chain, what this next function will do, it will give this action to the reducer. So it's as simple as that. Let's understand this by an example. So, as you can see in their diagram. Let's suppose you have three middle where m one and doing entry. Let's suppose your M one middleware calls in X function so it is going to call the middle where two on If my Diliberto has an ex function, it is going to call the middle where three and if they're supposed there are no more my deliver president inside of this team. And if you're last Middlebury calls the next function. Since it doesn't find any further middleware, it is going to pass this request to the reducer. So this is how it happens. It's quite simple. If there are for 13 then the next function is going toe past the action object to the next middleweight. But if there are no further modelers available, then the next is going to directly past the action object to the producer, and it is going to update the state. So I hope this makes sense on going to basically didn't this next action over here. So I hope this makes sense and finally, to make use off any off your custom. Middlebury, what you have to do is you have to make use off apply middleware function that comes from the Redox. So here, going to simply say const apply middleware on this will be called redox dot apply middleware. Let me pay is the same name so that I don't have any spelling mistakes. Let me companies go to the store and here in sort of the heart argument, I'm going to pass the apply middle of it and insert off this. I'm going to just pass the my longer middle way. So let me see if this let's go to the terminal and see what happens. So here I'm going to say no. Old London dodges. So as you can see, every time these store dispatches inaction, it goes to our own custom middleware, which is this. And hence you see this lock with his action type dispatched, as you can see. Excellent. I've despite our task. Then you have another action dispatch collect us. Then you have another one that tusk. Then you have to action for the user. Now, I would like to update dysfunction, which is my longer middleware and would like toa make it a bit more cleaner using the Essex in Texas. So it will be much shorter as compared to this so far. Still, I'm going to come in this out so that you can compare rate of it. How am I reading? So here I'm going to say, const, my longer middleware equals store function. So the first argument that we get is this store on This is supposed to return another function, which is an argument called next and again. This is supposed to return another function, which is an argument action. And finally, this is the body off the action function. And here you can basically do one thing, which is to simply say console, not flog on. Let me simply copied this from here on going to pestered over here. And finally I'm going to simply say return and going to say next function on going to positive action. Object. That's it. Let me say this. Let's go to the eternal and see if that works. So here, going to clear this up, Gonna say North Lawn large is so, As you can see, it just worked fine. We have three add task action and do you use direction being dispatched on there being loved by our own custom longer middleware on DNO. I'm going to remove this as it's not required anymore. So that is their trick. I hope you were able to understand the concept off middleware itself on How do you use it instead of the Redox? How can you write your own custom? Really? Where and how can you pass this custom middleware to your Redox store? So thank you so much for watching this video. 13. Async Action and Redux Thunk: Hello, everyone on in this particular video, we're going to implement the racing action and we're going to see words they use off the Redox tank library. So the first thing that I want to tell you is that if you remember the Redox architecture diagram, then you will see that action can also make any pay called to the server before sending the deter toe The reducer, so such as your application can have a log in state or the sent upstate on it can interact with the A p a to take the user credential before sending their data to the reducer. So here you need to basically perform the action a synchronously but currently in our court base. If you see the action creator, you will see that it's a plane object. There is no asynchronous thing over here. So let's try to implement our asynchronous tasks and let's see what happens. So we're going to implement the A singles action now, and the way that will use for making our DMIB a request will be Justin placeholder. So just going toe open up the Jason Place where a lot of upside on Dhere I'm going to hit the same point. We just reduce. So from erection, we're going to make any Baycol tothis particularly. Well, they are going to get the data from the server and we're going to pass this data. So the reserve. So let's see, How can we do it? So let me go to the court base. And the first thing here I'll do, is to create the action cuter. So gonna say, const get to lose And it is going to be a function on also going to define the action type so it will be get underscored. Cruise on. This will be equal to the get photos and now I'm going to create the true initial state. So here, going to simply copy this fissured over here on going toe objectives toe Toto initial state on here, going to define the brutalised. Now I'm also going to create the producer for the same. So you're going to company, especially over here on here, Going toe are meaningless to to reducer going to update the case to get to those on Dhere. Going to say to the list on going toe directly assigned the list of items that will come from the a p a call right over here in their rulers. That's it. On finally going to really started to do the abuser instead of the commended deserves gonna say Trudeau ongoing capacity to register. That said, Now let's go to the get total action Greater on. If you want to make the pick, all will make yourself a library called us excuse. So that means solid. So you're gonna say and install. Excuse Now I'm going to head over to the court base on going to require the package. So you're gonna say const excuse equals to require on going to pass the excess over here and here. Incident, They get to lose. I'm going to basically say of it. Excuse Don't get and going toe past the you are, which is this one. So this is are a pain point So going to pass the You are a lower here. I basically get the dessert andare to make use of the overt keyword handed to make this function. You think Onda finally what I bacilli need to do it stood it on this object, right? So if I basically do it like this So if I basically written an object. Ana, let me paste this thing who were here on If I basically say get photos like this on for the payload, I'm going to simply say visit dot data. Andi, since this particularly pain point returns 200 items inside off the area, I'm just going to limit it to the five using this place matter. So I'm going to cut off the area from zero index to the five Index that said, going to save this and finally I'm going to dispatch the section creator on Let's see what happens. So here, going to simply say store dot dispatch on going to say get photos. That's it. Let me see if this that's hard over the eternal on Dhere going to say north London dodges. So as you can see, as soon as we got on our file, we get the era's action. Must be playing object use custom middleware for racing action. Now, since we have basically used the A sink you would over here on as in order of anybody applied the using keyword 20 function and he sort of alluded, Newton will always be promise. If I'd that means get produces going to return a promise though this dispatch method but what it expects is a play an object that is a different promises. Different and plain Object is different. So this is where the redox tongue liberally comes into picture. Onda helps us in basically making our action creator asynchronous. So let's first of all installed this particular liberally on. We'll see. How can we make an AP call using the Redox stunk. So here, going to simply clear up the console gonna say NPM install Redox iPhone Tunc. So, as you can see, the library's installed normally basically had orbit accord with and here going to first of all, required the library. So when I said const tongue close to required redox hyphen tongue on going to say dot default Over here. Now, this Redox Tunc is ah, middleware. So going to pass this over here in the apply middleware function. And finally we are ready to use the tongue. No, Let's see what difference tongue brings to our action creator. So the way tongues works is that it basically allows you to return a function instead of deplane. Object from your action creator. So if you see a Leary would returning the plane object, but with the help of readers stunk, you can return a function. So let's first of all, do this. I'm going to return a function. Okay, We are going to move this step by step. The second thing is that the function that you written can be isn't goodness, so I can apply the using keyword over here. And the third thing is that this producer function has access to the dispatch method. So going to simply say this special here on, I'm going to move this court inside of this now. What you gonna do is, as soon as you're a singles result is available, you can dispatch an action using this particular method, which is available as an argument. So instead of returning this, I'm going to simply cut out this object on Dhere. Going to simply say dispatch on going toe pays the object over here. Quite simple. Let me say this. And one last thing on a very important change, which I'm going to do is to basically remove this unsub scrape method from here because since this particular action, especially this is going to take time to execute on this story straight is going to take time to execute because we're making in a pickle. And if I unsubscribe write of a I won't get any sort of logs inside of this which is stored or subscribe hands. I've removed that un substrate thing from here. All of the previous section were quite synchronous So even though I saw unsubscribe at the end, it didn't matter a lot. But since this is an ace in Ghana section, I had to remove there just to see the proper logs over here. Right. So let me see if these let's go to the eternal going to clear a bit terminal and here gonna say north learn gorgeous. So I think the again God decided this is because I think we forgot to remove the ace in key word from the Action creator method because always remember that only the function that you written in sort of the action commuter can be a single us. So let me say this that's hard awarded the eternal on here, going to simply say north London largesse. So, as you can see, this is our final state. So let me simply copy this. Let's school to the browser going to open up the Jason editor online on going toe based this particular result or the state object. And let's see what the wig presidency here is. The task related stayed here is the user related state on. Let me zoom in on here is our total. So as you can see inside of the to do we have this to do list which are dynamically coming from the this particular end point, which is 1/3 body base over on. I'm just wondering why we have user list over here. Let me go to the quarterbacks and check. Oh, so I think we forgot toe positive to ruination state. So the total results are going to do this going to save this school with eternal on. I'm going to run this again. So here, gonna clean up the council? I'm gonna say North learned gorgeous on. Finally, I'm going to take this final state going to copy this, going to go to the browser and going to paste it on residency into other tests. We have masculine traits Did instead of the user, we have user later state and now, in sort of the total, we have to do list, right? And this data is coming dynamically from this end point. And now we don't see user list because I love you Forgot to, you know, reference this true initial straight over here in there to do it yourself. So, you guys, that's how you basically me again isn't gonna section Andi, I hope, you know, understand the use off the Redox Tunc Middle where it is very, very helpful on that's it for this particular video. And I hope you're able to follow along. And thank you so much for watching this video. 14. Getting Started with React: Hello, everyone. And in this particular video, we're going to get started with the react we're going toe basically build our task tracker app where in the user can add update removed as well. Let's see the list off task on what we'll do is we'll make use off the latest features off the reactors has react. Hooks along with will also handle the application level state with the Redox. So, you guys lots of good stuff coming up on the way. So let's get started. So the first thing that I would always to set up the reactor boilerplate So here, going to simply say and be X create react up on the name of the project So far, the project name. I'm going to simply say the act Dusk, Fricker, Andre Ducks. So this is my basically project name. And if you're wondering what is MPX in pigs, we're told, which basically allows you to install the pain, pack it directly from the ANP, embrace tree without having you to install it locally. So let me hit. Enter now on. I'll get back to you as soon as it is done setting up. So as you can see the project is set up. Now I'm going to basically go inside of this directory. So I'm going to go to the react fast for a good redux and I'm going to open up the court based in the Via scored. So, as you can see, here are the project fighting on here is your main index gorgeous fighting. So now let's try to run this project and see how does it look inside of the plaza? So here gonna simply say, npm start So 70 other projects started on This is how it looks. I'm going to basically make some changes and remove the things that is not required. So the first thing that I really do is told him off this strict more because it gives some sort off edit when working with the heart of our deliveries, such as this reactive, bold step which we're going to use in the upcoming videos. So going to the north this from here on going to remove this as well. The next thing that I do is to go to the app gorgeous face. Andi will removed everything from here on going to simply say hello in the H one on Going to the movies lowers well going toe to get the local from here. And I'm also going to remove this abhorred assistance from here not required on going toe digit this Abarat assistance for Lisbon. So let me see if this nerd school to the browser on the flesh. So as you can see, this is how our application looks now. So, guys, that's it for this particular video. I hope you were able to follow along. And thank you so much for watching this video. 15. App Header: Hello. Everyone in this particular video via going to set up the header inside of our application on a somewhat is the U A. Framework is concern. We are going to make it off the react. Bootstrap. So let me to show you so it is the official website for the same. If you go to the get started section, then it will show you the pickets that do you want to install. So simply copy this had ordered the court based open up a terminal on December pace to this on. Once this installation is done, we need to do one more thing, which is to add the boot steps eases into your main index George's file. So we took up with this as well. Let's go to the court base. Let's go to the index dot Js and I'm going to basically pay street over here, right? So going to simply see this as well. And now little basically do is I want to add the header, right. So I go to the components on and I go to the neighbor on this is D pretty much their birth there that warned. So going to simply copy this Andi, we'll head over to the court base on Dhere. What'll basically do is create a hydro component. So we're still going to create a folder called Is Competent Inside of it, I will place all my confidence on here going to create a new file called as Header Georges and guys I'm using of years Court Extinction Caldas Year seven reacted as graphical react Native snippets. So this extension gives a lot of shortcut using which you can create a lot off snippets one off, which is to create the functional competent. So if you want to create a functional comprehend, you can simply say rfc on, then press tab. Then, as you can see, the functional component is set up right out of the box for me. I don't have to write anything on here. What I'll do is I'll just pasty never bar quarter over here and I will act also important there. But from the reactor bootstrap library. So you're gonna say, import from the egg work Step on here. I'm going to specify the never but and here in sort of the background, I'm going to set it toe primary on for the variant. I'm going toe basically specify dark over here on for the branding text. I'm going to simply say today Task Prager that said so. Our head circumference is ready. All I need to do is to include this competent in the Abd artists. So here, going to import it. So here, I'm gonna say, import head of From competent. Slash Heard of on. And I'm going to simply replace this with the headed. That's it. So that we saved this. Let's go to the browser and see How does it look like? So this is how it looks on. It looks good, actually. So I guess there treat for setting up the basic headed off our application as well as integrating the reactor would step you a component library. Andi, I hope you were able to follow along. And thank you so much for watching this video 16. Setting up Dummy API Server: Hello. Everyone on in this particular video we're going to set up are replaceable. So does set up, dummy pace over. I'm going to make it off a package called as Jason Silver. So if you basically says digiscents or were over the NBN, you will see this the Pakis that will be using on. I'm going to install this package as their developer dependency. So let's head over to the court base. I'm going to open up a terminal on here, Going to say NPM install High Fundy is the short form off doing haIf an offensive hyphen? Dev. So this is going to be installed laser developer dependency on going to simply say, Jason Server. So as you can see the packages install now let's head over the deep pockets Georgeson on. You will see that instead of their depth dependency, we have Jason so we do not have it under the dependencies. We have it in the dead dependency because we'll be only using this packet in the development environment, not in the production. So in out of ages on several works is that all you have to do is create our debate Georgeson file and simply passed this Libya Dodgers and file in the Jasons or what? Hyphen, hyphen? Watch, Command. So what it is going to do? It is going toe. Basically spin up the endpoints for all your root level keys in sort of your objects where they're suppose here we have three things post comments and profile. So it is going to create three endpoints the declared operation. So you will have read operation for post documents. You can get this list off post. You can add opposed, you can delete the post and you can basically update a particular post. Same goes for the operation as well, and same for the profile as well. So I'm going to simply copy this on let's school for the court base and we're going to create baby gorgeous and file and simply going to paste it over here. And as I said they'd want it, is that it is going to basically exposed the AP for us on. We don't have to manage anything, so this will be very helpful when we walk further by implementing the past record app. So we're going to use this as our FBI, and now what I'll do is I'll basically go to the Pakistanis and file on going toe. Either script over here called us. Let's suppose e p a on going to simply hearsay. Jason I fun server. Then you can basically at this flag, which is hyphen fn watch and probably debate gorgeous and file. But what you can also do is to provide the Portes well so basically go here First of all, going to provide deport. So when I say hyphen iPhone port and I want this student on 3001 port on denial basically at hyphen iPhone watch and I hear, answer db dot Jason So I'm going to save this now let's head over to the terminal. I'm going to open up another terminal eso I'm going to basically right click on this, going to go to the active console on going to go to the duplicate on here. I'll select split too. Right. So is against GM in the reactor. Ask record Redox directory only on here. All the files on here I'm going to say and b m Ron Abia. So noise again. See, this command is running, and as you can see, we have these three resources so we have this A p a that give you the list off post on this , give you the list off. Comments on did give you the list off profile. So let's try this. So going to simply cooperates. Let's go to the browser. And if I heard this like, we had this once again So as you can see, I get the response in the form of Jason. And now what we do is in sort of the debate. Georgeson file. I'm just going to replace everything with our own data just to have some starter points to build our application for the. And now I'm going to fetch delist off task, using this producer in point. So let's go to the browser and here instead off post for soul. If I hit post, it's no longer available. And now if I hit task, then as you can see, I got the task in the form off Jason and we have this three talks over here, which I have defined basically here in the debate Georgeson. And as I said, you can perform crowd operation over here. That means you can basically make a get post put and delete AP request to this end point. So we're going to use this in the upcoming videos. But that's it for the setting up the a p A server on. Thank you so much for watching this video. 17. Get task Action and Reducer: Hello, everyone. So the first, which is that we want to add to this particular app, is to see the list off task over here. And we're going to get the list of tasks from the Jason. EBay said word that we just set up. So the first thing that I lied is to define the action and the reducers for the does. So let's school to the court base. And here inside of the SRC folder, I'm going to cut another folder called Us Store. And instead of the store, I'm going to have another folder called This Task on this particular folder. In sort of, the task is going toe hold all the information such as the task action task reduce or it'll selector Everything related to the task will be stored over here in this folder. And instead of this, I'm going to create a new file called us Dusk Action Norges. And here the first thing you need to do is to have an action creator toe, get the task. So here I am going to simply say, export Const, get task on. This is going to be a function on since we want to make any pay called this odd word. That means we need to make use off the Redox Tunc middleware. So we're going to set up this store with the relax tongue model where in the upcoming videos. But here I'm going to basically return the function from this action greater because we know that the Redox tongue middleware liberally allows us to return a function from erection creator, which can be asynchronous. So here I am going to simply say, written on dysfunction. And again, I'm going to make this even shorter by using the year six. So instead, off writing like this, I can simply say like this. Let me just show you. So here, going toe, basically write it like this. And we know that the function that were written can have access to the dispatch function. So going toe positively special here. And to make the pick all I need the excuse. So I'm going to install the liability. So you're gonna say and then install Excuse on going to require this devilry over here. So I'm gonna say in port excuse from Axios Onda we can make this function is think because as we know that this function can be is in goodness. So here, I'm going to simply say const, the desert equals two of eight. Excuse dot Get on a Z. We know that excuse not get basically returns a promise. Hence I can apply the orbit keyboard over here in sort of using the dark, then function on for the u. R l. I'm just going to basically use this and point, which is locals 3001 less task now instead off. You know, writing the Ural hard coded over here, I'm going to define it at a single place. So here in the SRC folder, going to create a folder called This Conflict and here going to create a file called S E paid Georges and here going to export the fold, an object with a key called the A P. A. Basie Order on. This is going to basically be local host Colin 3001. And finally, I'm going to import this conflict. So here gonna say import ap conflict from. And now I need to go to the conflict folder on Go to the A P over here. So here, going to simply say, a paid or gate and going to pass the a p a conflict dart a baby s you wanted on going to also need to upend this less task rates oversell going toe, read this in back ticks, going to mix of the temporal, literally going to pass it over here on going to write slash and gonna say task on Finally , what I can do is I can simply say dispatch on here. I basically need the action type, right? So I'm not going to hard code the action over here. So, as we have learned in the previous video, that unit toe have a basic common constant defined so that you do not make any sort off people in the action type name because it is going to be used at actions file also or as well as the reducer Also. So here, going toe, define a new file coldest task action tape, Dodgers, and here going to simply say export guns get underscore. Task equals toe get underscored task. And now I'm going to use this action type in the task action Dodgers. So you're gonna say import, I'm going to say everything as dusk action type from does action type on here I can say type as a section type dot Get task on for the payload. I'm going to simply get it from the desert door data. So our action Gator is almost ready for handling the A and I'm going to wrap everything inside of the blankets block so that I can catch theater in case the vehicle fails on getting there. I'm going to simply console log the other. You're going to do more stuff with it in the upcoming videos. But it's off now. I'm just going to cancel out the other. So now this looks good. Now let's create the reducer Action get is ready. It's time to create the reducer. So you're going to create a new file called S Dusk reducer dog. Jess, on the first thing that we do here is toe import, the task action type. So here gonna say, import a streak as task action tape from Don Section Date, and I'm going to want to define the initial state. So I want to say any shell task state it is going to be an object. And here I can say cast list as an M theory on finally going toe simply create the reducer function. So when I say const. Task producer calls for function on, we know that reducer has access to the state object on going to give it a default straight off initial dusted. And we know that the second argument is the action object. So we have their type and the Palazzo going toe day structure This on finally here going to add this which cases? So gonna say switch guests on the tape on the case will be task action type dot Get dusk on all of you need to do here is toe returned the new state's office. Well, I'm going to create the copy of the existing state and here I can say dust list equals to the payload that has been sent from the action. And finally, I'm going to basically export this reducer, so gonna say export default task Radusa. So I think we're done with setting up their task producer as well. In the next video, we're going to set up this store on. We're also going to defend the combined research so that we can, you know, combine this task producer along with orders to do so says well on. We're going to basically do the complete set of off the back story in the next video. But that's it for this particular video we have in this video created. They get task action, greater riches and is in Ghana's task. We have the action type defined in one file, which will be commonly used by the action as well as the reducer. In the next video, we're going to start up the drugstore inarguably act up, and we'll put all of this thing together to make it work. So thank you so much for watching this video. 18. Redux DevTools: Hello, everyone. In this particular video, we're going to set up the Redox store in our react application. So the first thing that I want you to do is to install the Redox devils for grown. So it's an extension. So if you look silly size for the devils chrome extension, then simply install it. I think I already have it installed. So once you started, you will see it over here. And if you basically inspect, then you will see the Redox, our tab over here. So currently we do not see anything or hear because we haven't set up the store in our react app. Once you start up the Redox story, you will see a bunch of things on it. So basically are debugging tool for your redox app on. You will see a lot off stuff over there, such as the application level state all your action fired all your mutations. You can go time travel debugging that is large, something that you condone, which are going to see in the this'll do as well as the upcoming videos. So the first thing I would do is to install a couple off packages for setting up data drugstore in our application. So I'll basically go to the court base going to open up a terminal and here going toe for several install daily attacks. Then I also want to install that critics. So this is a real expanding for the reactor. And I would like to also installed the Redox stunk because we're goingto make use off the think action creators on. I'll also installed one more packet switches redox their tools extension. So again, it's saying been packet, which helps you to connect your Redox application with the extension that you just installed. So going to install all of this on I'm even going to sort this popular package on the end being so that you can clearly understand war desert. So I will go to the end people here. So, as you can see, here is the package on. It basically helps you toe, you know, configure your application so that it works well with the developer tool that we just installed, which was the Redox developer tool, as you can see over here. So this is the package that allows you to work with same. If you don't use this package, then also you can work with the dogs developer tools, but you have to do some manual configuration. But I think I prefer to use this package only because it take cares off all the configuration required. So now let's go to the court base, as you can see, all the packages that installed. So here, inside of the store folder, I'm going to create a new file called us Index Georges on here. I'm going to basically configure the store. So the first thing that I'm gonna do is tow import something from the Redox itself on. I'm going to import the create store, which allows us to create this store. I'm also going to import the Tunc from Redox Tunc and I also need the apply middleware from the Redox. So gonna say apply middleware over here on. We're also going toe import My 30 Caldas composer doubles from their ducks. Death tolls extension packets are gonna say in port, um from deducts their goals extension on here. I'm going to simply say, compose with devils. I know here I'll say const store. It goes to cleared store. And as we know that, the first argument to the career score method is the producer function. So what I'm gonna do is I'm going to create a new file over here called us Root Producer George s. And here I am goingto basically combine all the producer using the combined reducer method so that we can have multiple producer all combined up in a single place and going to pass that. Did you sit over here? So here I am going to import something from Redox on days basically combined reduces and now here and basically say const introducer equals two. Come when you do, sir, On going to specify the name space for the task Producers of unnecessary task on here went to say task diese and going to import this task assessment on currently going toe export. They fold this particular to defer that set now extreme to important task producer. So when I say in Port Dansk, producer from task slash producer and finally I'm going to import this It'll do research inside of the index days. So here gonna say import, did you say from ongoing a positive to root producer and finally going toe passed this year to sit over here and now we know that The second argument to the create store function is the initial state do you want to give? But currently, since you are handling the initial state, are the fall straight that they reduce the level itself? I don't need to pass it from the create story, my thirties so going to specify un different over here. And finally I'm going to apply the story and answers which is composed of death tolls. On inside of this, I'm going to say apply middleware and going toe pastie. Thank middleware over here. So that's it. I think I said that was done on finally going to simply say, Export default store know what we'll do is finally take this store and configure in our reactor. So let's go to the index George's fate. And here I am going to first of all, import disturbed to hear, gonna say import stored from, and I can get it from the store for load itself on. I'll import one more thing from the reactively, Doc celebrity. So here I'm going to say, import something from react Redox and what I want to import is the provider. So I'm going to import the porter over here so finally going to wrap this application with the provider company. So going toe, Move this over here, Onda here unit So basically passed this store So here gonna say store on going to pass this store as a prop to the provided a company That's it. So let me see this. Let's go to the browser and take what happens. So currently we are getting error. It says the producer task done undefined during this litigation. If the straight past with the producer is undefined, you must explicitly redone the initial state. So let's take our house producer. So I guess we forgot to actively for it case over here. So when I say default, I'm going to basically return the state. That's it. Let me see of this. Let's go to the browser. And as you can see, everything works now and you will see that in sort off your addict devils. You will see the information about your application. So is again see if I go to these state tab over here that I can see that currently the application level state only has one thing with this task which has a price list as an empty area on. You can view this in multiple view. You can view it in the three view. You can also view this state in the chart form, and you can also view this in the raw perspective. So as you can see, here is our global single object state. Inside of this, we have this task name space which will hold all the task later straight and currently the test list is empty. So that's it for setting up the Redox store. Inside off your react application as well is conferring with the production levels. And in the queen, widows were going toe work on application on were also further going toe work on the deductibles as well to check and they would be application level state. So you guys, that's it for the set up on. I hope you were able to follow along. And thank you so much for watching this video 19. Dispatch Get Task Action: Hello, everyone on in this particular video, we're going to work on dispatching the get task action so that whenever the action is dispatched, it is going to make any Baycol to artisans that were going to get the list off task on it is going to set the task to the deduct store on. We're not going to display the least off task as off now in this video, but in the next week, we're going to do so. But the purpose of this video is to just fire the action from our competent. So currently we only have the header component. So let's make a competent wherein we want toe list the task over here. So I'm just going to go to the court base and here, instead of the components going to create a new file called US list Task Gorges on here. Going to say RFC tab to create the functional component on what we want to do is as soon as this component is loaded, we want to dispatch an action right so displaced the action from the functional component. I'm going to make it off the use dispatch hook, given my very accurate X liberally. So here Gonna say import from the typhoon notebooks on what I want to import is the use dispatch. And here I'm going to say const dispatch on going to here, So use dispatch. Now, if you work with the older react, then you might have seen that with the closet is competent. The way to despatch connection was to use the map dispatched to props with the help off connect higher order companies. But now, since we're using the react hooks, we're going to use this new approach, which is to use the use dispatch hook from the critics. Nobody specialty action. As soon as this component is loaded, I'm going to make this offer hope called as use effect, which comes from react. So going to imported over here when I say use effect on here, I'm going toe basically defined the use effect. So use effect basically takes the callback very new gun, right? Your logic and the values afraid works is that used effects for so far. It takes the call because the first argument and in the second argument you can find their dependency. Ari, If you do not defined this dependence theory, then your use effect called Big is going to run for indefinite amount of time. If you define the dependency areas are empty than it is going toe only run for the first time. That means this called back is only going to run when you're component is loaded. And if you want to run this call back again and again when some value changes, then you can define those value Insert off this. So currently we want toe around this call back on leaving the component is loaded. So this is what we have set up on the since we're using the react hoax. Hence we're basically using the use effect on again. If you're work with the previous version of the React, you must have used the lifecycle hooks for the same purpose which was component read amount on. All those lifecycle mentors are no longer available with the functional component. So now let's move on on basically the logic to disperse the action. So here I am going to call a function called us get past list, which I'm going to defend in this competent on here, I'm going to define this particular functions are gonna say const get us list. It is going to be a function on inside of this. I'm going to simply dispatch connection. Let me import the action from the store. So gonna say import from store slash asked slash Dansk action. And what I want to import is the get dusk action created on going to call this action creator from this dispatch matter, that's it. So the way it is going to work as soon as your component is loaded, use effect is going to run. It is going to call this function on dysfunction is going to finally displaced the action which will go to your action created over here. And finally, I'll include this competent instead of the Abdo urges. So here gonna say import list Tusk from component slash list Tusk on Dhere Going to say, Let's task. So let me see this. Let's go to the browser now and the fresh. And if I open up the developer console and if I go to the Redox step, if you go to the state on, you will see that your gridlock store has the list off house. He was just coming from the a p endpoint on even If you want to take the baby quest, just go to the network tab and under the exits are you will find it. So if I refresh this, then as you can see here is the a B a call made by the action creator on this is the end point on. This is the response that we got from our Jason server on as soon as we got the sponsored by into the producer and basically obliterate this state right? And let's try to update something in the people Dodgers and file Onda fresh the up. And let's see if we get that new item here in our Redox store. So here, going to go to their deep gorges and file on going to add one more item on I'll keep The idea of this item is for on further title. I'll say according going to save this, let's go to the browser on going to the fresh. And if I go to the state on, go over here then. As you can see, we have this new task President over here. So you guys that should for this particular video. Andi, I hope you were able to understand how to dispatch an action from your competent using the use dispatch hook. And that's it for this particular video. I hope you were able to follow along. And thank you so much for watching this video. 20. List task: useSelector Hook: Hello, everyone on in this particular video we're going toe display the list off task from a Redox store toe a list task component. So let me show you the u Y that I warned for the list us component. So basically, go to the React board step competent, based liberally website. You're going to go to the get started and if I go to the competent and he really go to the list group So this is the kind off list there that warned. But what I also want is action to the right or some action returned to the right, which we're going to use in the upcoming videos. But currently there is no example with the action button at the right. So I'm going to go to the would save upside again. This is ah, generic would have upside. And this is a react specific component based library books have upside so going to the generic books have upside on here. I will go to the components And if I go to the list group over here, let me show you Onda, let me show you the example I warrant I think it is with the badges if you click over here with the badges, this is what I want. So going to simply copies. So I'm just going to simply copy this on. I'm going to go to the list task component and here I'm going to basically return this particular chord. So that may see if this is going to fix it over here on over here as well. So let me say this. That's cool. But the browser and see, How does it look? Let me refresh. So as you can see, this is how it looks. Let me close this up. So this is how it is looking on. I think we have some having the concert. Let's check. So it says invalid property class. So always remember that in sort of defect, you always use the class name instead of class. So going to go over here on going to replace all this class with the class name on, going to simply click on this So it is going to replace it every place on If I've been able to go back to the closer then as you can see, the editor is gone. Now what I would like to do is to basically fix this size off the list Guard item. Currently it is taking forward. So I'm going to basically make use off the container. So let me just show you over here. So if you basically go to the layout on, go to the grid. And as you can see, this is how you can basically make it off the container with the help of container. Your content is only going to expand on Lee to a certain limit. Not more than that. So going to simply copy this container, let's go to the court based pasted over here. So instead of death, I'm going to wrap this inside of the container on. I'll also important a container from the backboard, strips of import from react hyphen would step on. I want to basically importante containers. So let me see this. Let's go to the browser and see How does it look now? So as you can see, this is how it looks. Now. Our content is not taking full 100% with it is only getting expanded to a certain level. Only Andi, I would like to also make use of the row in the column so that we can I just this ice if you want for this particular list item. So going to go with here on going toe here, say a little. And instead of this, I'm going toe have the column on. I'm going to import boat off this again from the worship levity. So gonna settle. And I also need the column as well. On here, inside of the column. I'm going to pace the whole country. So that assembly copy this on going toe pestered over here, Going to simply save this on for dear. Oh, I'm going to give it a class name off, justify content center. So when I say justify content center on, I would like to also give it a margin top off to since it is a sticking to the header. So you're gonna say class name? It will go empty, which stands for margin top. And I would like to give it toe. Select me. Say this. Let's go to the browser like many fresh. So as you can see No, it is not sticked. I can give it a more Martin so that we have more space. Let me say this. Let's go to the browser. So as you can see now, it looks good. So I think are you is almost ready. Now what you do is I'm going to get the list item from the Redox stroke on going toe basically displayed over here. So let's see, How can you basically get the data from the Redox store? So let's go to the court base on Dhere in the list. Task competent. I'm going to make yourself another hook called Less use selector, which comes from the egg products. And again, if you have used the previous version of the react with the classmates competent, you must have used the map straight to props. So this you selector is equivalent to the map straight to props that we had in the previous was enough react so you can see that it is a complete replacement off the connect her component that you had a year toe Get this store state as well as displaced the action. So they use dispatch and the use electors are a complete replacement for the same. No, I'm going to make use of the U selector hook. So here gonna say use selector now use Elector basically takes the function as an argument which has access to the state object. And here you can basically get any date other do you want from the store state and this state objectively present the single object tree off your redox state. So here gonna say state dot the name space that you have defending the commander deserves. So let me go here. So since we want to access the task state for so little specificity, task over here ST dot task And then I can access any state off their task. So let's suppose I want to access the dust list. So here, going to simply say dot task list, that's it. And I'm going to assign it to a constant. So you're gonna say const Basque list selector and I person like to add the selector keyword on all off my selector level variable because while walking on the court, it clearly tells me that this particular thing is a selector neither. It's a local street, nor it is a class level variable. So I'm just going to save this ongoing two majors off this particular list Toe despaired over here. So instead of having the city pitted, l I I'm just going to have one single ally on here. I can simply say lastly, selected dot map on in the generation, I'm going to have access to the task object, and I'm going to basically return some day six, which is this So going to pay is this thing over here and I'm going to make this text dynamic. So here gonna say task dot title So let me see this. Let's go to the presidency. How does it look like? Very fresh. So as you can see now, I'm getting all the data dynamically from the Redox store state Right on. As you can see, here is our store shirt and were able to get this over here on. One more interesting thing is that whenever the store status changed So let's suppose somewhere from the application action guard fired on a new items added over here in the list. So you will automatically get this new list inside off the use selector so you don't have to check anything. It is ultimately going to be abraded as protesting just inside of this story. So this is how you basically do it on when we're improvement. I would like to do in terms of you selected is that you can clearly see that here you can do any sort of transformation is Well, let's suppose I can hear, you know, right, the logic toe return on Lee the list off Heidi instead off the whole object so I can return the task list. I d only because I can't do anything over here. So what I would like to do is I like to create the selectors, or you can say this logic for the selectors in a separate file. So I'll basically goto this task folder, create a new file Caldas task Selector, Dodgers and I'm going to simply say, export guns on here, going to say Dutch list and I'm going to simply copy this thing from here on going toe. Hastert, over here. That's it. And now I'm going to be silly goto the lest us competent going to import the file, which is task selector on here. Going to simply say, does list that certain and going to pass this popular dust list here instead of the u selector. So I'm basically passing the reference off the function which I have defined here in the test list. So now all my selector can go over here. I can write the custom logic for the same on. Let's suppose I want to go fetch the list off Task I D. Only I can just write one sector for it on. I do not have to repeat that logic into multiple components. All I have to do is to their friends, this task selector over here in the U selector. That's it. So you can clearly see the ad Wantage off moving your court toe, the subjects electrified. Now let me see this and achieve everything. Works correctly, select really fresh. So as you can see, everything is working just fine. But I think we have some matter in the console, so let's go over there. So it says each child analyst should have a unique key. Prop on it is basically happening in the list Task Door Js file Online number 26 Allergic over there. So this is where it is happening. So the thing in the reactors that whenever you map over any list and you try to return a J six, you have to pass a unique key prop to your child element over here. So here, going to say key on going to pass the unique I D. Which is tasked not I d So going to save this? Let's go to the browser and the fresh. So, as you can see now, the area is gone. Now, I would like to update one last thing over here, which is to show or delete icon over here instead of this particular badge and to show the icon I'm going to make use off the foreign. Awesome. So let me just show you. So just visit this form dozen, and once you visit, just click on start for free on you might require to logging over here, it might say logging to continue, so I'm already logged in. So once you log in, you will see your kids over here. So I'm just going to click on view. All kids on going toe click on it. So this is the final script that you want to basically copy on this is going toe. Make deformed available. Insert off your applications so simply copy this on garbage record base on go to your public folders goto the indexed artist email and just simply paste the form. Does a mural over here with this cryptic. So the space this on, Let's go to the browser on. What I'll do is I'll basically try to search for and I can on I think, for the bill it I can I will need the trash, Aiken. So let me simply search for it. So when assaults for trash. So as you can see, here it is. I'm going to simply click on this toe, copy the Esteem Accord, and now we'll go to the court base on. I'll go to the list us competent on instead, off this Spahn, I'm going to simply add this. So let me say this. Let's go to the browser and see if we get regulate. I cannot not. So, as you can see, we are getting the deal. It I can. And again we're getting this warning because we are not using the class name. So just go away here on make this class name. Let me save these. Let's go to the browser. And as you can see, it is working fine on one last thing I would like to do in terms off this daily like a new way is to wrap it in sort of Holberton. So first off, we're going to import the Burton from the Jack boot straps. So when I say Burton on, I'm going to go over here on here, going to simply say, Burton on going toe moved The icon in sort of department on would like to add some properties to depart on, such as size we call to thee small. Then for the variant, I'm going to simply say our plane half in danger. Onda, you had this looks good. Let me say this. Let's go to the browser and check. So, as you can see, this is how it looks on. If you want to explore more types off Britain that at present in the reactor footsteps and legal to the components, go to the Britons and you will see all sorts off Burton variants that you can use so you can explore this documentation. So you guys, that's it for this particular video. In this particular video, we have successfully listed the list off item from the Redox store State on Yeah, there. Check for this project video. I hope you were able to follow along and thank you so much for watching this video 21. Get Task Loader State: Hello. Everyone in this particular video we're going to implement in order, which is going to show that the task list is loading until it is loaded. So if I basically the fresh, then you will see that there is some sort of delay after which they cast list appear. And let me want try to make this case even more clear by dealing the response. So here, going to goto the action greater on instead, off dispatching the action right away. Let's assume that your recent, you know, school takes around three seconds to get the data from the server. So I'm just going to mimic that so that we can understand the importance off loader. So here gonna simply say, set them out on what I know is I'm goingto dispatch the action after three seconds. So let me see if this let's go to the Broza under fresh. Now you will see that 43 seconds nothing happens. And then the list off our task appear over here. So by the time they appeared over here, we want to show the Lord er so let's see, How can we do it? So the best way to do this is to basically have ah, state by which we can tell that they're task are lording. So no, let's implement this on the way it is going to work. Is that initially I'm going toe set are loading indicator in sort of the Tusk state on initially El Cerrito falls and then it will be called the action created. I'm going to dispatch an action before making any vehicle tow the pace of work. I'm going to dispatch an action Caldas, Get task begins on it is going to set the loading indicator toe true once I got the response. Then after this, I'm going to dispatch another action called us Get thus success, which is going to start it too falls on in case if there is some failure, that means this court block is going to go in sort of the catch block. If this Baycol fails in that case, I'm going to dispassion Action Caldas, get task failure on again. I'm going to set that loading indicator toe falls. So this is how we're going toe manage the loading indicator and it stayed. So let's try to implement this on. This is a very common pattern that is being followed in the community now for Civil Im Window defined some new action type over here. So let's go over here now. As we discussed, we want tohave three action type, which is get task begins, get us success and get task failure. So let's implement died. So here gonna say get task begins on going to simply pissed it over here on going to have this on simply going to change this as a success goingto said it over here. Now I'm going to have failure over here. I'm going to set its value also, So we have erection type. Ready. Now let's go to the task action dot Js file. And here in this particular election creator before making the Baycol, I'm going to dispatch connection. So when I say dispatch, under type will be task action tape dart, get dusk begins. And now, once I have the result, I'm going to dispatch an action called as Get task success. On def, the EBI called feels. Then I'm going to again dispatch another action called us. Get us failure. So here gonna say get underscored, Ask underscore failure. Now let's see what changes do we need to do inside of the reducer. So let's go to the reducer file. Andi here in the initial state, I'm going to simply say get ask lording two falls on inside of this switch case, The first case that I won't go handle is the Get dusk Begin. So I'm just going to copy this on Dhere. I'll handle the get dusk begins on. All I'll do is simply said this loading too true. Next, I'm going to handle the get Basque success on in sort of the success. We're just setting the tusks list to payload on. We're also going to set the get US loading toe falls. Since we have the desert available on guest, there is some failure. Let me this. Copy this. In case we have any a B called failure, I'm going to set the get us loading two falls again. So I hope this makes sense. First of all, we are setting the loading toe. True. If there is success or failure, we're setting the loading toe falls on. Finally, I'm going to create a select a risible which I'll use in sort of the competent. So here, going to create another selector on Dhere. I can simply say get task lording over here on going to export this matter as well. That's it. Now let's go to the What do you say? The list Tusk on here. I'm going to make use off another you selector on this time. First of all, I'm going to import the get task loading selector from here. It was going to pass it over here on Dhere. Gonna say get task loading selected right on Dhere Just for the sake off showing you here instead of the H one. Initially, I'm going toe show lording triple dark and I want to show this only when the get task loading selector is true. So going toe simply say it like this going toe are the condition and that's it. So if this is false, this is not going to get executed. So let me say this. Let's go to the browser on Let me refresh. So as you can see with this lording over here and after three second, that loading text is gone. And if we have a look at insert off our store state, then as you can see, I have this Get that's loading set to falls over here. Here we have the test list on here. We have the get house loading Seto falls. So let make in the first days so that you can see how it's implemented. So this gives about that. Use that experience hard to the customers who are using your app on. Now. What I'll do is insert off this actually, tag, I'm going to actually show the law order. So I'll go to the Edwards upside and here I'm going to search for the spinners. So here is the Spinner and now I'm going to simply copy this. Scored for the spinner on going to go to the court base on going toe pasted over here on would like to import this spinner from the react. Bootstrap. So gonna say spinner, save this leg school to the blows. Urgency. So, as you can see now, we have this Spin it over here on although it is not currently aligned at the center of the plate. So let's make it at the center. So I'm going to give this particular spin in a special class name off base hyphen in order on going to create this class name ceases inside off here in the index sources as well. So when I say dot page Eiffel Order and here gonna say position as fixed Sylvanus a fixed, then I'll say top position as 45% off the screen on from left, 45% save this large school to the browser on Let's signal if I refresh this No, As you can see, it is appearing here in the center and it looks really good. So this gives a good experience to the user. And now I would like to remove the force delay that I added in sort of a task action just to demonstrate you. So going to remove this? I'm going to remove this as well, going to save this large school that the browser let me refresh. So you will see that the spin it appears for microseconds because we are getting the response quite fast. So I guess that's it for this particular video. I hope you were able to follow along. And thank you so much for watching this video 22. Redux Logger: Hello, everyone on in this particular video, we're going to install the Redox Lager middleware on. It's a basically middleware that will log your action to the console. So it's quite handy as well. So let me show you the packets that we want to install. So it is predict Slager. So, as you can see, this is the kind off logs that you're going to get on the console. Once you were there, it exploded on one important thing. Toe note here is that Redox Slager must be the last middleware in the chain. But that was it will log it tongue can promise not the extra election. So just you need to take care of this. So let's go to the court base on First of all, I'm goingto say npm install Redox high Funny longer on by the time it is installing, let's go to the browser and check what we need to do to configure this. So, first of all, we need to basically import the create longer method from the Redox Slager Surgical to the court base on Dhere in sort of the store index door Js file I'm going toe base the imports treatment over here. And now we're going to basically use this ongoing tau Bay street over here. So gonna say constant over equal to create longer. And you can pass some custom configuration over here, which we're going to do soon. But itself. No, I'm just going to keep it as it is and finally going to posit longer in the a playmate. Deliver on. We're passing it as the last one in this Middle Virgin. So always remember, toe put this longer as a last middle. Where to your list off. Merrill wears over here in the apply middleware function. So let me say this on let's school to the closer on. I'll basically the fresh this then, As you can see, here is the logs that we started getting a sport. The action fired by your application so we can see that forced the get task begins Guard fired on here you can expand and see the previous state and the next state that got a belated After fighting the section on, we can also see the get tough success got fired. Once we guard the response back from the a p a server. So as you can see here. The test list was empty. On the next date, we see the four Adam insert off this list. And if we talk about the ghettos, begin, the loading was falls. And instead of the next eight, we haven't loading as true. No. One more thing I would like to upgrade here is there? If you observe carefully, leave anywhere. I start the application. This particular thing is already expanded. Right? So this action logs over here is already expanded. So once your application and grows bigger in size, you will have Lord off action being fired, and you will see Lord off logs over here. So what I would like to do is tow Have this action collapsed by default, so you can simply do this configuration quite easily. It's a little bit the quarter base and hearing the option, I'm going toe pass option called as collapsed on. Going to subject to True. So going to save this little did the browser and refresh again. So as you can see, the actions are beautiful collapsed on. If you want to see the details, then you can simply expand and see their details. So, you guys, that's it for the Redox Slager on. I hope you were able to follow along. And thank you so much for watching this video. 23. Toast UI: Hello, everyone on in this particular video, we're going to implement the toast insert off our application. Now we can use toast for various purpose, such as showing the success message as well as showing the error message. If there is any insert off your application. So currently, let's suppose outside What is down So going to stop this. And if I go over here on If I refresh, then let's see what happens. So now, as you can see, the Lord is completely gone, and we do not see any sort off better inside off here in the browser. So well, played it toast in such use cases where you have toe show some message to the user Now for showing the toast. I'm going to make itself a library called as react toast. If I So let me show you. The pain pays off this particular package. So here is the end pin page on. This is the kind off toast it shows. So let's install this going to simply say and Kim stole, react, justify going to open up the determinant on here. Going to say npm install, react, justify on meaning to do some configuration. So The first thing that we need to do is to import the package as unless it ceases on. We need to confiscate it like this and you can pass some custom configuration in this particular method. So let me simply copy this. Going to go to the court base on going to the index dot Js file on going toe based this two lens over here and now I'm going to basically copy this as well on going to go to the court base on Dhere Going to conflict there. So gonna say those drug configure. Andi as we discussed that we can pass some custom confusion over here, so I'm going to pass a confirmation called as or to close. So here you can pass the milliseconds by which your ghost is going to close automatically. And I'm going to set the articles as 1500 milliseconds. So there's enough live on 0.5 seconds. Now I'll basically goto the task action dot Js file on Dhere Going to import the toast from the react Justify so gonna say import from react iPhone post if I and what I want is the ghost itself. No. Here in the catch block. I'm going to say toast. Dort headed. So this is going toe Show the toasting red color on If you do toaster dart success, it is going toe Show your toast in the green color. So here gonna say those order since it's an edit. So gonna say edit dot message So now let me say this let school but the browser Let's try this again. I'm going to refresh it Let's see what happens. So as you can see, this is the kind off coast that appears on It looks quite nice actually on. It's really good for the user experiences. Well, so that's it for this particular video. We have conflict. The toast on would like to add one minor thing over here, since we are on this particular competent. If the task list is empty, then going to show a message over here called as That's less simply so going to go to the list. Does your Js file on Dhere going toe hurt? Another condition on Dhere? I'm going to simply say, inside of the each one, going to say task list empty and I want to show this as long as the Lord of this false. So I'm going to add the North Condition over here. And also, if the task list isn't big, so here gonna say, does list selected dot Length equals 20 So this is the condition that I have added. Now, let's save this. Let's go to the browser and test. So going to the fresh. And as you can see, we get the toast. As we list, we get the message over here, which only appears if the loading is true and the list is empty on. Now, let me try to start this Edward and then check. So you're gonna say and be Ember on a P a going to go to the browser and the fresh. So now we get the dessert properly. Circles. That's it for starting of the toast inside off our application. I hope you were able to follow along. And thank you so much for watching this video 24. Add Task : Action and Reducer: Hello, everyone on in this particular video we're going toe inclement The ad task action on its reducer Because we're going toe add the air to task functionality in the upcoming videos. So let's go to the court pace on. I'll go to the task action Dodgers fail on going to simply copies on going to Bay Street over here, going to update the name as at task. And here the first thing I would like to do is to fire the other Task begins action on. I would like to keep this pattern same as before, which is begins success and failure. I like to keep this particular pattern for all the A singleness creators so that I can handle the loading indicator properly. Now. The first thing that we need to do is to defend the action type. So let's go over here going toe. Copy this. Going to be straight over here on instead off. Get going to say, add on gonna do the same. In all the cases going toe based, the Herta's begin going to copy and paste the success and the failure so we have the action type ready now, in sort of the get past begins going toe fire. The ad does begins on here for the vehicle. I'm going toe hit the forced a p A. Since we're going toe, create the task in this produce Arabia on. We also need the task data which I'm going to receive as an argument toe this function. So when I say NASCAR data on going toe basically pass it over here on this is going to be a dead instead of the request body. And finally, once we have the response going to dispatch election called us Does success on going toe positivism dot data as a payload on in case of failure going to fire the action Caldas at dusk failure. Onda Yeah, that's it. I think our action created is ready. Now let's scored with the reducer. Not the first thing that I will go here is to copy All of this case is ongoing to pay street over here on going to define the loading indicator. Insert the state for editors. Savannah said, does lording on initially going toe started to falls and no, here I'll handle the air prospection. So here gonna say heard house begins. So here I want to say the head does loading toe troop when the task is success, I want to set the editors loading toe falls again and for the task list. I want to add the new item inside of the existing list. I don't want to replace the existing list, since we're adding a new item so going toe apparent to the existing list. So here gonna say, buddy on here, I'm going to spread over devalues their daughter present instead of the past list on going to add a new item, which is the payload itself inside of this list. So this is going to give me the new list, which has the new item there decided and finally for the hard task failure going, Toe said the editors loading toe falls again. So I think election and producer is ready on day. That's it for this particular video in the upcoming videos. We're going to implement the task functionality and doing on. Of course, we're going to use this action and reducers, so I hope you were able to follow along and thank you so much for watching this video 25. Add Task Form UI: Hello, everyone. And in this particular video, we're going to implement the task form you. So the way I want this to work is that we should have Ah, button over here at the top rate which says at the task when user clicks on that air task a model should pop up in sort of the model. We're going to have a form wherein user gonna entered a task name on user will also have. The choice is in the form off radio buttons to select whether they task is completed or pending. So let me, First of all, let the button over here at the top rate. And currently we do not even have the competent for the tasks. So let's create the competent. So going to go to the court based on here in the competent, going to create a new file called us Bhaskar Gorgeous. And you're gonna say RFC tab to create their functional based component on what I'm gonna do is I'm going to import the container from the react books trap. So when I say the act high fun, worse trouble here on what I want is the good dinner going to pass the container over here on inside of the container. I would like Toa have deal and the column on going to import them as well. But when the column on inside of the column going toe have overdone on, let's call it ID Dusk on going to import The button is well on finally going toe include this component in the AB dodges So going to simply copies on here gonna say at dusk, going toe name the competent Is that task on going toe? Add it over here. Let me see if this scoop of the barossa on the fresh so as you can see now we have the Spartan But currently it is strict to the header. So going toe, apply some margin. So gonna go to the air task on Dhere going toe are the class name off margin Top of Fife likeness If this so this looks good now Now we need to basically move this button to the right. So for that, I'm going to make it off the great system. So let me show you If you basically go to the woods, have upside on Goto the layout section on here You will see one off the example. Let me assure you. Says you can see here is the example where in this particular content is basically present at the rate on the weight that they do it is by providing the officer, and you can see the complete example over here. So going to copy it from here on going to based on the column. And now I would like to give it off Set off 10 columns on would like to give it a spawn off to save this. Let's go to the browser and see How does it look? Says you can see now we have burden on the right. And I would like to also have the Eiken so I can get it from the foreign Dawson. So if I hear on the form tossem search for the icon on going to search for the bless Aiken . So this is what I want going to simply copies on going to paste it over here. So going to say like this on insert off class, Gonna say last name on. But what I would like to also do is to give this Burton variant off secondary. So when a civilian equals toe secondary accuracy of this article that the browser and see, How does it look? So this is our new act. Ask button. Now on the click off this act as Britain. I want to open up the model. So let's see, How can we implement the model ey So going to go today? The experts have upside going to go to the components, going to go to the model on if you go over here in one of the examples, which is particular centered. So this is the kind off mortal I want. So going to copy the court for the same on going toe pasted over here on I lost him for D model from the React Books. Ships are gonna say mortal aunt here, I'm going to remove this props on this model basically takes the show prop which expects a 1,000,000,000 value. So if you make it false, this model is not going to show on. If you make it true, it is going to show. So I'm going to have a local straight in sort of this component toe trouble This will you. So let me make use off the you straight hook to define the local competent state. So here gonna say, const show model search show moral equals two. You stick on the initial value, I want to start it too falls. So the value straight works, is that it? First of all, it takes their default value that you want to assigned to the state. So we're passing it as falls on. It also gives you the function to set this date. So now I'm going to use this value over here. And it is another prop called us on hide. So going toe basically called the on hide function, which I'm going to define in the competent on Dhere going out simply say, const on hide equals to a function on inside of this I'm going to basically said the show model as falls. That's it. So let me say this on what I would like to Also, dough is toe Remove this props from here, so going to remove this instead gonna say basically called the on hide method that we have defined in sort of the competent. And now I'm going to add on click listener on this particular Burton toe toggle the show model value so that mortal appear whenever the user clicks on this Britain. So here, going toe hard on click on Dhere, going to simply say said show Martin. True, that's it. So going to save this, let's go to the browser and check like many fresh. And if I click on our task as again, see, the model is struggling and even if I click on this, clothes were done. As you can see, the model is closing. So now let's update the content of the model. What I want to show here is a form when his air can enter data. Last name on will give him a choice. Toe chose the tasks traitors between completed or pending. So let's go to the court base for the immortal heading Gonna say at dusk on currently going to remove all of this dummy body off the model. Let me see this. Now let's go to the react books have upset and I'm going to go to the forms. So this is the kind of feel we want. So going to copy this on? Let's go to the court base and here, going to define the form check, first of all, on going toe pace the form markup over here on going to import this form component from here. Now I'm going to remove this formed or text which is not required in start off in militarists. I'm going to say last name. Andi. I'll keep their type as text on the placeholder as and our task. Name on for the form Control early. Gonna say last name itself. Save this article to Broza. Go away here with a fresh click on our task. So as you can see now, we had this form. The only thing remaining is toe Give the user radio button choice to choose their tasks Traitors. But when the completed and pending So going to again go ahead on the backboards have upside . And if you basically search for the horizontal forms by clicking over here, then as you can see, this is the kind of choice I want to give to the user. So going to copy the court base off this particular U Y on going to pay street over here, going toe for my this now here, Going to say does fit us on the for the first radio button. I'm going to say the label as completed. I'm going to keep the name as task status on for the I d gonna see completed for the second Ed Overton. I'm going toe have the LaBella's pending. I know. I'm going to have the name Same Regista Streeters and for the idea, gonna say pending Onda, we do not need any other choice. Onda Fact, let me move this spending as the forced radio button on for depending going to say default checked drop because I want this value to be selected by default on board. I'll also do is to add something here at the farm level, which is to say, the order complete as off because I don't want the auto complex situation being appearing in the form. And we'll also say normally, date so that it is no estimate five elevation going on over here. So that received this. Let's go to the browser on going to the fresh. And if I click on a task hesitancy here are going into the last name. And here again, toggle between the task status now are you weighs almost ready at last. What would I like to do is to wear two buttons over here at the bottom one is cancel and when you submit So let's go over here on going toward another Burton so going to call this one as cancelled on going to keep the variant as danger on Dhere Going to say some mate on going to keep the variant as secondary. Let me say this nuts. Good closer and check says you can see this is how are you? I looks now. So I think are you is ready in the upcoming video. We are going to implement the task functionality. But I think that check for this particular video I hope you were able to follow along and thank you so much for watching this video. 26. Dispatch Add Task: Hello, everyone. And in this particular video, we're going to complete the task feature. So tell no, we have grated the way. Now what we want is that suppressive user and us Any task we hear, such as notables shopping on. Once he chose any off, the US senators would already be pending or completed. And once he submits this form, we should be able to get this, will you? I should be able to know worse that US name and I should be able to know what's the status so that I can send this data to the action. We're just going to make any pickle on save the date uncertain off our David artisan fight . So for tracking this form fields, I'm going to make it off the local component state using the you start hook. So let's go to the court base on here and say, const last name on this set Does name on initially developed off? This will be empty and I'll have another state for taking the really important. So you're gonna say const asks Do Does said, does street us ongoing do initially give the null as off? No. Now, first of all, Let's said the task name instead of the form control. So here is our farm control type equals text and this is where the user is going toe Enter the values. So as soon as the user enters their use on change, event is going to fire on insert off the on change even I'm going to pass and methodical Does handle task name change on going to defend this matter over here. So when I say const last name jeans equals one function and it is going to get the event object as an argument on you're going to simply console August off now he door target in order value on. I'll also passed the value over here. So when I have a look, it could do this local state which is last name only now here for the radio button change protection here on the form group level, I'm going toe apply an event again called us on change on going toe past the difference off the function. So let's call the function name is handled the radio change so again, going to make this matter over here Const handled reluctant equals to one function. It is going toe received the event object as an argument on Dhere. Going toe console log even dot Not a great nor the value on this is just event only. Let me say this. Let's go to the Broza. Let me refresh on. Open up their developer console. No, I'm going to clear up the console. Goto the air task? No, you find out anything over here such as shopping. As you can see, I'm getting the console log. But the values is not reflecting over here because we haven't updated the state. So let's go to the court base on Dhere instead of the handle last name change. I'm going to say said, last name on going to pass this way. Which is Igor Target North value. And as you know, we have a friends. The last name state over here is a value. So it will be reflected. And I'll do the same for the radio button is well, so here, going to say set tasks status on here. Going to say ee dot data gate dot value on when working, which is remaining, is to add the value for the load Importance. So if you secretly this we don't have any value. So you're going to say value equals toe pending. And for the next one, I'm going to say value equals toe. Suppose completed. So let me see if this now let's go to the browser. Let me refresh. Clear up the console. Open up the artist's model. First of alleged as the does name. So you find the shopping over here As you can see the values reflecting over here on. We also have the on jeans console log that we read it. Now if I switch this if us was the radio button, let's see what happens. As you can see soon as I switch on changes fired, which is giving me the value that we just define over here, which is this one, right? Because of radio buttons are always going toe have this topic values. Hence, we have defined this static values over here, but for the input, it is going to be dynamic in user, gonna enter anything, and we need to get that value. Hence, we have passed the local state for the value, but for the do it and it is always going to be static. So hence we have you know simply posit this spring over here for both of this. So now all of you need to do is that simply under click off the summit when it to get this toe values the force of their last names? I can. Is there trust traitors? So let's do it now. First of all, I'm going to remove the control log from both of dysfunction on going to go to the submit button on the submit button instead. Off calling on hide. I would like to hear, say, handle, submit. I'm going to make this function over here, so let's go over here. Const. Handled Summit equals to a function and let me console locked both the streets over here. Someone, a second soldered log, last name and the task straight us. So let me say this. Let's go to the browser fresh clear up the console. And if I click on their task on, let's suppose here I'm entering shopping and for the tasks traitors. I would like to keep it depending on if I click somebody over here, then we get this hoping, but the retinal for the task status, because we haven't changed the radio button yet. on what we have defined the initial state for their task staters. There's no so instead, off null. Let's call it spending. So this will be the initial default state for this tasks to does a letter. It was No, Let me say this. Clear up the console, Refresh the economy task. And no, if I enter shopping over here on already, as you consider the spending, If I click on submit, then I get depending. If I click on completed and submit, I get the shopping and completed. So now it's working completely Fine. Now all of you need to do is tow. Get this Tuvalu's on. Pass it to the ad task action, which is different over here, which is going toe added in sort of the legal Dodgers and filed by making in a vehicle. So here I'm going toe pass an object. So the task. So let's go. We're here. First of all, on the handles amid minute to handle a couple of things. First of all, Venuto Dispatch in action Andi alternate toe show the Lord er builder time. The action is running on efforts a success when it took closed, immortal and show their toast. It's done. And in case of failure, we do not want to close the model. We just want to show the Adamis is over here in the toast. And of course, minuto Hide this of middle order. So let's handle everything. Now I'll go to the good ways. The first thing I would need to dispatch the action is to get the use dispatch hook from the reactor latex library. So here gonna say in port from But the extra looks on I want the use dispatch. I would also need the use elector. So going to import that does well on dialect also import the action from the task action file. So let's go to the store does and the task action on now festival here. I'm going to say const dispatch equals to use this bet. And now here I can say dispatch on, I would like to say add dusk and here I am going to posit it as an object. So the first thing I'll pass is their title for the title. I can get it from last name on for is completed. I need to pass a bill in value now. Currently, we have the task status in string. So we have either pending or completed. So you're gonna simply say, if they saw us treat us is equal to Quito completed, then his computer is going to be true. Otherwise it is going to be falls. So I get the bullion value using this. So I hope this makes sense. No, What I would like to do is basically applied the overt keyword on their despite. So I need to make this function. You think on going to make it off the over. If you were, you were here since a credenza promise. So now what I can do is first of all, I can drive everything in sort of the wreckage block so that I can handle the other if there is any. So let's move this or with you on in case off edit, I work to simply console log the letters off now. I never did successfully toe show their toast message and close the model for the toast message. I'm going to show it here from the action itself. So here, going to say toast your success on here, I can see task. I did successfully. So this is my success Toast message, which is going to appear if everything works fine on I would like to also close the model. So you're gonna say set, show model falls. So I hope this makes sense. Now I think the handling off the loader is remaining on the submit button. So first of all, I'm going to add this spinner over here. So let's go to the some in Britain on Dhere. I'm going toe add this peanut bootstrap spinner competent someone else a spinner and I would like to give it the animation off. Border on would like to give the size as a small on. This should only appear as long as the task loading is true. So if you remember, in sort of the task producer, we have defined the state, which is a task loading. So don't get this state. I'm going to First of all the defendants, elector also So here, going to simply copy and paste this on, we need the past looting. So going to defend the selector? No, I'll go to the heart. Does George is finally going to get the selector on the Heroles Airtel selector on what I need is the air tells looting on here, Going toe. Simply say const task loading selector equals to use selector going to pass the test loading method over here. I'm going to use this value over here. Salute school with health on going toe Had the condition that showed this on live the dust loading selected is true. So saved this large school to the browser and a fresh let's try this now one. So one of the task Currently the Lord is no trains a little Brazilian for the task as reading books and we like to keep it here as spending if I could weaken Summit. As you can see, reading book is added over here they get the success Mrs Also And here we see the all the sequence infection that got fired using the Redox Slager on. Also, if you check inside off the debut Dodgers and file the news agency desserts added on the good part about digiscents that what is that? It automatically creates the new I d for your new item. So you don't have toe handle the idea manually. It automatically create Start on. If you go to the browser. Let's try this once again. So here let's suppose instead, off reading books, I would like to say on Let's to this Traitors has completely. If I click on submit, as you can see, it decided over here, like school to the court base. As you can see the title, this place board and is completely disprove because we chose the completed option from there. So it's working fine. No, let's suppose if our sororities don't so I'm going to stop DigiScents over on Lee the react subways running. And if I try to act, ask, let's see what happens. So going to simply say, uh, study on. If I submerge this, let's see, How are you? I behaves, I think the model. It should not be closed if there is a matter, because if you look at the court properly, if the action fails, then it is going toe and enter in sort of the catch block. It is not going to run. This, which is said, show marvellous falls. That means somehow it didn't enter instead of the catch block. That means we missed throwing the other from the addict abstractions while you goto this air test section a large stake so Yeah, if you look over here, we are not between the other. We're catching the other from here, but we're not doing it Started last. I'm going to hear, Say, throw that it. Let me say this on. I'll have to start. Digital said we're once again so that I can at least see the list off task So going to go to their terminal on here? Gonna say NPM run a p a. Let's go to the browser Now on the fresh As you can see, I get the list of tasks. I'm going to go back to terminal again and going to stop the Jason Server. Only DigiScents ever. Nor did he act one on here, going to go to the dusk on Let's try this once again. So I'm gonna say study on depending on basically gone submit. Distended model should not get closed. As you can see, the model is open on. We get the toast message. Because if you see over here, let me show you once again. If this fails, then it is going to directly enter in sort of the catch block. It is not going to run any court after the of it. So hence this sideshow model is set to false on event. This is success, so I hope this makes sense. Let me hurt this again with something else. Let's suppose best click on submit. As you can see, the model is not closed on. One little improvement I will look toward is to move the loader to the right side of the submit text. So we're going to go to the court base on If you're going toe, move it down. Let me see if this school blows up. Onda, Let's try toe tested once again. So, first of all, I need to start this at work to get the list off task. So going to say in Pemberton, e p a Going to the fresh I got the list off task going to stop this, Edward. Once again, let's go to the browser. Click on a task on Let's suppose I call it Has study once again, applicants of Mitt. As you can see, this looks much better now in terms off you y and finally alleged by the success case as well. So going toe start, these are once again going to go to the browser and if I click Corn summit now, As you can see, the task is that it successfully on If you go to the debut Georges and file then, as you can see, is completed this false. We have their title study and we also have the incriminated i. D. So our actors feature is no completely functional. One improvement that we can make is that whenever you click on a task, as you can see, these values are pre populated. So somehow Winnie Tauqir, the local state off the air, tells component when this model is closed. So let's go to the court base going to go to the dust or just file. And here I'm going toe create a function called us Clear State. So you're gonna say const clear state on. You can call this function from any place inside of your company on here gonna say said last name, toe and district on Also going toe said the ask students back to the spending. No, I need to call this function clear straight from two places. One is from on hide, which is run by never user closes the model s so you're going to simply say P estate on alternate to call this function when they form is submitted using the submit button. So here I need to call the clear Start again. So let me say this. Now let's go to the browser on the flesh. Now let's suppose if I enter the task name as they're supposed test one on if I click on submit, it is added on. No. If I open up the test model again, it should not have test one pre Populated says. You can see it's all empty. I can enter test over here, click on completed and again, I'm going to open up the model for the third time. It should be back to depending. It should not be completed next time. So when you click on Submit and now if I finally open for the third time, as you can see, the status is also back, depending again, and I can say test three. Click on submit. It works just fine. So the guys are test. Task is working and when properly on, that's it. I hope you were able to follow along and thank you so much for watching this video 27. Update/Improve Task List UI: Hello, everyone. And in this particular video, we're going to update the way off the list task. We want to make you a such that users easily knows which task are completed and which task . Depending for the completed task. I would like to show their task in green color on For depending to us. I would like to show them in red color with the green color. I'll also have the text decoration, which is lying through which we're going to see. So let's go to the court base on Nile, basically, go to the list us competent. And here in this particular class name, I'm going to apply some dynamic classes. So the first thing that I do here is to move this in sort of the back ticks. So going to hear, say back takes on this thing Now I would like to wear two classes depending on the status off their task. If it is completed, I want to add a class name called us Task hyphen completed. If the task is spending, I would like to add the class name as task iPhone pending. So here, going to make it off temporary little on. I'm going to apply the class dynamically. So gonna say task Dark is completed. If this is true, then I want to apply the class name as task hyphen completed. Otherwise, I would like to apply the class name as task hyphen pending. No, let's at this year's is for this to class, So I'll go to the index that assesses going toe defined this class over here for the completed. I would like to add the Calaveras Green, and I would like to add the text decoration as lying through on for the task pending. Does Cliff Unbending Class? I would like to add dick color as red, so let's see. How does it look going to fake this? Let's go to the browser fresh. So as you can see now, it's a bit more clear to the user that this task is spending. This one is spending This is done. This is also done. So this makes are you a look more intuitive on? I think that's it for this particular video. I hope you were able to follow along and thank you so much for watching this video 28. Delete Task Feature: Hello, everyone. And in this particular video we're going to implement the direct ask feature. So the first thing that we need is the dilate action and producer salute school with the cord waists. I'll go to the action on before you would defend the action. There's defined the action tape. So here, going toe, copy this ongoing Tau Bay Street over here, I'm going to say Did it does begins then Bilic does success on that last little as failure . So going to copy this invested over here. Now let's go to their task action going toe, Copy this one on Mr Door here on for the name of the action answered Deal it task on as an argument. I'm going to receive the task I d because that's what I need on dhere it beginning. I'm going to dispatch an action called as deal. It does begins and here for the day I'm going to hit the delay. Tapia and I had only two positive payload over here. I just need to pass the I d in the part parameter. So if you're going toe makes off the temporal little on going to pass the ideo here and finally going to disperse Connection called us daily task success and in case of failure, I'm going to say daily task failure. And now let's go to the task re Lisa on Dhere going toe, corporate this. I'm going toe face to them over here. No, you're gonna say Delic task begins on going to set the loading indicated residents. So when I say they let dusk lording initially gonna started to falls on going to copy this on in their Doolittle's begins going to set this to true and in gets off the little success let me first off or are defined action type. So it is the latest success on going to set the loading two falls on in, gets off daily task failure going to start This too falls again. You know, in case off success, I actually need to remove a particular item from the list off task. So I need to know which task it is dilated and accordingly, I'll delete the task item from the list. So I'm going to go to the action on Dhere in the payload, going to simply pass the i d that I received as an argument over here and now will receive this idea in the payload state dart cast list dot filter. I'm going to make soft, different function. And what filter function do is that it really treat over the list, and depending on the condition which will give alert to either true or false, it is going to add or neglect adding to the newer because this freighter function will return you a new era and it is going to add the item on the basis of condition that define So here I am going to receive the task in Egypt aeration and here I can set us dot i d not equal to the payload. So what I'm here doing is filtering over the existing touch list. And I only want those task in the new list whose idea is not equal to the dilated I d. So if you remember, we're passing the related. I'd in the payload, and I'm just taking If the task ready is not equal to the bill, it'd idea that's it, Onda, since we do not require the result over here going to simply remove this on going to save this. So I think direction and the reducer is ready now. Logical, but let's task. So here is the deal in Britain on I'm going to add on to little snot away here. So gonna say on click equals toe going to call a matter called as removed task which I'm going to define in this competent. So going to copy this, I think you're gonna say const removed us equals toe a function. And of course, I'll pass the task from here. So gonna say hold task object which we had it reading over here on will receive their task as an argument over here. No, I need to finally dispatch the action. So let me get the the lift, our section from here. And I'll also defined the selector for the deal it excluding So going to copy this on the street over here on here Gonna say they lit, ask lording and let me actually cooperate from reducer so that we do not do any spelling mystic going to be stirred over here on going to paste it here as well. Now, your buddy list task on here going to get the daily task loading selector and finally going to users over here. So when I say billet dusk lording selective equals to use selector and going to positive daily task loading. So I hope this makes sense. Onda here. I'm going to dispatch an action. So another dispatch on going to say the late task And I would like to just positive task, God idea over here. So no. Till that time, this the lip task loading is true. I want to show the loader over here in the this particular Burton. So I'm going to make yourself a spin it on. We can copy the spinner from the task model. So let me go to the air test, Georges. And I think we heard a spin over here right beside this summer next. So going to copy this? Going to go over here on going toe, Mr Door here and now I'm going to conditionally show despair. So here, I'm going to say, as long as they're delayed, task loading selector is true. Then only show this spinner. Let me say this. Let's go to the browser and test. I'm going to the fresh now. Let's try toe the lady test three Tusk. Let's see what happens. So if I click on this As you can see, task is deleted on. We have this action longer over here in the console, so first dilettantes begins rent on. Then they elect us successful in on Let's check inside off the debate Georgeson file. As you can see, we no longer have the test three on, I think, when it adopted the success message. So I think related was showing task. I did successfully. Let's go to the section Dark justified. No hearing start off added. I'm going to say the lead it successfully alerts of this. Let's go to the browser and try this again. I'm going to know delete the test to So it's his stars deleted successfully. As you can see on one thing, if you observe carefully if I delete any task, this penury is showing on all the buttons. So let me one try to show you clearly by stopping this other one. Go to the browser and in fact we can feel it over here. Let's see what happens. As you can see, the spinner is appearing on all the Burtons. So this is happening because we have not applied any sort of condition, like on which particular task item. This has been a short appear since we are simply mapping over the list off task on since we have multiple buttons for each tusk. So it is showing the multiple spin it as well because there's how we have defended over here. So somehow we need to know which task ideas getting removed and only showed this. Spin it on that particular task I d. So far having track off the diligent task, Heidi, I'm going to make it off the local state using you straight hook. So here, going toe first ofall import the your straight hook and no here gonna say const the lit das Katie said billet Oscar de on going to make up the U Street hook over here on for the initial value going to pass. Not now. As soon as the remove caskets cold, I'm going to say set daily task i d as fast dot i d So now we know that if I never we click on the little Britain, we do have the task I d in sort of this state or landed to do is to apply a condition over here. So I'm going to hear, say not only show the spin it when the they let us loading selector is true, but also I'm going to add one more condition and you're gonna say if they ask the IndyCar integration if the idea off the task in the current attrition is equals to the deleted task 80 then only show despair. So I hope this makes sense. So let me say this and let's go to the browser and check. So first of all, I'm going to start digiscents ever so that at least we see the list off Tusk. So gonna say in Pemberton, e p a going to go to the browser and the fresh. As you can see, we have list off Tusk and now I'm going to against stop this over so that we can clearly see the loader. Let's go to the browser again. And if I try to delete the task one this time the spinner should only appear on this Britain, not on all departments. So if I delete this hesitancy, this spin, it is only appearing over here and let's see what happens. So as you can see as soon as we got the message spin, it is also gone so it works perfectly fine. And I think our daily task functionality is complete. Let's write really did us one last time since we have added the new condition going to start this all over again, going to go with the browser going to the fresh. No need for Dulic. Test one, as you can see, has really could successfully lorded only appears on that particular task on the task item is gone. So that's it. I hope you were able to follow along and thank you so much for watching this video. 29. Modify/Update Task Status feature: Hello, everyone. And in this particular video, we're going toe implement the update task status functionality. So the way I would like to implement in terms off us that I'll have a check button over here. Andi, this check button is only going to appear on those task which are pending. So all this the red color task which are pending you will have a check button. If you click on their check burden. This traitor's off. This task will be changed to completed. So we lead the first of election in the duties of for the same. So let's start by doing that. So I will go to the task action they first on Dhere going to define the action. Tiefest fall on instead off billet here going to say update Dusk begins. I know you're going to say update does success and it lost Gonna say abject Ask failure. Now let's go to the task action And here going to copy this one ongoing Tau Bay Street Over here. Now here. I'm going to say update dusk and I will receive the whole task data which needs to be updated initially, I'm going to fire the abject us begins. The important that I want to fire is off type astray, tippy put since its Abdu Tapia on here. Of course, I need to pass the i d. So I can get it from past data dot i d and I also need to send the payload going toe pass it over here so this will be added to the request body and I need to get the dessert as well and going to pass this desert or data in sort of the payload. So this is a real contained the updated task object. And of course, here we need to pass the update task, success and in case of failure, gonna say update task failure on for the success message, we can say task updated successfully. I hope this makes sense. Now let's go up to the task producer on here. Going toe Copy this. Cases on going toe festered over here, so we'll start with the update. Task begins. We find the loader for the abject task. So Canosa bit Basque lording, goingto started to false initially. Copy this. Let's come to the object does begin. So as soon as this is fired, I'm going to set the loading to truth. No will handle the object. Ask success scenario. First of all, going toe said the loading two falls on for the past list. What we need to do when it toe at the updated item inside off the list. So there will be no new addition Nora removal, since it's an update on an existing item. So let's suppose initially there were five items you need to keep. Only those favor time. But the one item on whatever you have operated, it's took upgraded in this store straight as well. So here what we can do is, since we're passing the update result in the payload, we will have it available over here so we can simply trade over the past list on check. If they task, i d is equal to the payload. I d. If that's the case, then passed the payload in the new or other ways past the task object only. So here, going to update the logic. So here Now I'm going to simply say, state dark dust list dot map in easy attrition. I'm going to receive your task object, and here I can check If they does dot I D is a call to the The Lord, not I d. So if this is the case, then simply return d payload other ways here it on the task object. So I hope this makes sense. We are checking that if the current task, which is in the attrition, has the same i d. As the updated task. If that's the case when it passed the payload, tow the newer instead off the task. Because this payload has the updated object, which is returned from here. So I hope this makes sense. Andi, as we said, the loading to fall. So that's fine now finally going to handle the abject failure on going to set the loading two falls again. So I hope this makes sense. So our action and reducers already. Now let's head over to the list task gorgeous. The first thing we can do is to grab the action, which is public dusk. We'll also defined this electric for the loading since we'll need that going to copy paste over here. Let's score to the task Didiza going to get the object us loading from here, arrested over here, pasted over here that's going to the list task Dodgers filed going to import the update US loading over here on Let me define the selected over here. So gonna say update Does secluding on going to simply here also say object US loading selector. So just like we had to keep the track off village task I d Just to show the Lord er on that specific item similarly, will need to show the Lord er on a specific item which is updated. So we'll need that also. So going to simply say update desk I d. Over here Gonna say update. That's cardi on Dhere. I can say sad Update NASCAR T Onda Let's go over here on Let's define the button on the click off its user is going toe update the task status on currently the way the U. S. Design is that this list atom should only have two tiles so that this second child appears completely on the right side in start off a building somewhere in the middle. So I'm going to first of all, wrap this title inside of the spun on, going to wrap this button instead of the day on going to have another Britain just about this and as you can see now, this list item only has two child which both are at the same level North nested on Dhere for this button, I'm going toe simply. First of all, say F S F A check, Andi. Instead, off removed, Tusk will create another method called as update dusk status. So going to copy this on going to create a function we're gonna say const task status equals to the function. First of all, going to set the abducted task I d to the dusk object that very same from here. Gonna fight to the idea from the same on Dhere going to dispatch the action. So the action name is update Tusk on very to pass the object Ask object. So here, going to first of all, spread of it the existing task data on all 18 is the is completed property on. I'm gonna set it to true. So I hope this makes sense. Now let's go over here On first of all, let's tried toe see how the u I looks like Then we'll make for the changes. So when did you first this? So it's even sicker in Lidice, Czech, Britain is showing on all the items, but I just want to show on those items which are pending on. We also need to have some spacing between this to Burton. And we'll also team, particularly as well. So let's go over here now. First awful for the vision. In straight off Oakland injured. I would like to hear, say, alkaline Secondary on for the Lord. Er, I'm going to say dead task loading selector on here In sort of the task ready, I would like to cite the object us, Katie. And finally, since we need this pacing, I'm going to add the class name on this Britain. So here gonna say class, name on. I'm gonna say margin left off. Let's supposed to like me. Save this. Let's see, How does it look now? So this looks much better on now. We have differentiating colors, will on a still, this Britain is still going on all the task. So let's add the condition for the same. So going to go to the court base on Dhere going toe at the condition that task Dart is completed is false, then only showed this particular J six so going toe based deejay six Over here, this particular condition will become true when the is complete. It is false. That means those tasks which are pending. So let me say this. Let's go to the browser. The flesh again. Now, as you concede, this button only appears on the pending items. You won't see it over here. You consider over here, over here and over here is well on knowledge. Tried to update any off the item and let's see if it works Fine. So let's suppose I'll try on this study item. So this is the last one it is spending. If I click on this, let's see what happens. As you can see, it says to us, Completed successfully now that check box is also gone on. As you can see earlier, it wasn't red. Now it has turned green because it is done on. If I goto the baby daughter Jason, then you will see that study has is completed as true. Right on. Let's also try to stop this over and let's see what how does are you? He behaves So here. Let's suppose I want to check the reading books. If I click on this peculiar item first of all the spin, it only appears on this item, so that's good. And we get the network edl on DA spin. It is also gone, so it is working completely. As expected. Let me start the subtle again. Let's school. The browser leads to the fresh. And now, if I click on this button, as you can see, it has turned green like me. Complete this as well. Complete this as well, so it's working perfectly fine, going to deal it deal. It also works fine as against he. Now let's try to add in your task. Let's suppose, um, lunch on that. It was a spending click on submit Hesitancy. It is added in red color. We have ah Burton toe mark this as done. If I do, it works. So you guys, that's it. We have completed our application on. I hope you were able to learn a lot off things using this application on. Thank you so much for watching this video 30. Time Travel Debugging: Hello, everyone on in this quick video, I want to talk about the time travel debugging. So if you remember in the previous videos we talked that rejects also provides you toe train travel inside of your app. So let's see, How can we do it? So if you see over here, all your actions get listed over here, such as get us begin, get the success. And as you who were on a particular action, what you can do is you can jump or skip this action. That means you can simply go toe on any action at any point off time and see how Europe looks. So let's suppose I can click on jump over here and as you can see, then this action waas are dispatched. This was this straight off my application now can exactly take what was this straight off my application on now, one side in divorce, something I can jump Osama direction on, then see the changes in the state. So this is how you can basically do it. And even if you click on this play button so it is going to play through each action fired step by step and going toe show you the changes that happened as a result off changes in the state. So this is a very, very powerful feature which is really going to help you in the bugging your application. So just wanted to give you a quick overview on the same on one more thing. I would like to choose that if you click on any particular election and if you go toe this tab, then you will exactly see what was their type of the action. Off course it is the spread over here, but here we will see the complete action object. So you will see the type on the payload that is sent to the reducer. If you click on this case does begin. As you can see, the only type will send. But instead of the get past success apart from the type the payload of was also sent to the producer. So there's no you can be book your application level state on like the action. What are they sending? What changes are going on even very well track everything. So I think they're checked for this quick video Just wanted to give you and working off the same on. Thank you so much for watching this video 31. SOURCE CODE: