1
00:00:02,120 --> 00:00:08,120
Fetching data from our local database is not that different from fetching it from a web server,

2
00:00:08,150 --> 00:00:11,690
instead of reaching out to a web server, we just reach out to our local database

3
00:00:11,690 --> 00:00:13,010
but that's it.

4
00:00:13,040 --> 00:00:18,950
So let's start by writing a function in the db helper file that allows us to fetch data from the database.

5
00:00:19,700 --> 00:00:26,750
For this, in there I'll export a new constant, fetch places, which should do what the name suggests, takes

6
00:00:26,750 --> 00:00:31,880
no arguments and in there of course, I want to reach out to my database and get all places. So I'll copy

7
00:00:31,880 --> 00:00:35,660
that code here from insert place with the promise and so on

8
00:00:35,980 --> 00:00:41,840
but the query will change now and also the arguments, I need no arguments because we'll not inject any

9
00:00:41,840 --> 00:00:43,110
arguments here.

10
00:00:43,340 --> 00:00:48,620
Instead of running insert into, we need to run a different query and that will be a very simple

11
00:00:48,620 --> 00:00:55,520
query, I want to select all places in my places table which is done by running select * which means

12
00:00:55,520 --> 00:01:02,170
I want to get all columns, all fields in this database from places.

13
00:01:02,180 --> 00:01:09,740
Now if you know a bit of SQL, now you could also add a where clause to say where ID greater one

14
00:01:09,740 --> 00:01:11,780
for example and so on but I'll not do it here,

15
00:01:11,780 --> 00:01:16,150
I want to get all places so I'll run this query and leave the rest as it is

16
00:01:16,310 --> 00:01:20,870
and now we just need to go to our actions and make sure we have an action for this.

17
00:01:21,530 --> 00:01:25,670
So first of all, I'll add a new identifier here, a new action

18
00:01:25,700 --> 00:01:33,740
identifier, set places, just as we did in the HTTP module for setting the places we fetched from a server

19
00:01:33,970 --> 00:01:46,020
and with that, I can create a new action creator here where I say load places maybe, where this is the name

20
00:01:46,860 --> 00:01:54,980
and in this action creator, I will return this inner function and I use async await in there,

21
00:01:54,990 --> 00:02:01,590
so this function looks like this, where in the end of course we dispatch an action object where the type

22
00:02:01,590 --> 00:02:05,300
should be set places and where we set all the places we loaded

23
00:02:06,020 --> 00:02:14,340
but of course that's the part that's missing. We get the places by running this fetch places function

24
00:02:14,340 --> 00:02:17,700
which I just defined in the helpers file, in the db file there,

25
00:02:17,700 --> 00:02:19,570
so let's import it from there

26
00:02:20,370 --> 00:02:26,870
and then here in the load places action creator, we can run fetch places like this,

27
00:02:26,940 --> 00:02:28,970
this returns a promise so we can await this

28
00:02:28,970 --> 00:02:32,300
and again we get our db result here.

29
00:02:32,390 --> 00:02:37,820
Now we can also wrap this into a try catch block to make sure we catch any errors that could occur,

30
00:02:37,820 --> 00:02:40,580
so here if we have an error, I will just throw it,

31
00:02:41,270 --> 00:02:43,900
so we need to handle it in the component actually,

32
00:02:44,210 --> 00:02:48,620
I'm not doing that here but you could handle it in the same way you handled it in the HTTP module

33
00:02:48,620 --> 00:02:50,420
for example

34
00:02:50,540 --> 00:02:58,000
and with that here eventually, also in the try block, we can dispatch the places which we fetch. For that

35
00:02:58,010 --> 00:03:00,980
it's important for us to understand how the database result looks like,

36
00:03:00,980 --> 00:03:07,490
so I will console log DB result here so that we can look into it and now I want to execute load places

37
00:03:07,520 --> 00:03:11,800
in my places list screen because that is where I need all the places, right?

38
00:03:11,840 --> 00:03:23,020
So in here, I will import star as places actions from the store folder and there, the places actions file

39
00:03:23,410 --> 00:03:30,670
and we need to dispatch an action, so I will import use dispatch from React Redux and then here we create

40
00:03:30,700 --> 00:03:34,680
that dispatch function by executing use dispatch

41
00:03:34,900 --> 00:03:41,830
and now when this component loads, which we can in the end find out with the help of use effect, I want

42
00:03:41,830 --> 00:03:44,520
to dispatch this data loading action.

43
00:03:44,520 --> 00:03:49,800
So here we can run use effect and in the function that we pass to use effect,

44
00:03:49,840 --> 00:03:56,170
I want to dispatch places actions.loadPlaces,

45
00:03:56,180 --> 00:04:05,090
right, like this. Now that means that for this effect, we have one dependency, that's the dispatch

46
00:04:05,090 --> 00:04:07,040
action which should never change,

47
00:04:07,100 --> 00:04:11,960
so therefore this should only run once when the component is created, which is exactly the behavior I

48
00:04:11,960 --> 00:04:12,610
want here.

49
00:04:13,910 --> 00:04:19,400
So now the load places action should be dispatched when our app starts up and indeed, it did start

50
00:04:19,400 --> 00:04:25,160
up here on iOS already and now also on Android and therefore here in the log, I see some output

51
00:04:25,160 --> 00:04:29,820
and that's the Android log and that's the result from the load places action in the

52
00:04:29,820 --> 00:04:32,960
end. As you see it, that's the result of our database action,

53
00:04:32,960 --> 00:04:38,100
insert ID is undefined because we didn't insert something, we instead just got something.

54
00:04:38,300 --> 00:04:43,820
We have that rows field and that's another object which has an _array field which holds an array

55
00:04:43,820 --> 00:04:46,990
of objects and in the end, that's our place data, right?

56
00:04:47,000 --> 00:04:49,300
This object in here, that's our place data,

57
00:04:49,310 --> 00:04:52,940
it has the address, the ID, imageUri and so on.

58
00:04:52,940 --> 00:04:57,830
So it's in the result in rows and then _array,

59
00:04:57,830 --> 00:04:59,410
that's where our data lives.

60
00:04:59,450 --> 00:05:06,110
So that's what we need in the places actions file here when we dispatch our places that we want to display,

61
00:05:06,110 --> 00:05:08,150
that we want to load into Redux,

62
00:05:08,150 --> 00:05:14,600
that should be dbResult.rows._array.

63
00:05:14,680 --> 00:05:21,790
Now of course, that then triggers the set places actions, so now in the places reducer, we need to care

64
00:05:21,790 --> 00:05:22,820
about this,

65
00:05:22,840 --> 00:05:27,140
so here I add a case, set places,

66
00:05:27,250 --> 00:05:35,210
make sure you import the set places identifier here and in the set places case, I can return a new state

67
00:05:35,210 --> 00:05:41,310
snapshot where my places are basically set to the places I got back from the database

68
00:05:41,750 --> 00:05:47,510
and I do this by setting it to action.places because in my actions file, I have this places key

69
00:05:47,510 --> 00:05:48,300
in the action right

70
00:05:48,320 --> 00:05:50,410
which is the loaded place data

71
00:05:51,380 --> 00:05:59,520
and there I just want to map this array into a new array to transform the data, to transform every single

72
00:05:59,520 --> 00:06:07,170
place into a new place that follows my place model where I for example convert the ID of the place

73
00:06:07,230 --> 00:06:09,680
we loaded to a string which is optional,

74
00:06:09,690 --> 00:06:13,670
I just want to show you how you could also then transform the data if you needed to,

75
00:06:13,710 --> 00:06:17,440
you can do this with the map method which maps this array into a new array.

76
00:06:17,670 --> 00:06:18,140
So there

77
00:06:18,150 --> 00:06:24,660
I do that, I keep the title though, I keep the imageUri and I just don't need address and latitude

78
00:06:24,660 --> 00:06:25,650
and so on right now,

79
00:06:26,190 --> 00:06:29,520
that's also why I'm mapping this so that I can draw up some data,

80
00:06:29,520 --> 00:06:35,720
so now I map this array of places I load into a new array of places where I only care about the ID,

81
00:06:35,720 --> 00:06:36,900
title and imageUri.

82
00:06:37,970 --> 00:06:43,670
Now with that if we save this, we should actually be able to see our places being loaded here on Android,

83
00:06:43,880 --> 00:06:49,880
that one place which we stored before and indeed, here it is. So that's our place,

84
00:06:49,890 --> 00:06:53,180
that's place loaded. With that,

85
00:06:53,410 --> 00:06:57,850
now we can focus on also getting the user location of course.