1
00:00:00,980 --> 00:00:04,620
In the last video we started talking about the redux side of this application.

2
00:00:04,820 --> 00:00:08,730
So in total we're going to have the two reducers in one action creator.

3
00:00:08,960 --> 00:00:14,180
Now that we understand the react side and the redux side it's time to understand how these two things

4
00:00:14,180 --> 00:00:15,720
are going to fit together.

5
00:00:15,800 --> 00:00:19,670
And remember that is the job of the re-act redux library.

6
00:00:19,670 --> 00:00:23,210
So in this video we're going to talk about how to get these things to play nicely together using that

7
00:00:23,210 --> 00:00:23,920
library.

8
00:00:23,930 --> 00:00:25,490
Let's get to it.

9
00:00:25,490 --> 00:00:27,450
All right so first diagram right here.

10
00:00:27,590 --> 00:00:28,790
Now I'm going to be honest with you.

11
00:00:28,820 --> 00:00:33,050
Some of the things I'm going to show you are going to seem a little bit complicated in this because

12
00:00:33,080 --> 00:00:38,510
I want you to understand some of the behind the scenes stuff that is going on with the reactor redux

13
00:00:38,510 --> 00:00:43,250
library but you're not going to really understand some of these moving parts until you actually write

14
00:00:43,250 --> 00:00:44,490
the code out for it.

15
00:00:44,540 --> 00:00:50,210
So just take this diagram and the next one that we're going to take a look at which just I don't know.

16
00:00:50,420 --> 00:00:52,460
You know a high level overview I suppose.

17
00:00:52,550 --> 00:00:53,960
And if it's not entirely clear.

18
00:00:53,990 --> 00:00:55,070
That's totally fine.

19
00:00:55,070 --> 00:00:59,480
Let's try to write out some code first and then we'll say OK now we understand it.

20
00:00:59,690 --> 00:01:03,490
OK so here's what's going to happen using re-act redux.

21
00:01:03,500 --> 00:01:05,970
We're going to create two new components.

22
00:01:06,050 --> 00:01:09,660
These components are called the provider and the connect.

23
00:01:09,830 --> 00:01:13,710
These are both components that are created by re-act redux.

24
00:01:13,760 --> 00:01:18,260
You and I were going to create instances of them and then we want to pass some props into both them

25
00:01:18,470 --> 00:01:20,560
to configure exactly how they work.

26
00:01:20,760 --> 00:01:26,770
So remember that provider and connect implemented by re-act redux.

27
00:01:26,950 --> 00:01:31,930
You saw a moment ago when we were working on Copen that after we took all of our producers and combined

28
00:01:31,930 --> 00:01:37,060
them together we then eventually ended up with something called the redux store and that store is what

29
00:01:37,060 --> 00:01:40,720
contains all of our producers and all the state of our application.

30
00:01:40,950 --> 00:01:46,540
We are going to take that store that gets created and we're going to pass it as a prop into this provider

31
00:01:46,570 --> 00:01:47,360
thing.

32
00:01:47,640 --> 00:01:52,960
The provider is going to be rendered at the very very top of our application hierarchy even above the

33
00:01:52,960 --> 00:01:53,970
app component.

34
00:01:54,010 --> 00:01:57,790
So technically we're going to show the app inside of this provider thing.

35
00:01:58,980 --> 00:02:03,240
The provider is then going to have that eternal reference to the store right here.

36
00:02:03,420 --> 00:02:09,300
That word provider or the term provider essentially means it is providing information to all of the

37
00:02:09,300 --> 00:02:12,120
different components inside of rap.

38
00:02:12,180 --> 00:02:15,510
Now the next thing we're going to do is focus on that song list.

39
00:02:15,510 --> 00:02:18,480
You'll notice I did not show the song detail here just for clarity.

40
00:02:18,540 --> 00:02:22,110
So everything we're about to talk about is going to happen to the song detail as well.

41
00:02:22,410 --> 00:02:26,460
But I just want to talk about the song list in isolation just to make the diagram a little bit more

42
00:02:26,460 --> 00:02:27,300
straightforward.

43
00:02:28,850 --> 00:02:33,560
So after wiring up this Ferriter we're then going to find every component inside of our application

44
00:02:33,740 --> 00:02:40,010
that needs to somehow access the data that is stored inside of our store the song list definitely needs

45
00:02:40,010 --> 00:02:45,490
to know about the list of songs that is produced by this producer that produces the list of songs.

46
00:02:45,770 --> 00:02:52,370
So because of that we're going to create a instance of the connect component right above the song list.

47
00:02:52,370 --> 00:02:58,060
So we're going to essentially wrap this songless component with this Kinect thing that connect tech

48
00:02:58,070 --> 00:02:59,620
or the connect function or.

49
00:02:59,860 --> 00:03:01,070
To me the Kinect component.

50
00:03:01,070 --> 00:03:03,440
Those are all valid terms as you will see in just a minute.

51
00:03:03,440 --> 00:03:07,340
I usually refer to it as the connect tag you'll see why in just a moment but the connect component right

52
00:03:07,340 --> 00:03:09,920
here is a very special component.

53
00:03:09,920 --> 00:03:15,330
It is special because it can communicate with the provider tag at the very top of our hierarchy.

54
00:03:15,800 --> 00:03:20,990
It connect it communicates with that provider not through the props system but through a completely

55
00:03:20,990 --> 00:03:22,750
different system of communication.

56
00:03:22,760 --> 00:03:29,030
Inside if we act that we have not discussed yet called the context system we are going to discuss the

57
00:03:29,030 --> 00:03:31,000
context system later on inside of course.

58
00:03:31,100 --> 00:03:37,280
But right now just understand that the context system essentially allows any parent component to communicate

59
00:03:37,280 --> 00:03:42,720
directly with any child component even if there are other components in between them such as the app.

60
00:03:42,740 --> 00:03:45,380
In this case.

61
00:03:45,600 --> 00:03:51,150
So at some point in time when we put that Kinect tag in there we're going to configure the Kinect tag

62
00:03:51,210 --> 00:03:56,310
and tell it that when it gets rendered on the screen and then when it renders the song list as a child

63
00:03:56,640 --> 00:04:02,760
it needs to reach back up to that provider and tell the provider that it needs to get the list of songs

64
00:04:02,850 --> 00:04:04,950
that are contained within our store.

65
00:04:05,040 --> 00:04:09,780
So the Connect is essentially going to send a little message up say hey tell me any time that the list

66
00:04:09,780 --> 00:04:11,920
of song changes just let me know.

67
00:04:12,240 --> 00:04:14,760
And then the provider in return is going to say all right.

68
00:04:14,760 --> 00:04:15,490
Sounds great.

69
00:04:15,570 --> 00:04:17,870
Well here's our current list of songs.

70
00:04:17,950 --> 00:04:22,470
And so it's going to send that list of songs back down to the connect function or the connect component

71
00:04:22,470 --> 00:04:27,330
down for that connect component in turn is going to take that list of songs.

72
00:04:28,630 --> 00:04:35,050
And pass it as a prop down into our song list component's that's what's going on with the data that

73
00:04:35,050 --> 00:04:36,480
is inside of our store.

74
00:04:36,830 --> 00:04:40,110
But remember we've also got these action creators as well.

75
00:04:40,220 --> 00:04:44,380
The action creators are not stored in any way inside our store.

76
00:04:44,540 --> 00:04:46,610
Instead we call an action creator.

77
00:04:46,610 --> 00:04:52,190
We take the action that gets returned and we send it into the store dispatch function.

78
00:04:52,190 --> 00:04:56,240
Remember that's how we change data in the redux side of our application.

79
00:04:56,240 --> 00:05:02,140
Now once we start making use of re-act redux that flow is going to change just a tiny tiny little bit.

80
00:05:03,260 --> 00:05:08,310
Essentially we're going to pass some more configuration into this connect components.

81
00:05:08,450 --> 00:05:12,860
So in addition to telling it that we want to get a list of songs we're also going to tell the connect

82
00:05:12,860 --> 00:05:19,760
function that we want to be able to call the select song action creator from within our song list.

83
00:05:19,760 --> 00:05:24,470
So when we tell that the connect function or the connect component about that the connect component

84
00:05:24,470 --> 00:05:26,150
says OK no problem.

85
00:05:26,150 --> 00:05:32,390
I'm going to make sure that this action creator called select song it's sent down to our song list component

86
00:05:32,420 --> 00:05:33,110
as well.

87
00:05:34,740 --> 00:05:41,390
As a prop so this entire flow essentially all we have to do is create the provider it a reference to

88
00:05:41,390 --> 00:05:46,670
our redux store then any time that we have a component that needs to interact with the redux store in

89
00:05:46,670 --> 00:05:49,650
any way we're going to wrap it with this connect function.

90
00:05:49,670 --> 00:05:54,470
And like I said I'm going to very frequently refer to this as the connect function components or tag

91
00:05:54,680 --> 00:05:56,220
somewhat interchangeably.

92
00:05:56,570 --> 00:06:01,430
Well then configure this connect function or connect tag right here by telling it what different pieces

93
00:06:01,490 --> 00:06:06,740
of states we want out of our store and what different action creators we want to have wired up as well

94
00:06:07,240 --> 00:06:12,890
that connect function is going to then kind of do all the magic for us and make sure that all that data.

95
00:06:12,900 --> 00:06:19,890
Both the state and the action creators show up inside of our component as props.

96
00:06:19,890 --> 00:06:22,310
All right so that's what's going on behind the scenes now.

97
00:06:22,310 --> 00:06:28,730
Trust me if that sounds really complicated the code to make this all happen is way more straightforward

98
00:06:28,760 --> 00:06:29,840
than you might think.

99
00:06:29,840 --> 00:06:30,080
All right.

100
00:06:30,080 --> 00:06:32,530
That could be really straightforward stuff.

101
00:06:32,600 --> 00:06:36,580
It's just understanding the pun the scenes stuff that gets a little bit more complicated.

102
00:06:36,620 --> 00:06:38,270
So let's take a quick pause right here.

103
00:06:38,450 --> 00:06:42,700
When we come back the next section we're going to start implementing our entire app it's all see you

104
00:06:42,770 --> 00:06:43,720
in just a minute.