Building the Remove Course Action in React
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:02] Hi. Welcome back to the reactor cores in the sky. We're going to be implementing our remove course actions so we can dispatch that to our producers so we can tell the store that we do not want a specific course in our schedule. When we click this so the way we can get started is by typing out this action. So export concert remove course is the goal to remove course. Now the next thing we need to do is go in or index digest and we need to declare a function that runs when we use that action. So export function remove course. And the way this works is if you go into our course library you'll see we have map dispatched of props right. And then we have fetch courses and then if you scroll up you'll see our component denouncing this dot prop stuff which courses so we need to do something similar except for instead of fetching of course we need to remove a course and when rendering a course you'll see that we're passing of course then and then we're getting all the properties from it right. So what we need to do here is accept a course into or remove course so we can tell our store or producer to remove that from the store. This particular course. Now if you go over to reducers on relaxed JAST artwork it will say somewhere in here if I type in the find box up there's something like an object. Okay so basically see if it says it earlier. Probably sensitive to dob. [00:02:00][118.5]
[00:02:17] Well basically if we agreed on handling actions and says the reducer is a pure function that takes previously in an action room and returns the next day and then you'll see it also says it's called producer because it's the type of function you would pass to array that prototype to reduce which is some vanilla javascript and you can click on that and read up. That is basically the main idea here as it says it's very important that the reducers states Prieur and a pure function. Abides by the set of rules here. So basically we don't want to really modify our core our application state. We don't want to modify. We don't want to use the same object. We want to copy it our entire state except for not include the Scorsone. If that makes sense. So and that's where the state the spreader operator comes in. We'll go more on to that and you're probably extremely confused at this point. And it's very confusing at first but you'll understand later on why. So basically we have this action here and that goes onto the reducers. Back to the action. We just need to return a specific action. So we need to give it a type of French courses or not French courses remove course and make sure you add that in this important barriers. When you import fetch courses and then I'm putting it on separate lines to make it more clear and remove course from DOT slash types and that is contained right here. OK. And you might be thinking this is really pointless typing these out. [00:03:58][101.1]
[00:03:59] What is then what's the point when we can just when we can just type in here and then go into our reducer and type it in here with strings and you totally could and it might be easier for a smaller app like it they saying here. But the point is that it reduces the chance of you screwing stuff up because you're getting it specifically from the time. So you know it's going to be the same for the most part. It. So back in our index I guess under actions. Let's go ahead and give this a payload of course. So basically when we call rim Of course we're going to give it this this course and then it's going to be the payload. So then when we dispatch this action we're going to dispatch it like we do in course library with with fetch courses K we're saying this stop drop stuff courses courses we're calling this function which is this function and then we are dispatching it to the reducer and then we can do something with this course. OK so now that we understand how that's working. That sets up our action. Let's go ahead and finish here in this guide and in the next guide we will implement the dispatch map dispatch the props so we into our schedule component so we can basically put a call to instead of Fetch courses to remove course into our tag which is located in here. When we hit on clitic so on Klegg and then we want to dispatch that action. So in the next guide we will handle dispatching an action to the reducer. Let's go out and get a code and get onto the next video so get status and get command implemented remove course action get push. Origin M.D. [00:06:11][132.3]
[00:06:12] Okay I will see you in the next guy. [00:06:14][1.5]
[353.3]