1
00:00:01,080 --> 00:00:04,860
‫In this lecture, I want to show you the old way.

2
00:00:04,860 --> 00:00:07,620
‫So before React hooks existed

3
00:00:07,620 --> 00:00:11,583
‫of connecting React components to the Redux store.

4
00:00:13,140 --> 00:00:16,800
‫So let's open up the BalanceDisplay component

5
00:00:16,800 --> 00:00:20,040
‫which is the one we still have to work on.

6
00:00:20,040 --> 00:00:23,460
‫So the use selector and use dispatch hooks

7
00:00:23,460 --> 00:00:25,950
‫that we have used up until this point

8
00:00:25,950 --> 00:00:30,330
‫are the modern way of using Redux in React.

9
00:00:30,330 --> 00:00:35,330
‫So before hooks existed, we had to use the Connect API

10
00:00:35,520 --> 00:00:39,420
‫and you will still see this API in older code bases.

11
00:00:39,420 --> 00:00:43,380
‫And so since I want to teach you all of Redux,

12
00:00:43,380 --> 00:00:46,050
‫so both the modern and the old way,

13
00:00:46,050 --> 00:00:50,730
‫let's use this old Connect API in this component

14
00:00:50,730 --> 00:00:54,033
‫and I can immediately tell you that it's a lot worse.

15
00:00:54,990 --> 00:00:59,610
‫So basically the way we usually used that API

16
00:00:59,610 --> 00:01:03,120
‫was simply with the connect function right here.

17
00:01:03,120 --> 00:01:07,050
‫So besides exporting those hooks that we have been using,

18
00:01:07,050 --> 00:01:12,050
‫the React Redux library also exports that connect function.

19
00:01:13,200 --> 00:01:16,470
‫And so this connect function takes in another function

20
00:01:16,470 --> 00:01:19,380
‫which then in turn will return a new function

21
00:01:19,380 --> 00:01:23,763
‫which will then accept our component as a new argument.

22
00:01:24,720 --> 00:01:26,790
‫So that sounds really messy

23
00:01:26,790 --> 00:01:30,660
‫but what matters is that this is what it looks like.

24
00:01:30,660 --> 00:01:33,210
‫And that function that I just mentioned

25
00:01:33,210 --> 00:01:36,017
‫is usually called mapStateToProps.

26
00:01:39,210 --> 00:01:43,710
‫And what this does is exactly what the name says.

27
00:01:43,710 --> 00:01:45,720
‫So basically this function here

28
00:01:45,720 --> 00:01:49,473
‫receives the state object from the store.

29
00:01:50,730 --> 00:01:54,840
‫And then here, all we have to do is to return an object

30
00:01:54,840 --> 00:01:57,630
‫in which we can define the name of a prop

31
00:01:57,630 --> 00:02:00,540
‫that our component should receive.

32
00:02:00,540 --> 00:02:02,190
‫So that sounds confusing.

33
00:02:02,190 --> 00:02:03,333
‫So I will just do it.

34
00:02:04,470 --> 00:02:07,410
‫So let's say, we call it balance,

35
00:02:07,410 --> 00:02:10,740
‫and then the value of this balance should be

36
00:02:10,740 --> 00:02:15,740
‫state.account.balance.

37
00:02:16,200 --> 00:02:20,040
‫So we could also take the entire state or just the account,

38
00:02:20,040 --> 00:02:23,130
‫but all we want is really this balance.

39
00:02:23,130 --> 00:02:27,153
‫And so now we pass that function here into connect.

40
00:02:29,040 --> 00:02:32,170
‫All right, and so what's gonna happen then

41
00:02:33,240 --> 00:02:37,380
‫is that this function here will return a new function.

42
00:02:37,380 --> 00:02:40,260
‫And so this here will then become a function

43
00:02:40,260 --> 00:02:42,630
‫and the balance display component

44
00:02:42,630 --> 00:02:45,600
‫will then be the argument of that new function.

45
00:02:45,600 --> 00:02:49,950
‫And so that new function is basically a new component.

46
00:02:49,950 --> 00:02:53,883
‫And that new component will have the balance prop.

47
00:02:56,460 --> 00:02:58,263
‫So just like this.

48
00:02:59,190 --> 00:03:01,650
‫So we defined it as balance here,

49
00:03:01,650 --> 00:03:03,870
‫and so then that's the name of the prop.

50
00:03:03,870 --> 00:03:06,063
‫And so therefore, mapStateToProps.

51
00:03:07,290 --> 00:03:09,750
‫So that's the name of the function right here.

52
00:03:09,750 --> 00:03:12,600
‫And so what it does is to map some state

53
00:03:12,600 --> 00:03:15,633
‫from our store to a prop,

54
00:03:16,650 --> 00:03:18,600
‫so a prop in this component.

55
00:03:18,600 --> 00:03:23,600
‫And so now we can use that balance right here to display it

56
00:03:25,140 --> 00:03:28,950
‫and we pass it then first into this format currency function

57
00:03:28,950 --> 00:03:31,053
‫that I already had provided here.

58
00:03:33,420 --> 00:03:37,260
‫And so we get our $50.

59
00:03:37,260 --> 00:03:38,430
‫Now for some reason,

60
00:03:38,430 --> 00:03:41,790
‫sometimes this connection doesn't work in the beginning.

61
00:03:41,790 --> 00:03:43,920
‫And so if that's the case for you,

62
00:03:43,920 --> 00:03:47,370
‫so if your balance is not showing up there,

63
00:03:47,370 --> 00:03:49,860
‫then just close the application.

64
00:03:49,860 --> 00:03:54,000
‫So cancel it in the terminal and then restart it again,

65
00:03:54,000 --> 00:03:56,670
‫and so that should fix it.

66
00:03:56,670 --> 00:03:57,900
‫All right?

67
00:03:57,900 --> 00:04:00,060
‫Now of course, it's not really important

68
00:04:00,060 --> 00:04:01,680
‫to understand how this works

69
00:04:01,680 --> 00:04:04,200
‫because you will not use this on your own.

70
00:04:04,200 --> 00:04:07,200
‫This is just so that when you see this in the wild,

71
00:04:07,200 --> 00:04:10,200
‫at least that you know what this does.

72
00:04:10,200 --> 00:04:12,780
‫So again, before we had hooks,

73
00:04:12,780 --> 00:04:14,580
‫this is the way we needed to do it

74
00:04:14,580 --> 00:04:18,060
‫because there was no other way of getting the state

75
00:04:18,060 --> 00:04:19,773
‫somehow into the component.

76
00:04:20,670 --> 00:04:23,703
‫And so now if we deposit something here,

77
00:04:24,960 --> 00:04:26,943
‫then that updates right there.

78
00:04:27,810 --> 00:04:31,140
‫Okay, and this is actually all.

79
00:04:31,140 --> 00:04:32,460
‫Now, in the next lecture,

80
00:04:32,460 --> 00:04:35,370
‫we will take the complexity up a notch

81
00:04:35,370 --> 00:04:38,970
‫by talking about Redux Middleware and Thunks,

82
00:04:38,970 --> 00:04:42,150
‫which we can use for asynchronous operations,

83
00:04:42,150 --> 00:04:43,860
‫like data fetching.

84
00:04:43,860 --> 00:04:45,810
‫So that's gonna be pretty exciting.

85
00:04:45,810 --> 00:04:47,523
‫And so let's now move on.