1
00:00:02,290 --> 00:00:05,850
To set up Redux, I'll follow the same approach as I did earlier in the course,

2
00:00:05,950 --> 00:00:13,980
I'll add a store folder and in there, I'll have my places-action.js file and my places-reducer.js

3
00:00:14,020 --> 00:00:14,470
file.

4
00:00:14,470 --> 00:00:16,310
That's of course a bit different than before,

5
00:00:16,330 --> 00:00:19,310
there I had an actions and a reducers subfolder,

6
00:00:19,390 --> 00:00:21,520
you can absolutely do the same here,

7
00:00:21,520 --> 00:00:25,950
since I have only one action and one reducer though, I'll keep this in two files

8
00:00:25,960 --> 00:00:27,820
but you could have subfolders and so on,

9
00:00:27,820 --> 00:00:34,840
that's totally up to you. Now in the places reducer, I'll define how my state should look like for this

10
00:00:34,840 --> 00:00:37,990
part of my total state and that will be very simple,

11
00:00:37,990 --> 00:00:43,510
my initial state here is just a Javascript object where I want to have a places key which is empty, an

12
00:00:43,510 --> 00:00:47,810
empty array at the beginning because I'll have an array of places and that's it.

13
00:00:47,830 --> 00:00:53,830
So therefore here, I can export this reducer function which takes a state that is set to the initial

14
00:00:53,830 --> 00:00:54,190
state

15
00:00:54,190 --> 00:01:01,450
if no other state is passed in and an action and in there for now, I'll just return that state, soon of

16
00:01:01,450 --> 00:01:08,320
course we'll add logic to handle different actions and for example, add a new place. In the places actions

17
00:01:08,320 --> 00:01:16,890
file, I'll export a new constant, add place, which is one action identifier I'll need and I'll add an action

18
00:01:16,890 --> 00:01:23,640
creator function, add place, which should take some data about the place and for the moment, that's just

19
00:01:23,640 --> 00:01:26,290
the title, later that will be more

20
00:01:26,290 --> 00:01:28,420
and here I want to return my action object

21
00:01:28,420 --> 00:01:35,560
then where the type is add place and where I then just have my place data let's say which at the moment

22
00:01:35,560 --> 00:01:41,200
of course is only made up of the title but later again, that will be more.

23
00:01:41,260 --> 00:01:43,630
That's the basic Redux app, now of course in app.js

24
00:01:43,660 --> 00:01:50,670
we need to wire everything up. So in there as you learned it in this course, we can import something from

25
00:01:51,280 --> 00:02:02,010
Redux and also something from React Redux and also import Redux Thunk from Redux Thunk,

26
00:02:02,040 --> 00:02:05,160
so from this package we also installed. Now from Redux,

27
00:02:05,160 --> 00:02:12,270
we need create store and combine reducers and also apply middleware to apply Redux Thunk and from

28
00:02:12,270 --> 00:02:15,210
React Redux, we need that provider component

29
00:02:15,690 --> 00:02:21,240
and with that, just as we did it multiple times in the course, we can create our root reducer with the

30
00:02:21,240 --> 00:02:23,120
help of combine reducers.

31
00:02:23,130 --> 00:02:26,370
This takes an object where we merge all reducers together,

32
00:02:26,370 --> 00:02:33,090
now obviously we only have one reducer here and that's the places reducer which we import from the store

33
00:02:33,090 --> 00:02:37,140
folder and there, it's the places reducer file

34
00:02:37,140 --> 00:02:43,680
but of course you could have more reducers in your app and I'll map this to places, so the places reducer

35
00:02:43,710 --> 00:02:46,690
is mapped to the places identifier here.

36
00:02:46,890 --> 00:02:53,460
Now with that, we can create our store with the create store function and this function takes the root

37
00:02:53,490 --> 00:03:00,300
reducer and we can also pass in a second argument where we call apply middleware and pass Redux Thunk

38
00:03:00,330 --> 00:03:07,800
to that function so that the Redux Thunk package is kind of plugged into our Redux flow here. With all

39
00:03:07,800 --> 00:03:15,810
of that set up, we can wrap our places navigator with the provider component because every screen in our

40
00:03:15,810 --> 00:03:21,750
app, in our navigator, should have access to the store and to provider, we pass the store through the store

41
00:03:21,750 --> 00:03:30,160
prop and that's the Redux setup we also saw multiple times throughout this course. With Redux set up, we can go

42
00:03:30,160 --> 00:03:35,380
to the new place screen and make sure that here in the save place handler which is triggered when we

43
00:03:35,380 --> 00:03:41,530
click this button, we do actually add a new place which for the moment only consists of its title but

44
00:03:41,530 --> 00:03:49,450
of course, that will change throughout this course. To do that, we can import use dispatch from React Redux

45
00:03:50,730 --> 00:03:57,300
and simply get access to the dispatch function by executing use dispatch up there and also of course

46
00:03:57,390 --> 00:04:03,930
import our action, for example again with using this import merging syntax here, with import everything

47
00:04:04,380 --> 00:04:14,370
as places actions from the store and there, the places actions file and with that, we can go to save

48
00:04:14,370 --> 00:04:21,960
place handler, call dispatch here and dispatch places actions add place and forward the title which

49
00:04:21,960 --> 00:04:29,500
is of course stored in our title value, so in this here. Now with that, we'll be able to dispatch this

50
00:04:29,650 --> 00:04:32,170
action, in the places reducer,

51
00:04:32,170 --> 00:04:44,400
we can now switch our action type or use if checks of course and look for the add place state or action

52
00:04:44,400 --> 00:04:50,400
which we import from places actions, also add the default case by the way where we just

53
00:04:50,400 --> 00:04:56,160
return the state and therefore we can get rid of this return statement down there and now if add place

54
00:04:56,220 --> 00:04:57,240
is what we got,

55
00:04:57,930 --> 00:05:04,260
well then we can create a new place here and for that, also just as before in this course, I'll add

56
00:05:04,260 --> 00:05:10,290
a models folder with a place.js file in there where I want to define how a place should look like

57
00:05:10,290 --> 00:05:15,900
in this application, simply just to have an easy way of creating new place objects that are always the

58
00:05:15,900 --> 00:05:17,190
same.

59
00:05:17,190 --> 00:05:24,510
So here, I'll create a class and export this as the file default and now of course it's up to you how

60
00:05:24,510 --> 00:05:30,180
you want your place to look like, I'll define mine with the help of the constructor to have an ID

61
00:05:30,570 --> 00:05:31,460
and a title

62
00:05:31,530 --> 00:05:32,670
and later we'll add more

63
00:05:32,670 --> 00:05:34,020
but for now, that's it

64
00:05:34,230 --> 00:05:41,280
and I'll store my ID here and I store my title here in a property. With that we have a blueprint for

65
00:05:41,280 --> 00:05:45,390
new places, back in the places reducer,

66
00:05:45,630 --> 00:05:46,440
we can now use that.

67
00:05:46,440 --> 00:05:55,170
So there we can import place from the models folder and there, the place.js file and then here, create

68
00:05:55,170 --> 00:05:58,080
a new place by calling new place,

69
00:05:58,080 --> 00:06:04,560
so by initializing or by instantiating a new place based on our class and for the ID, I'll for the moment

70
00:06:04,560 --> 00:06:12,050
use a dummy ID of the current date timestamp and the title however is of course something we can set

71
00:06:12,060 --> 00:06:17,130
because that's part of our action, there in the place data we'll have a title property which holds the

72
00:06:17,130 --> 00:06:18,720
title the user set,

73
00:06:18,720 --> 00:06:24,630
so here I can set this to action.placeData.title.

74
00:06:24,630 --> 00:06:26,530
This creates a new place object

75
00:06:26,670 --> 00:06:33,600
and now we can return a new state here where places and I don't need to copy the old state because I

76
00:06:33,600 --> 00:06:39,480
have nothing else in my state here and I won't add anything so I can just return a brand new state object,

77
00:06:39,900 --> 00:06:44,020
where places is now state.places.concat,

78
00:06:44,040 --> 00:06:49,710
so that takes the old array, adds a new item and returns a brand new array which replaces the old the

79
00:06:49,710 --> 00:06:51,050
array here in our state

80
00:06:51,300 --> 00:06:59,310
and I concat my new place of course. With that, we should have a list of places which we manage. In

81
00:06:59,310 --> 00:07:00,220
the next lecture,

82
00:07:00,240 --> 00:07:06,390
we can now worry about outputting this here on the place list screen. Just one other thing, when we add

83
00:07:06,390 --> 00:07:09,310
a new place here by clicking the save place handler,

84
00:07:09,390 --> 00:07:12,560
I also want to go back to the places list screen, so here

85
00:07:12,570 --> 00:07:20,610
after dispatching this action, I'll actually use props navigation to go back, so to go back to the place

86
00:07:20,610 --> 00:07:25,530
list screen. And now let's work on that places list screen and let's make sure we do actually output

87
00:07:25,530 --> 00:07:26,760
a list of places there.