In the last section we finished up our delete post action creator and tested it out inside the browser.
We did get a little bit of an error because we didn't actually define the type that we were using.
So it says delete posts is not defined.
Let's flip back over to our Creator file.
So here's that typewrite here.
And yet we just never defined it at the top so we'll go on to and find our type section will say expert
Konst delete posts is delete post like so.
OK let's do one more test.
Back inside the browser or refresh the page.
I'll go to my post and get my request log up here and I'll delete a post.
Cool looks good.
Now one thing I want to mention about our current approach.
We are really relying upon our Rifat So the list of posts right here to get the deleted post to get
out of our application state right.
If we go to this particular post when I click on delete post when ever that request is completed when
the deletion request is completed we automatically navigate back to our list of posts but when we do
so our big list of posts like all the different post we have in local memory still includes the deleted
one and so we're doing that.
Follow up requests right here.
Here's the follow up request to fetch the new list of posts which by now has the deleted one not present
the delete the one is not reflected in the list anymore.
So we're kind of exploiting a little technicality here to get around our local state management.
I think that to do things correctly we should really make sure that we update our local state as well
whenever a post is deleted.
It's going to make sure that the UI is just very slightly snap year for our users which might be really
important if they're on a slow internet connection so let's go back to our reducer that is recording
our list of posts.
So here's REDUCE-IT post right here.
We will import the delete post type that we just added and then we'll add on another case statement
to handle the case where we are deleting a post.
Now in this case remember that the action action is payload contains the idea of the post that we just
delete it.
So all we really need to do is reach into our state object and get rid of the key and the value that
match that particular ID to do so.
We can use a little helper out of the low dash library called omit.
So return underscore dot omit will pass in our state and then as the second argument we're going to
pass an action docked pay load.
So what this does right here is it says look at the state object.
If the state object has a key of the posts Id just drop it.
Just omitted from that object and return a new object that does not contain that ID anymore.
So this does not modify the existing state object and returns a new state object with that particular
post.
Id not present any more.
So this is part of what's so great about using an object rather than an array for state management.
You can imagine that if you were using an array here we would have to write in like a reject function
so it probably would have looked something like reject state.
I don't know.
Post.
Post equal legal action.
Payload.
So if we had a state object of an array we would have ended up with something like this right here which
is definitely not quite as legible I think.
I think that omit is a little bit more obvious as to what's going on.
And actually this would be posted ID.
So I do like using personally an object as our application level state.
OK let's test this out and see how we're doing.
I'll refresh the page and we will delete this post and right away we see that things just get out there
and we're good to go.
OK so I think that about wraps up this application.
Let's do a quick review and talk about some of the big highlights of this app.
Inside of our source directory I'm going to open up our top level index js file inside of here.
We made use of re-act router Dom in particular the browser router the routes and the switch components
to give our application the aspect of the idea of navigation.
We created separate routes for each individual component inside of our application and we tied each
of those components to a particular path whenever a user navigates to one of these paths will show this
particular component.
So the real interesting aspect to this real interesting idea is that we're really not changing HTL documents
we're just hiding and showing different sets of re-act components to give the user the impression that
they're navigating around our application.
The route component takes a path and that path can have some wildcards inside of it that we specified
by saying Colin.
And then the name of the wildcard.
This is a very important piece of application state and it's one very good reason to think about how
to best interact or integrate it with with our redux store as well.
One very good place where we made use of this I.D. was inside of the post show component inside a post
so we made reference to that idea coming from the you are out all over the place because we really cared
about what the particular post the user ID was trying to look at.
One other big challenge that we tackled inside of here was making use of re-act router with action creators.
So with re-act router we have the ability to very easily navigate around programmatically with code
that is written inside of a component.
As soon as you start to put code outside of components while navigating around starts to get a little
bit more challenging.
And so one of the best ways of handling that is by passing around callbacks to our action creators that
will take care of the navigation after the actual creator has completed executing.
The other big thing that we take took use of are made use of inside of here was the own props system
with MAP state to prop's.
Remember that this second argument to map state to prop's is the set of props that is going to the target
component and so that makes map stage props a really great place to do some intermediate level of calculation
or do some look up or something like that inside of here.
One of the later videos or bonus videos inside this course is all about a library called wristlet de-select
excuse me and reast like makes extensive use of doing some intermediate calculations inside of maps
to prop's right here.
So I really do recommend that you check out that video.
Finally we also inside of our producer which we just took care of this section we made use of map keys
or we did this previously excuse me Mityas of the map keys Helprin here to treat our state object as
a object rather than an array with an object.
We get some very fast very easy and look up of records and it also makes maintaining fetching the same
record over and over again much more straight.
For example remember how were fetching an individual post here with the fence post case.
And while were talking about this I got to clean up the comment we left behind.
So with fecche post right here it was very easy to take all of our existing states and then add in this
additional record to that object as well.
Now if we keep going back to the same post over and over the existing post that already exists inside
of our state object is just getting overwritten by this segment right here.
So if there is say a post with ID of 5 already and our state object and we re fetch that post again
that post with ID file will be overwritten by this one right here.
And so making use of updates to our state object is so much easier with this approach than using an
array because if we had an array we couldn't just add on or keep concatenating on these new posts are
fetching.
We would first have to go and find the post with ID of 5 remove it out of that array and then add in
the new one.
So in practice I really recommend checking out using an object to use as your storage for data inside
your state.
And I also have another bonus video at the end of this course as well that talks a little bit more about
some of the fine grained details of using an object as your application level state as well.
So I hope that you enjoyed this application.
It was a lot of fun to put together.
I do recommend that you continue on and check out some of the bonus videos because theres a lot of very
particular one off topics that didn't quite fit into any of the applications that we covered.
And a lot of those topics you'll find are really useful for working on your own personal projects.
So I recommend you go and check them out.
Talk to you later.