We're not going to start to focus on updating our blog context file and adding in the ability to delete
a blog post every time that we want to add in an additional way to change our state object.
We're always going to go through these same two steps we're going to first add in a new function that's
going to call our dispatch function.
Remember dispatches how we actually make a change to our state object.
So we're going to add in a new function down here.
Then once we add that in we will add in an additional case to our reducer to handle the change we actually
want to make to our state object.
So let's get to it.
I'm going to go back down to add a blog post right here and right underneath it all adding a new function
called delete blog post.
So this will also be called with our dispatch function.
And then inside we will return a function and inside of here we will call dispatch with some object
that's going to describe how we want to change our state object.
So usually by convention remember we add on that type property and we'll name this kind of operation
we want to do it do the operation we want to do here is delete a blog post so we'll give it a type that
is a string of delete underscore blog post then we can also optionally add in a payload property to
this object as well.
In this case we probably want to have a payload and it will be probably the I.D. of the blog post.
We want to delete and here's where things get a little bit tricky.
Remember this delete blog post function like this entire big block right here.
We are only adding in this extra step where it gets called with dispatch to make sure that the inner
function gets access to the dispatch that is created by create data context.
I know it's a little confusing but essentially what actually shows up inside of our components like
the actual function that we call from a component when we want to change our data is going to be that
inner function right there.
That's what we are actually running inside of our different components.
So if we want to pass an argument into this thing and describe the I.D. of the posts we're trying to
delete we can receive it as an argument right there.
So I'll put an I.D. like so then I can update my action object and put a payload inside there.
Now I want to remind you really quickly that these names of type and payload you don't have to use these.
They're just community convention.
We could just as easily call type something like thing to do and the payload could really just be I.D.
of post to delete pulling up to us what we name these properties again convention is to use type and
payload OK.
Remember any call anytime we call dispatch.
This object will be taken by react and automatically provided to our blog producer as the second argument.
So now inside of our switch statement we can add in an additional case inside of here we will watch
for an action type of delete blog post and then inside this case we will make the appropriate change
to our state and then return it.
It's all due return states and we'll use the filter function the filter function is going to iterate
through all the different elements inside of our state array and then run some child function that we're
gonna pass in if we return a true value from this.
Then the given element will be returned inside of an overall new overall array.
If we return false then it's going to be rejected.
So inside of here we're going to receive our blog post object and we're going to check to see if blog
post is not equal or semi blog post dot I.D. that's better is not equal to action dot payload.
Remember payload in this case is going to be the I.D. of the blog post.
We want to delete so if those are not equal.
And if that comparison is true we're going to include this blog post inside of a new version of our
state array.
So we're going to run that comparison for every element inside the array and then eventually return
the results.
And that will be our brand new state array OK.
That should be it.
Inside this file remember we just went through the two things that we're going to do with every additional
change so we're going to add into our reducer anytime we want to add in some new functionality we can
add a new function down here that's going to dispatch an object and then we're going to add in a new
case to our reducer and that's pretty much it.
So now to actually test this out we will go back to our next Green Dot j ust file.
Here it is right here going to find where we import or excuse me.
Make use of our context object.
So in addition to the state variable and add blog post we now have an additional function of delete
blog post anyway.
Before we add that in I just realized we missed one tiny step here.
Back inside a blog context.
Down at the bottom I neglected to add in that new function we just created to our call to create data
context.
So let's just make sure we add that in really quickly delete blog posts like So OK that's better.
It's now back inside of index screen.
Now we can get access to that function and we can call that function anytime a user taps on our icon
which will be from the touchable opacity.
So rather than doing a console log of item I.D. we can instead call delete blog post and we'll pass
in item dot I.D. and that should be it.
So let's save this.
I'll flip back over I'll add in a couple blog posts and then a tap on the delete icon.
And sure enough they get deleted.
Awesome and I'll test this out on Android as well.
So there's a couple of blog posts and they get deleted to go OK.
So once again can't say enough that series of steps we just went through.
We're gonna repeat several times every single time they want to add in some new functionality to our
context and update the way in which our data is handled.
So now that we've added in the ability to delete stuff let's make sure a user can also navigate and
take a look at a very particular blog post to sort of take care of that in the next video.