Complete React Tutorial (& Redux ) #42 - Map Dispatch To Props

Key Takeaways

alright then so so far we've mapped the state to our components like this map state two props and we've read data from the states but what if we want to change the state what if we want for example to delete one of these posts on this page a little delete button or something to delete that then what we need to do is interact with the state from this component now if we refer back to this diagram we have our central state and we've already passed our data via the props to this component and that's using that function map state two props now if we want to make a change to the state we have to dispatch an action from the component and that action is going to contain a type for example delete post or add post or whatever and it's going to contain an optional payload and in the case of deleting a post it could be that that payload is the ID of the post we want to delete so then that action is dispatched to the reducer the reducer takes the action checks the type of action takes in the payload the ID that we want to delete from the states and it makes that change to the central state then when that changes we get the updated props in side the component alright so we need to figure out a way to dispatch an action from the component right here and that's pretty simple to do so like before when we did map state to props this time what we're going to do is map dispatch to props and that's going to map our dispatches to our props so that we can call them from our component so let's create a Const Westphal and call this map dispatch - props now this is an aryl function and we'll come back to those parentheses in a minute because it takes in a parameter and this parameter is the dispatch method now remember when we worked in code Ben and we were looking at dispatches we dispatched an action like this we said the store and then dispatch so dot dispatch like so and we passed in an action with a type and some additional payload so that's how we did it then but what we're doing now is we're mapping dispatch to props so were passing this function which is on the store through into this function right here as a parameter which means inside here we could just say if we wanted to dispatch and then the action we don't need to say store dispatch anymore okay so what we want to do in here is return an object and this object is going to represent like it did here what properties are what functions where get a map to the props of this component so I want to map a function called delete post because we're going to delete a post inside this component which is the component detail by the way so this delete post right here what I wanted to do is dispatch an action so it's going to be a function first of all which will take a parameter and that parameter is going to be the ID of the post that we want to delete so it's an error function so inside here let us do our function contents and what we'd like to do is dispatch an action like this now the type of that action this is going to be delete underscore post and the additional payload we want to send is the ID so I'll create a property called ID and set that equal to the ID right here that we receive inside this function when we call it okay then so what we're doing now is we're dispatching this action whenever we call this function and this function is going to be attached to our props so we can use it inside the component but before we do that we need to take this and we need to pass it into the connect function down here much like we did with map state to props so map state two props first map dispatch two props second alright then cool so now if we go up to the component over here what I'm going to do is just log to the console the props so we can see that function on the props so console.log and then it's this dot props all right so save that check this out in a browser now we see the props object right here and we can see that we have this delete post method right here and it expects an ID so this is the method we'll be calling to delete a post from this post detail component alright so let's do that first of all we need some kind of button underneath here so that we click that and then it's gonna fire this function at some point so let's create that underneath this PITA so we'll do a div first of all with a class of center just to centrally align the button inside this button we'll have a class of button this is a materialized CSS class also a class of gray to color it gray all right so inside we'll just say delete post now we want to attach a click event to this button so let's say on click and set that equal to some function or other which will define up here and that function is going to be called handle click so I'll say this to reference the component dots handle clicked like so all right so let's create that function handle click you call a function and inside that function we'd like to call this method right here because we want to delete the post so we can just say this dot props delete post like so and call that function but remember we pass in the ID it expects an ID because we send it inside the action so we need to send the ID of this post now if you look on the props on the post right here we have an ID property so we could just grab that by saying this props dot post ID then we're passing the ID of that post into this function okay so what we're doing is we're calling this function which is in turn firing this function right here and inside that function we're making a dispatch and sending this action to the route reducer so let's save that and go to the route reducer because this is where we receive the action so for now let's just log this to the console will say console dot log and then the action so whenever that action is dispatched whenever we click on that delete button then it's gonna receive that action right here and it's going to log it to the console so let's save it and see if this works so delete post all right so it's logging that to the console do it again and it logs it again every time we click delete post it's firing that function dispatching the action to the root reducer and logging it to the console so that's good so far but what we actually want to do is delete this from the state so to do that first of all we have to check the type of action because we don't want to delete it for every action just if the action type is delete post so let's perform a little check right here will say if action type is equal to delete wonder score post then we're going to do something and this thing that we're going to do is update the state now remember when we update the state we don't want to do anything destructive we don't want to alter the original state we want to work out a non destructive way to do this and we can do that using the filter method because the filter method doesn't alter the original array it creates a new array so we could say let new posts equal to state dot posts dots filter and we're going to filter through these posts so the filter method performs a function on each individual post and if we return true for that function then we keep that post in the new array over here if we return false then we filter that post out of the new array so this callback function takes the individual post that we're cycling through at the time and what we want to do is check does this post ID equal to the ID we receive on the action if it does equal the same thing then what we want to do is return false because that will filter it out of the array we want to filter it out if they are the same we want to return true if the action ID and the post ID and not equal so let's say we turn action dots ID is not equal to post to ID so this is going to be true with these two things and not the same the IDS on these two things all right I remember we get the ID on the action because we passed it in right here okay so then what we're doing now is creating this new array which should have filtered out the post that we want to now we need to return a new object which represents the new state so we return that right here now remember we can't just say return and then post is equal to new posts we could do in this case but if in the future we had more properties like users which was equal to something and then you know something else then what this is going to do is overwrite all of that state object with this object right here which we don't have a users property on so we don't want to do that first of all we want to take the current state and we want to spread it like that so that all of the properties from the state are returned inside this object first then we override the post property with the new posts okay that's what we need to do so let's save that now and see if this works so if we come over here and delete post then you see the post goes right and if we go back to the home page that post is no longer there now this is okay but what I'd like to do is that when you delete a post it redirects you to the home page instead of just seeing this thing right here so let's do that we do that inside the component so if we come up to where we delete the post this is where I'll redirect the user after this thing has been done so down here we can say this dot props history and then use the method called push record this in a previous tutorial this is how we can redirect someone to another page and we want to redirect them to just forward slash which is the home page so if we save this now all the data's should be back go back to the home page and if we click on one of these delete it go back to the home page and it's not there anymore cool delete that sweet and finally that awesome okay then my friends so there we go that is how we map dispatch like this to props how we call that dispatch from the component itself when that dispatch is received in the reducer we can update the state