Now we know how we can store and fetch data, of course in our app, we can also edit and delete data however.
So let's make sure that this works as well and for that, I'll go back to my actions and in there, in the products
actions file, we have our update product action creator here.
Now just as before, I will now change this to return async dispatch
and then in the end, in there, dispatch this action here, so move it in there and call the dispatch
function here which we're getting via Redux Thunk
and before we do that, we can now reach out to the server and update our data there.
Now that will be pretty simple, we can just again use the syntax from create product, this here,
so just the fetch request alone should suffice here and do that before we dispatch, thanks to await we will
wait for this because this dispatch function invisibly gets wrapped into the then blocked that belongs
to this promise
but we need to tweak this request, the URL for example is not entirely correct, it points at the product
but now we want to point at a specific product, the one product we want to update. Therefore I'll use a different
Javascript syntax here with back ticks instead of single quotes which still creates a string but
a string where I can easily inject dynamic data into and I will add a new segment after products before
.json and we can now inject data with this $\ syntax and that's vanilla Javascript,
not specific to React Native, it's just Javascript and here I want to add my ID, so that in the end
I target this URL, then the products node and then this ID. Of course if you're using a different
API, then Firebase the URLs you have to send your request to will differ, then you should have an
API documentation that tells you which URLs are accepted or you're writing your own API, then
you should definitely know where you can send requests. This is how Firebase wants it and the method
now for updating also shouldn't be post but patch or put. Put will fully override the resource with
the new data, patch will update it in the places where you tell it to update it and that's what I want
here. I also need to add my headers and now also add a body with the title, description and imageUrl
but of course not with the price because we're not getting this and we don't want to touch this
and this will send the request where Firebase will automatically only change these fields on the product
with this ID we're targeting. Now I actually don't need to store the response in a constant because
I don't care about it anyways, it's just important that we wait for this to complete and with that, we
should be good. If we now save that and we go here to admin and start editing this and maybe add an exclamation
mark here and then important, click somewhere else so that this retriggers due to our form logic and submits
its new data and we then click this checkmark, we're taken back and we see a white shirt here, we also
see this on Firebase, so this is working. So this is how we can update data, now what about deleting? For
this let's go back into our actions and for deleting, we have our action creator. Now just as before, here
I returned as async function that gets dispatch as an argument and where in this function, we then in
the end dispatch this action that reaches our reducer and before we reach that, we can again send a
request. Request that looks like this, I will copy this part here, don't care about the response really, just
like that, await fetch. Now the URL is wrong, just as for updating, I want to add my ID in there,
hence I'll use back ticks so that I can use this injection syntax again and add the product ID here,
send a delete request and we won't need to set a header because we also won't have a body, so
we can get rid of all of that, just the method is important and that we await and therefore now, we should
be able to delete data as well. We can have a quick look at this, if I create a new dummy product which
I can easily delete without losing too much, like that, if I save that, if I click delete here, click yes
it's gone here and also we saw it for fraction of a second here, it was also deleted on Firebase. So this
is how we can update and delete as well.