1
00:00:01,260 --> 00:00:02,670
‫So now it's time

2
00:00:02,670 --> 00:00:05,280
‫to finally connect our Redux store

3
00:00:05,280 --> 00:00:07,413
‫with the React application.

4
00:00:08,790 --> 00:00:12,900
‫And so to do that, we need to bring in another package,

5
00:00:12,900 --> 00:00:17,820
‫and so that is React Redux package,

6
00:00:19,110 --> 00:00:21,660
‫and so only through this package

7
00:00:21,660 --> 00:00:24,600
‫is how Redux and React applications

8
00:00:24,600 --> 00:00:27,480
‫can actually talk to each other.

9
00:00:27,480 --> 00:00:30,003
‫So let's wait for this to install,

10
00:00:31,110 --> 00:00:33,270
‫and now once they're done,

11
00:00:33,270 --> 00:00:37,980
‫let's actually provide our store to the application.

12
00:00:37,980 --> 00:00:39,660
‫And so this actually works

13
00:00:39,660 --> 00:00:43,383
‫in a very similar way as the Context API.

14
00:00:44,310 --> 00:00:45,960
‫So let me show you.

15
00:00:45,960 --> 00:00:48,360
‫What we need to import now

16
00:00:48,360 --> 00:00:52,773
‫from the React Redux package is the provider.

17
00:00:55,410 --> 00:00:57,300
‫So, just like this,

18
00:00:57,300 --> 00:01:02,100
‫and now we can wrap our entire application in that provider.

19
00:01:02,100 --> 00:01:05,523
‫So again, just like we do with the Context API,

20
00:01:06,600 --> 00:01:09,340
‫so we use the provider component

21
00:01:10,560 --> 00:01:12,630
‫place the application in there,

22
00:01:12,630 --> 00:01:16,113
‫and now here we need to pass the store prop.

23
00:01:17,340 --> 00:01:20,760
‫So, a prop called store, and as you can guess,

24
00:01:20,760 --> 00:01:24,123
‫this is where we pass in our Redux store.

25
00:01:24,960 --> 00:01:27,270
‫So, that is also called store.

26
00:01:27,270 --> 00:01:29,100
‫So, this one right here.

27
00:01:29,100 --> 00:01:33,270
‫And with this, we have then successfully connected the two.

28
00:01:33,270 --> 00:01:35,100
‫So, that's it.

29
00:01:35,100 --> 00:01:39,210
‫So, now our application knows about the Redux store,

30
00:01:39,210 --> 00:01:42,810
‫and so now our application knows about the Redux store

31
00:01:42,810 --> 00:01:45,390
‫which means that every single component

32
00:01:45,390 --> 00:01:49,140
‫in the application can now read data from the store

33
00:01:49,140 --> 00:01:51,990
‫and can dispatch actions to it.

34
00:01:51,990 --> 00:01:55,110
‫So, that is once again very similar

35
00:01:55,110 --> 00:01:59,190
‫to the behavior that we see in the Context API.

36
00:01:59,190 --> 00:02:02,190
‫So, it's basically broadcasting global state

37
00:02:02,190 --> 00:02:06,420
‫into every component that actually wants to read it.

38
00:02:06,420 --> 00:02:10,020
‫So, let's start then by reading the state.

39
00:02:10,020 --> 00:02:14,310
‫So, let's come here to the customer component.

40
00:02:14,310 --> 00:02:16,620
‫So, this is our simplest one,

41
00:02:16,620 --> 00:02:19,650
‫and so let's start with this one.

42
00:02:19,650 --> 00:02:24,090
‫So, in order to read data from the Redux store,

43
00:02:24,090 --> 00:02:27,540
‫all we have to do is to use the use selector hook

44
00:02:27,540 --> 00:02:30,243
‫that is provided by React Redux.

45
00:02:31,860 --> 00:02:36,360
‫So use Selector and there we immediately see it,

46
00:02:36,360 --> 00:02:40,260
‫as it has been imported from React Redux.

47
00:02:40,260 --> 00:02:42,720
‫So again, this package is necessary

48
00:02:42,720 --> 00:02:46,173
‫so that these two technologies can talk to each other.

49
00:02:47,760 --> 00:02:52,020
‫Now, this useSelector hook takes a callback function,

50
00:02:52,020 --> 00:02:55,320
‫and this function takes as the single argument,

51
00:02:55,320 --> 00:02:57,153
‫the entire Redux store.

52
00:02:58,230 --> 00:03:00,660
‫So we usually call that store,

53
00:03:00,660 --> 00:03:02,220
‫but then from that store,

54
00:03:02,220 --> 00:03:04,803
‫we can simply get the data that we want.

55
00:03:05,790 --> 00:03:10,320
‫So let's say store.customer,

56
00:03:10,320 --> 00:03:12,780
‫and so these names right here.

57
00:03:12,780 --> 00:03:16,500
‫So the .customer is exactly the name

58
00:03:16,500 --> 00:03:17,970
‫that we provided here.

59
00:03:17,970 --> 00:03:19,740
‫And so that's also the name

60
00:03:19,740 --> 00:03:22,920
‫that we saw earlier here in our console.logs

61
00:03:22,920 --> 00:03:26,190
‫when we were checking out the entire state.

62
00:03:26,190 --> 00:03:28,200
‫So if we change this here, for example,

63
00:03:28,200 --> 00:03:32,573
‫to a then here that would also be called store.a, okay?

64
00:03:35,040 --> 00:03:36,810
‫And then we can just store that

65
00:03:36,810 --> 00:03:38,553
‫into any variable that we want.

66
00:03:44,730 --> 00:03:45,813
‫So, let's see.

67
00:03:47,610 --> 00:03:51,210
‫And yeah, there it is.

68
00:03:51,210 --> 00:03:53,250
‫Now, it is, of course, still empty

69
00:03:53,250 --> 00:03:55,230
‫because that is the default state,

70
00:03:55,230 --> 00:03:57,720
‫and we didn't add any customer yet,

71
00:03:57,720 --> 00:04:01,173
‫but we can still already see that this is working.

72
00:04:02,550 --> 00:04:05,760
‫Now, let's actually just get the customer's name

73
00:04:05,760 --> 00:04:07,380
‫here from the store

74
00:04:07,380 --> 00:04:11,100
‫and we should really do as much data manipulation,

75
00:04:11,100 --> 00:04:14,640
‫so to say, here in this selector function.

76
00:04:14,640 --> 00:04:18,330
‫So, if we want to get only the full name,

77
00:04:18,330 --> 00:04:21,930
‫then we should write that in here, so in this function,

78
00:04:21,930 --> 00:04:23,520
‫and inside this function,

79
00:04:23,520 --> 00:04:27,270
‫we can also do all other kinds of computations,

80
00:04:27,270 --> 00:04:29,250
‫and we will see an example of that

81
00:04:29,250 --> 00:04:32,163
‫in the next big application that we're gonna build.

82
00:04:33,270 --> 00:04:36,300
‫For now, I will just grab the full name here

83
00:04:36,300 --> 00:04:40,833
‫and then let's display the customer right here,

84
00:04:43,170 --> 00:04:45,450
‫which, again, will be empty here.

85
00:04:45,450 --> 00:04:48,900
‫So welcome no one basically,

86
00:04:48,900 --> 00:04:52,080
‫but yeah, we'll fix that in a minute.

87
00:04:52,080 --> 00:04:54,270
‫So for now, what I want you to understand

88
00:04:54,270 --> 00:04:58,380
‫is that this useSelector basically creates a subscription

89
00:04:58,380 --> 00:04:59,490
‫to the store.

90
00:04:59,490 --> 00:05:02,400
‫And so just like we are already used to,

91
00:05:02,400 --> 00:05:04,530
‫whenever the store changes,

92
00:05:04,530 --> 00:05:06,840
‫then this component that is subscribed

93
00:05:06,840 --> 00:05:09,630
‫to that store will re-render.

94
00:05:09,630 --> 00:05:10,740
‫Now, behind the scenes,

95
00:05:10,740 --> 00:05:14,370
‫Redux also implements some performance optimizations

96
00:05:14,370 --> 00:05:17,070
‫which are probably similar to the ones

97
00:05:17,070 --> 00:05:20,670
‫that we talked about earlier in the Context API.

98
00:05:20,670 --> 00:05:24,660
‫But what matters is that the mechanism here is similar

99
00:05:24,660 --> 00:05:27,030
‫to the one that we already know about.

100
00:05:27,030 --> 00:05:29,670
‫So the state in the store changes,

101
00:05:29,670 --> 00:05:32,670
‫and so the component re-renders.

102
00:05:32,670 --> 00:05:34,830
‫Okay, and so next up,

103
00:05:34,830 --> 00:05:38,640
‫it is actually time to create our first customer.

104
00:05:38,640 --> 00:05:39,870
‫And so in the next video,

105
00:05:39,870 --> 00:05:43,673
‫we will learn how to dispatch actions to the store.