[00:00:00] Hi and welcome back to the reactor cores in the sky. We're going to be learning how we can open and close the description. And typically I would do this in just pure HD mounts yes. But I think we should set up an auction introducers so we can further practice redux. So we're going to go to work to do this. And I typed it out but I just removed that. So so I could show you it. So if I go back here it's going to be gone. All right so no functionality so my code should be out where your code is this is all the same. Leaving off from left off from that last gate we were just on. So the way we can first do this is we need to give our fetch courses. Each one of these courses a open attribute. So go to your first off I'm just going to close off all my files except for the File. And so this file is indexed on Janzen actions so go to your indexed address and actions. And let's give this a value open or false because we want them to be closed when we open the app. So the next thing we want to do is create the action. So in our types let's create an action called Open course or let's call it Tabo course because we're not just going to be opening in Kabul description we're going to be opening and closing in. And when you type this out toggle description. OK so back in our index and our actions let's import this and then let's create a function for it. [00:01:48][107.8]
[00:01:49] So export function toggle description and we want it to take in a course because we need to know which one we are targeting. We now return type of toggle description and a payload of course again so we know which one to actually toggle when we click the arrow. So we have our actions set up and since we did that pretty fast let's go ahead and handle the reducer. So now we need a producer and our course dodge digests to that we can dispatch the action to. So when we say okay click on this like previously we have a we have an add button here and we're on clicking it to remove course and then it's going into our courses reducer here and it's saying hey Eichorst modify the state accordingly and then return. So we need to do the same thing except for instead of enrolled we need to modify open. So I'm just going to copy this entire thing and then I am going to make an outline and then I'm going to call this toggle description and then instead of robots that's open and since we are toggling it and we're not we're not just opening it or just closing it I'm going to just reverse the order so we can open and close. So if it's true or false it's false it will turn to true. Okay. So we have the set up and let's just go over done so far. We set up our type of description. We set up our action so we can call that with our e-tag when we click and then we have our. This is going to be put in here. [00:03:47][118.0]
[00:03:47] The thought process dot Toffel course and then we have our dispatch. So let's go ahead and put that in. We need to put in toggle description and let's make sure we import this at the top. Okay so we then are dispatching toggle ascription with our course as a parameter which we got from the payload of the action. Okay. Now it's going to of course as we're getting the actual payload comparing if that's the right course in our courses and then we're reversing the order of them. So now all we need to do is set up the actual button to run the function dispatch it. So let's just go ahead and let's see what we need to type. So we need to do a couple of things we need to have. We need to make it so when we click this it will send it so quick is equal to in brackets aero function. The style toggle description and then we want to pass a coarsen again that should work. Now we need let's just pause for a minute and see we're so this Propst toggle description is going to dispatch this and then it's going to modify our state a bit. All right. So should we get there. Let's go ahead and make it display the description. If the if it's true or if the course is open or not. So let's go ahead and replace these parentheses with back ticks and our javascript object tags here are brackets that way we can put a parameter in here so we can say. Dot open. If it's open we want to show the content. [00:06:03][136.0]
[00:06:05] Now if it's closed we want to hide the content. Okay so that should set it up completely. Go check it out in the browser arrow with it and it doesn't do anything. Let's check our consul here to see if we have any errors. No errors. And that is because we haven't seen that is because we haven't on click this prompts a toggle description scroll down. Here we are toggle description we're dispatching it lets go check or reduce or toggle description. OK now let's check our action to see. It's got the open. Oh it's because we're setting into false each. No nevermind. That's right. So we have open falls open for us. What someone needs to truly see if it will play should be closed automatically so something's not working. Let's check our horse library. Okay so the problem is we close this off too early. Let's close it off over here and save this. Go back and they should close when it reloads. OK so they're automatically open they should be closed because if it's open it's going to show the content it's close to the content. And I would think that it would be closed because these are by default are set to false which means that should it be hiding the content immediately. Interesting let's kind of think about why is Australia reading this tag and see if that affects that all known. All right well it's working. Let's go to the next guy. Let's just add in the animation for this so it actually animates like you see here when we cook this. [00:08:28][142.8]
[00:08:29] And then after that look out in the actual arrow you seeing right here. So it can open and close like that. And then after that when he made it. So what's come in our code added an toggle description action and reduce or get push origin master. And I'll see you in the next guide. [00:08:58][28.9]
[533.5]