1
00:00:02,170 --> 00:00:10,580
Now we know how we can store and fetch data, of course in our app, we can also edit and delete data however.

2
00:00:10,690 --> 00:00:15,760
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

3
00:00:16,360 --> 00:00:26,320
actions file, we have our update product action creator here.

4
00:00:26,360 --> 00:00:31,050
Now just as before, I will now change this to return async dispatch

5
00:00:31,340 --> 00:00:39,440
and then in the end, in there, dispatch this action here, so move it in there and call the dispatch

6
00:00:39,440 --> 00:00:42,250
function here which we're getting via Redux Thunk

7
00:00:42,470 --> 00:00:47,420
and before we do that, we can now reach out to the server and update our data there.

8
00:00:47,470 --> 00:00:55,010
Now that will be pretty simple, we can just again use the syntax from create product, this here,

9
00:00:55,010 --> 00:01:02,390
so just the fetch request alone should suffice here and do that before we dispatch, thanks to await we will

10
00:01:02,390 --> 00:01:07,610
wait for this because this dispatch function invisibly gets wrapped into the then blocked that belongs

11
00:01:07,610 --> 00:01:09,010
to this promise

12
00:01:09,020 --> 00:01:15,050
but we need to tweak this request, the URL for example is not entirely correct, it points at the product

13
00:01:15,080 --> 00:01:20,990
but now we want to point at a specific product, the one product we want to update. Therefore I'll use a different

14
00:01:20,990 --> 00:01:26,960
Javascript syntax here with back ticks instead of single quotes which still creates a string but

15
00:01:26,960 --> 00:01:33,980
a string where I can easily inject dynamic data into and I will add a new segment after products before

16
00:01:33,980 --> 00:01:40,970
.json and we can now inject data with this $\ syntax and that's vanilla Javascript,

17
00:01:41,030 --> 00:01:48,850
not specific to React Native, it's just Javascript and here I want to add my ID, so that in the end

18
00:01:48,880 --> 00:01:55,630
I target this URL, then the products node and then this ID. Of course if you're using a different

19
00:01:55,660 --> 00:02:01,810
API, then Firebase the URLs you have to send your request to will differ, then you should have an

20
00:02:01,810 --> 00:02:07,810
API documentation that tells you which URLs are accepted or you're writing your own API, then

21
00:02:07,810 --> 00:02:13,270
you should definitely know where you can send requests. This is how Firebase wants it and the method

22
00:02:13,300 --> 00:02:20,980
now for updating also shouldn't be post but patch or put. Put will fully override the resource with

23
00:02:20,980 --> 00:02:27,130
the new data, patch will update it in the places where you tell it to update it and that's what I want

24
00:02:27,130 --> 00:02:34,270
here. I also need to add my headers and now also add a body with the title, description and imageUrl

25
00:02:34,270 --> 00:02:38,240
but of course not with the price because we're not getting this and we don't want to touch this

26
00:02:38,980 --> 00:02:45,110
and this will send the request where Firebase will automatically only change these fields on the product

27
00:02:45,110 --> 00:02:51,390
with this ID we're targeting. Now I actually don't need to store the response in a constant because

28
00:02:51,390 --> 00:02:56,880
I don't care about it anyways, it's just important that we wait for this to complete and with that, we

29
00:02:56,880 --> 00:03:05,640
should be good. If we now save that and we go here to admin and start editing this and maybe add an exclamation

30
00:03:05,640 --> 00:03:12,540
mark here and then important, click somewhere else so that this retriggers due to our form logic and submits

31
00:03:12,540 --> 00:03:19,140
its new data and we then click this checkmark, we're taken back and we see a white shirt here, we also

32
00:03:19,140 --> 00:03:25,620
see this on Firebase, so this is working. So this is how we can update data, now what about deleting? For

33
00:03:25,620 --> 00:03:32,550
this let's go back into our actions and for deleting, we have our action creator. Now just as before, here

34
00:03:32,580 --> 00:03:40,250
I returned as async function that gets dispatch as an argument and where in this function, we then in

35
00:03:40,250 --> 00:03:48,360
the end dispatch this action that reaches our reducer and before we reach that, we can again send a

36
00:03:48,360 --> 00:03:56,950
request. Request that looks like this, I will copy this part here, don't care about the response really, just

37
00:03:56,950 --> 00:04:04,240
like that, await fetch. Now the URL is wrong, just as for updating, I want to add my ID in there,

38
00:04:04,400 --> 00:04:10,900
hence I'll use back ticks so that I can use this injection syntax again and add the product ID here,

39
00:04:11,350 --> 00:04:17,790
send a delete request and we won't need to set a header because we also won't have a body, so

40
00:04:17,790 --> 00:04:23,140
we can get rid of all of that, just the method is important and that we await and therefore now, we should

41
00:04:23,140 --> 00:04:28,570
be able to delete data as well. We can have a quick look at this, if I create a new dummy product which

42
00:04:28,570 --> 00:04:35,500
I can easily delete without losing too much, like that, if I save that, if I click delete here, click yes

43
00:04:35,860 --> 00:04:43,210
it's gone here and also we saw it for fraction of a second here, it was also deleted on Firebase. So this

44
00:04:43,210 --> 00:04:45,130
is how we can update and delete as well.