[00:00:00] Hi. Welcome back to the reactor cores and the last guide we introduced redux and our application and we learned about what reducers doing a little bit about what actions do in this guide were going to be heading back to actions here you go to redux digester or slash BASIX slash actions you can get here and we are going to be implementing action to basically provide us with our data. We're going to we're going to have it basically provide us with the data and go through our producer and return of the payload of that action. And we're not going to be doing this with a promise but you'll see how we implement this so let's go ahead and get started. And the first thing we want to do is in our types while we actually have to create the file so in actions we want to create a file called type stodginess and in here we're going to be storing our our types for our actions. So right here they have one called add to do we're just going to make one called fach courses so if you type in export conc fetch courses is equal to stream Litoral fetch courses that sets up our fetch courses type action. So in our index we now have to include this so we can actually write out an action function. So the way we can do this is first by importing our actions so import that courses from thought slosh types. How good is access to our constant we can sort in the same file. But the reason we're doing this in time is not just to make it a little cleaner. [00:01:44][104.2]
[00:01:46] So now type auto function export function fach courses the action itself. And if you go here you kind of see that the structure of how this works. And we're going to do it a little bit differently. We're not going to type in tanks we're just going to type in payload because the reason we do that is because we want to kind of simulate an API call like when you get a promise you're going to get a payload back a response with a payload. So we're going to type out that kind of syntax here so we want to return type courses and then in payload we want to put our put our courses so back in our reduce workhorses digest let's go ahead and let's take all this return statement and for default we just want to return state. And then with that copied with that cut out of there let's go back here and put it right here and this might be extremely confusing right now and get rid of the return. But it makes sense after you go through and create a few actions and a few producers. And for me at least it took a good minute it took a few projects to really understand what was going on. So just follow along and trust the process and we will get there eventually you understand it eventually. So back in our courses digests of our reducers I talked to the last guy about action the action coming through here in the function and switching in. [00:03:23][97.1]
[00:03:24] So now you might guess what we're going to do here and basically we're going to check for our fetch courses action and first the way we can't even recognize and see compare it to the actions by importing it. So we have have access to it so we can actually see if it's the actual one when comparing it to the action type. So import fach courses from Daddah slash actions slash types and not in upper case. That should give us access and mix is still important. Great. And don't upper case from. Okay so now that we have access to that we can compare our action in our function to that so we can say okay case that the action is fach courses that we wanted to do this. So in first courses we want it to return us our piece of state. We want to return our state with the payload in there. The course is payloads so the way we can do this. Let's first just cancel log gets canceled all log action payload and the console logging action not pay is because back in our let's close this index Taja as authorities as to reduce confusion. No pun intended reducers reduce confusion anyway. So we have our and let's close our types so we can just have our component our actions files open or reduce or get anyway. Let's get back to Earth. These are both theories about metal anyway so we're cons. logging action out payload and now we have to call this we have to get here somehow. And normally we're just mapping stator props and we have access to it. But since we're not going to be returning it default stay it's going to be we need to explicitly dispatch an action to this reducer. [00:05:27][123.1]
[00:05:28] So the way we can do that is by introducing maps map dispatched props. So the way we can do this is by our course library referrer we first need to import all of our actions which is just the fetch courses now so import actions from French import actions from slash types. I believe we should be or does slash actions. My bad. We need access to the functions not just the constant here. So we need access to our fetch courses function here and then now we can kind of bind this together into our container here. We can bind into our component by typing this function. And I talked a bit about the second thing that this takes right here. And the second primer and that's actions we can actually get to map dispatch to prompts later since it's a more complex kind of topic and we should just have access to it like this. So let's go ahead and test this out and see if we do so in here let's just call this dot Propst dot thatch courses and I believe that should work. So it should console log it because while we may have to dispatch it we'll get this back I'm pretty sure. So we go this dot fetch courses let's just a lot of this and see on string if I had just had string EFY this dot Propst stuff fetch courses and see what happens and make sure that's all closed off. Okay. So save that. Make sure your app is running and go back into the browser and it says error Cannot resolve dot actions and sort stock components. [00:07:32][123.8]
[00:07:33] And the reason it's doing that is because we haven't put an extra dye here I think is why. OK so now it's going to access the folder. It's not looking for another file called actions. Okay so back in our app we'll see if what's going on say locals 3000 is not working let's open up our console and see what's up. ARROTT reducers CT reduce courses return undefined Dring initialisation. If the state passes the reducers undefined you must explicitly return the initial state the initial state may not be undefined if you want to set a value for the service or you can use no instead of undefined. And the reason it's not. If we go to our producer here the aged course is dodgy yes. See it's because we're not returning anything in here so what we need to do to do that instead of just logging it would actually read returns something and we should actually be returning state as well. If we fix it we will have to return something here anyway. But yeah. Okay so as desktop props fetch courses is not a function. That's because we haven't mapped it over. So first let's return action our payload. Still not going to work and we actually just want to map this to state. So this is called the spread operator. Now explain that a little bit in a minute. For now just copy what I'm typing so returned Dostie and dot dot dot action not payload. Okay. Now let's fix this air and get this working. [00:09:12][98.9]
[00:09:13] So in our current library digests let's go ahead and let's do this let's type of function now dispatched to Prouse and in this function we want to basically provide our our actions so we're going to type in this fascist state. And then in here we want to next to connect import dispatch and then down here we want to basically provide access for action so we could say all right actions since that's at the top of our file here and we can say actions Nuthatch courses Holbein fetch courses with an arrow function and then we want to dispatch fetch courses okay. Now it's not going to work. And let's go out and fix up by deleting actions and importing the specific actions like that. All right so that should work let's save lives and let's get rid of actions since we're thatching immediately like that and personal. So now it's his actions it's not a fine. That's because we're trying to do that instead of passing in our actions. It's Pashin map. This badge two props and it says this all props stuff fetch courses is not a function. All right we'll see. Why is it doing that. Stuff props up fach courses and find OK let's just check. We're importing less such courses close the dispatch fetch courses map dispatched props and this is my special props and connect of course libraries must return a plain object. So basically the reason this isn't working is because we need to return the action. Basically we need to wrap this in return. It's always the little things they get caught on. So go ahead and wrap this in a return hopefully you can do that. Like I can't. Okay let's see. To have this over and make sure this is a bracket. [00:12:14][181.6]
[00:12:15] I always mess up on my because I'm so used to the render function to make sure you're returning now with brackets say that we should be Kolin. Let's see. All right sweet. So we're learning that it stopped props up which courses when getting undefined. And let's see why psyllids comment this out. You'll notice though that rogue console logging the right courses because we're getting that from state so go ahead and revoke this without the alert. OK. I thought I save all right so let's copy this Scott Propst up fetch courses call. And we want to actually put this in one of the component lifecycle methods because we only want to do it at the beginning and if you remember back in the article we were reading it was in the last app. I think it was component did make sense component. That makes sense if you google that McCuaig the first one. I believe that is the correct one. All right. So says component will now your component is going to appear on the screen shortly and is think it says something about AJAX requests. Let's go back and click on this level uplink. Yeah this is the one we're looking at with the diagram I'll get. So we have component will now and says this method is executed right before a component is added to the dom is recommended they use the constructor but this method is still included in the API for backwards compatibility. All right component did MT I believe this is the one we should be using. Your component has now been rendered and exists in the DOM. [00:14:48][153.1]
[00:14:49] This is the point when you should initiate AJAX requests add event listeners and perform any set up there at all so we could they use get connected for their AJAX requests example. We're going to act as our fetch course as is our AJAX requests because normally we would be fetching the data from a server and not hard coding it in our action. So let's go ahead and type out a component mount in our core library and do them there. So a component did mount stock prob stuff which courses. Okay. Save that. Go to your app and we'll have our data. So that's how actions kind of work. Go ahead and maybe go through the guide again or go through your code a little bit before moving onto the next guide so you can kind of understand what's going on. Now it's kind of a rough start to actions and it wasn't as clear as it could have been. But if you look around at how this is all flowing and how the auction gets called and then it returns fetch courses and then we dispatch it down here to our reducer. You can kind of get a better clearer idea of how this is all working and how we're getting that into our component and what makes us powerful is that we can set this up and are other components and have access to our state anywhere within our app and that's really what redux is all about. It's really good state management so that's a short introduction to actions and how we can implement them into our app to dispatch those actions and action to fetch our courses to our producer. So that's always good. [00:16:38][109.1]
[00:16:39] That is all we will be doing this guy. Let's go out and commit our code and move on to the next guy. So get status and get command introduced actions and map dispatch to props. All right let's go ahead and push our code and the next guy. Let's go ahead and take a break from all the redux you can kind of clear your mind a little bit and let style this a little bit better so we can see our our courses in separate carts. Kind of like you see here. All right I will see you in the next guy. [00:17:21][42.1]
[1033.1]