1
00:00:02,270 --> 00:00:07,520
So storing is great, fetching would also be sweet and in the end, I want to make sure that when we

2
00:00:07,520 --> 00:00:10,510
for example visit the products overview screen,

3
00:00:10,580 --> 00:00:15,200
we simply reach out to the server and get all products from there, so that on this screen,

4
00:00:15,290 --> 00:00:16,510
whenever we visit it,

5
00:00:16,550 --> 00:00:19,390
we load the latest products.

6
00:00:19,400 --> 00:00:22,500
Now for that, we need to send a HTTP request from there

7
00:00:22,520 --> 00:00:28,250
and therefore in the end what I want to do is I want to dispatch a new Redux action which will reach

8
00:00:28,250 --> 00:00:35,590
out to the server, get my products from there and then set the products in my store. So I need a brand

9
00:00:35,620 --> 00:00:43,060
new action here, set products, which I didn't need before because we only worked with dummy products but

10
00:00:43,060 --> 00:00:50,660
now that's not the case anymore, so set products should now be dispatched and I will need a new action

11
00:00:50,660 --> 00:00:58,110
creator here which I'll name fetch products. For this I have no identifier because I will never dispatch

12
00:00:58,110 --> 00:01:01,310
this as an action which should reach the reducer, instead

13
00:01:01,310 --> 00:01:06,110
this will just be my action creator with the async code with the HTTP request.

14
00:01:06,110 --> 00:01:12,950
It will not need any arguments but thanks to Redux Thunk, it returns a function which gets that dispatch

15
00:01:13,070 --> 00:01:16,470
function as an argument and there in the end,

16
00:01:16,490 --> 00:01:23,460
I want to dispatch an action object where the type is set products and where I want to forward my products

17
00:01:23,480 --> 00:01:30,490
but of course that should not be an empty array but the products I get from my API. So we can therefore

18
00:01:30,490 --> 00:01:38,610
kind of copy of this code here, including the async dispatch part here, all the way up to there where

19
00:01:38,610 --> 00:01:40,590
we get the response data,

20
00:01:40,590 --> 00:01:47,810
copy that from create product and replace this part here with it

21
00:01:47,970 --> 00:01:52,530
and now what we do is we send a request to that same URL as before which makes sense because

22
00:01:52,530 --> 00:01:54,380
that's where the products are stored.

23
00:01:54,390 --> 00:01:58,650
However now I want to set a get request and that's actually the default when we use fetch,

24
00:01:58,740 --> 00:02:04,380
so we don't need to set this. For a get request, you also don't need to set any headers and you can't set

25
00:02:04,380 --> 00:02:04,860
a body,

26
00:02:04,890 --> 00:02:09,150
so actually here, we can entirely get rid of this second argument on fetch,

27
00:02:09,150 --> 00:02:12,020
we just send a fetch request like this.

28
00:02:12,210 --> 00:02:18,000
Now the response will get back our data but now there is one important characteristic about the format

29
00:02:18,000 --> 00:02:21,880
of that data and it's best if we simply see that.

30
00:02:21,900 --> 00:02:28,470
So let me console log the response data here and comment this out for the moment or we can leave it in

31
00:02:28,470 --> 00:02:29,680
there, it doesn't do any harm,

32
00:02:29,700 --> 00:02:32,050
it doesn't do anything useful either,

33
00:02:32,100 --> 00:02:37,200
we're not handling this in the reducer yet but let's log this and let's now go to the products overview

34
00:02:37,200 --> 00:02:44,230
screen and make sure that there, we dispatch this fetch products action. Now thankfully, I already get

35
00:02:44,230 --> 00:02:48,670
access to the Redux dispatch function there in products overview,

36
00:02:48,850 --> 00:02:55,210
so now I just need to add use effect so that I can fire this whenever this component loads.

37
00:02:55,210 --> 00:03:04,760
So here, I can add use effect and in my function here, I can call dispatch and now reach out to my product

38
00:03:04,790 --> 00:03:08,510
actions which I therefore need to import as products

39
00:03:08,510 --> 00:03:22,210
actions from store actions products, like this, that should be actions and now use the products

40
00:03:22,250 --> 00:03:29,240
actions here to fire my fetch products action which in the end will make this HTTP request and this effect

41
00:03:29,240 --> 00:03:36,260
should run whenever my component is loaded. So I can add an empty array and actually add my only dependency

42
00:03:36,260 --> 00:03:38,300
which I have which is dispatch,

43
00:03:38,310 --> 00:03:44,070
here that's the only dependency we define inside of our component, so that this will actually never rerun.

44
00:03:44,150 --> 00:03:48,350
The only time it will run is when this component is loaded and that's exactly what should be the case,

45
00:03:48,410 --> 00:03:49,830
whenever I will visit the screen,

46
00:03:49,850 --> 00:03:52,950
I want to fire this effect here.

47
00:03:53,270 --> 00:03:57,410
So if I now save this, let's save this and now as this loads,

48
00:03:57,440 --> 00:04:03,780
you see here in the log, this is what happened here both on Android and iOS

49
00:04:03,790 --> 00:04:05,520
which is why I see this twice.

50
00:04:05,560 --> 00:04:07,460
This is what I got back in the end,

51
00:04:07,510 --> 00:04:09,900
this object was returned by Firebase.

52
00:04:09,910 --> 00:04:15,970
It's an object with all my products and I only have one which is why I only see one here and each object

53
00:04:15,970 --> 00:04:18,190
is matched to its unique ID

54
00:04:18,700 --> 00:04:19,510
but that's important.

55
00:04:19,510 --> 00:04:25,210
We don't get back in array, we get back an object with unique IDs as keys and the values for these

56
00:04:25,210 --> 00:04:30,760
keys is then my object data and we just need to know that for handling it correctly.

57
00:04:30,760 --> 00:04:32,050
So back in our action,

58
00:04:32,050 --> 00:04:34,200
this is how the response data looks like,

59
00:04:34,270 --> 00:04:38,790
of course in my app I work with an array though, so I need to transform this.

60
00:04:38,950 --> 00:04:43,980
So my loaded products or however you want to call this here should be an empty array

61
00:04:44,200 --> 00:04:49,580
and now we can loop through that object to map the object data,

62
00:04:49,610 --> 00:04:54,570
the products in the object to products in the array.

63
00:04:54,570 --> 00:05:00,490
It's relatively straightforward to do, we can add a for/in loop here with our key where we go through

64
00:05:00,490 --> 00:05:09,190
all the response data we fetched here in the end and then here, I add each product to my loaded products

65
00:05:09,250 --> 00:05:13,240
with push, so that this array grows over time

66
00:05:13,240 --> 00:05:19,420
and what I add here in the end is just a new product, using the product model which you therefore need

67
00:05:19,420 --> 00:05:20,250
to import,

68
00:05:20,260 --> 00:05:25,610
so make sure you have that import here pointing at your models folder and there at the product file

69
00:05:26,860 --> 00:05:28,660
and I create a new product here

70
00:05:29,690 --> 00:05:36,910
where my ID is that key because that is that unique ID here which we have in that object for

71
00:05:36,910 --> 00:05:43,820
which we're looping, then that user thing, that is U1 still, dummy data because we have no user

72
00:05:43,820 --> 00:05:51,260
data involved here and then we have to look into the object we got back from Firebase to get the title

73
00:05:51,260 --> 00:05:52,180
and so on.

74
00:05:52,220 --> 00:05:58,720
So here, our title for this new product we're creating is simply resData for the given key.title

75
00:05:58,760 --> 00:06:00,380
and the same

76
00:06:00,380 --> 00:06:05,920
of course here for the imageUrl, so .imageUrl. For the description

77
00:06:09,440 --> 00:06:19,610
and of course also for the price, like that. So this adds everything to loaded products and now loaded

78
00:06:19,610 --> 00:06:25,570
products will be a populated array which I can add here to the action that is dispatched, to the set

79
00:06:25,580 --> 00:06:27,070
products action.

80
00:06:27,230 --> 00:06:32,530
So the only missing thing is that we now go to the reducer and there, we can handle set products,

81
00:06:32,690 --> 00:06:38,080
maybe here as the first case but of course the position doesn't matter. Add set products here

82
00:06:38,080 --> 00:06:43,660
and for that, make sure you're importing it from your actions file and then there,

83
00:06:43,670 --> 00:06:49,230
it's a very trivial thing which we're about to do. In the end I just need to return a new

84
00:06:49,230 --> 00:06:59,090
state where the available products are equal to action.products, so to the products I derived here

85
00:06:59,330 --> 00:07:05,810
in my action creator which I add to my dispatched action. And for the user product, it's pretty similar,

86
00:07:06,280 --> 00:07:14,210
there it's action.products, just filtered for all the products that have my user ID, so like that

87
00:07:15,450 --> 00:07:20,370
and at the moment due to my dummy code here where I hardcode my user ID, that of course means that

88
00:07:20,490 --> 00:07:23,670
all loaded products are treated as my products.

89
00:07:23,670 --> 00:07:29,790
This is something we'll change later once we added authentication. So with that,

90
00:07:30,080 --> 00:07:35,120
now if this reloads, you see we start with the dummy data but then this is immediately replaced with

91
00:07:35,420 --> 00:07:39,830
this loaded data. So loading data works just fine,

92
00:07:39,830 --> 00:07:44,370
we can work with that as we could with our own data here.

93
00:07:44,390 --> 00:07:49,340
Of course we're not storing orders on the server and anything like that but we are able to load our

94
00:07:49,340 --> 00:07:51,410
data which we previously stored on the server.