1
00:00:01,320 --> 00:00:08,400
Unless sexual input are to reducers together inside of our reducers index file I'm now going to import

2
00:00:08,670 --> 00:00:15,290
the redux library into this file and wire up these reducers to each other that combine reducers function.

3
00:00:15,390 --> 00:00:22,680
So at the very top I'll do import really braces combine reducers Ramah redux.

4
00:00:22,740 --> 00:00:25,700
Notice this is an example of a named export.

5
00:00:25,740 --> 00:00:28,140
So I'm making use of the curly braces here.

6
00:00:28,170 --> 00:00:32,000
Now I'm sure you might be curious how do we know when to use the curly braces and when not to.

7
00:00:32,010 --> 00:00:36,420
If we are importing code from some other library the only answer I have for you is that you need to

8
00:00:36,420 --> 00:00:42,360
look at the documentation for that library when you are importing code from your own files.

9
00:00:42,360 --> 00:00:47,370
You will always know by looking at the file contents if you are doing a named X for it or a default

10
00:00:47,400 --> 00:00:51,380
export and thus whether to include or not include the curly braces.

11
00:00:51,720 --> 00:00:56,190
So anytime you're making use of some outside library you have to look at the documentation and be told

12
00:00:56,340 --> 00:01:00,120
whether or not you need those curly braces.

13
00:01:00,140 --> 00:01:05,530
So now at the bottom of the file I'm going to make use of that combine reducers function.

14
00:01:05,530 --> 00:01:12,190
I'll say combine reducers I'll pass it an object and remember the keys of this object are going to be

15
00:01:12,190 --> 00:01:15,670
the keys that show up inside of our state object.

16
00:01:15,670 --> 00:01:21,620
So I'm going to assign a key of songs to this thing and that's going to get my songs reducer.

17
00:01:23,240 --> 00:01:24,580
I'll say songs.

18
00:01:25,770 --> 00:01:31,790
And then I'm also going to give it a selected song key and that's going to get my selected song reducer.

19
00:01:34,830 --> 00:01:39,200
Salek did a song reduce her like so.

20
00:01:39,370 --> 00:01:43,480
And then finally I'm going to do an export default in front of that thing.

21
00:01:43,940 --> 00:01:52,020
So now any other file and some my project can get access to our combined set of reducers.

22
00:01:52,020 --> 00:01:56,660
All right so believe it or not that is pretty much it for the strictly redux side of things.

23
00:01:56,660 --> 00:02:01,830
We've got our reducers put together and we've got our action creator singular put together.

24
00:02:02,100 --> 00:02:05,670
So from here on out it's really just react and react redux.

25
00:02:05,670 --> 00:02:06,140
That's it.

26
00:02:06,150 --> 00:02:08,710
That's the only code we have to write from this point on.

27
00:02:09,060 --> 00:02:15,540
So I'm going to close down all the files I currently have open and then I'm going to open up the index

28
00:02:15,540 --> 00:02:18,550
such as file inside of my sarcy directory.

29
00:02:18,550 --> 00:02:23,470
Remember this is the one where we had imported the app component and then tried to show it on the screen.

30
00:02:23,620 --> 00:02:28,320
So we're now going to add a little bit more configuration to this thing than what's currently in here.

31
00:02:28,330 --> 00:02:34,660
Our goal is to make sure that we get that provider tag at the very top of our component hierarchy and

32
00:02:34,660 --> 00:02:39,670
we need to make sure that we also pass it a reference to our redux store that gets all of our reducers

33
00:02:39,760 --> 00:02:41,080
loaded up into it.

34
00:02:43,340 --> 00:02:47,950
So back inside if you're going to import a couple of different files.

35
00:02:47,950 --> 00:02:54,580
First off I'm going to import a provider components from re-act redux like so.

36
00:02:54,580 --> 00:02:55,350
So this right here.

37
00:02:55,360 --> 00:02:57,490
Yup that's the provider we've been talking about.

38
00:02:57,550 --> 00:03:03,270
This is technically a component right here to say component that is made up by the re-act redux library.

39
00:03:03,280 --> 00:03:09,580
Notice how this is also a named export and that I named it with a capital P because it is a component

40
00:03:09,640 --> 00:03:14,780
and by convention we'd label component variable names as capitals.

41
00:03:14,780 --> 00:03:20,990
Next up I'm going to also import the create store function rom redux.

42
00:03:21,050 --> 00:03:25,870
This is the same function that you saw a little bit ago over on that code Penn. example we had passed

43
00:03:25,880 --> 00:03:29,370
create store our set of reducers and returned back to us.

44
00:03:29,390 --> 00:03:35,420
A redux store that contained all of our users and all of our applications data were state.

45
00:03:35,580 --> 00:03:43,650
And then finally underneath my app I'm going to import might reducers from the reducers directory like

46
00:03:43,660 --> 00:03:45,110
so.

47
00:03:45,230 --> 00:03:50,160
Now here's a great example of this how we've got two named experts right here and then everything else

48
00:03:50,160 --> 00:03:53,580
inside the file are unnamed or default.

49
00:03:53,590 --> 00:03:55,560
So no curly braces required.

50
00:03:55,740 --> 00:04:01,750
So again don't just kind of add in willy nilly curly braces sometimes and not curly braces other times.

51
00:04:01,800 --> 00:04:04,760
Really think about what you are trying to import.

52
00:04:04,880 --> 00:04:08,900
Now the other thing I want to mention here is you will notice that I grouped together all of my imports

53
00:04:08,930 --> 00:04:14,510
from outside third party dependencies and then I also grouped together all of my own code underneath

54
00:04:14,510 --> 00:04:15,230
it.

55
00:04:15,230 --> 00:04:16,620
I don't really need the space here.

56
00:04:16,640 --> 00:04:19,170
Sometimes you'll see people put a space in.

57
00:04:19,250 --> 00:04:24,070
I do sometimes I do so I don't sometimes it doesn't really make a big difference.

58
00:04:24,440 --> 00:04:24,690
OK.

59
00:04:24,720 --> 00:04:29,260
Now the last thing I'd do is create an instance of the provider and wrap it.

60
00:04:29,290 --> 00:04:32,170
Our app component with it.

61
00:04:32,260 --> 00:04:35,020
So to do so I'm going to do myself a little bit of space here.

62
00:04:39,830 --> 00:04:46,950
And then I'm going to wrap the app with a provider and I'm going to fix up that comma.

63
00:04:46,970 --> 00:04:49,610
Make sure it's at the end of provider like so that's better.

64
00:04:51,070 --> 00:04:57,560
And then I'm going to pass the provider component a single prop called store.

65
00:04:57,740 --> 00:05:02,870
The store is going to be the result of calling create store and passing in our reducers.

66
00:05:02,870 --> 00:05:07,340
So a call create store and I'll pass in our reducers like so.

67
00:05:07,380 --> 00:05:13,050
So back on our Copen example you and I got a reference to the object that was created by create store

68
00:05:13,230 --> 00:05:15,280
and then we played around with it a little bit.

69
00:05:15,420 --> 00:05:20,610
But when we make use of the re-act redux library we don't usually mess around with the store directly.

70
00:05:20,670 --> 00:05:26,520
Instead we pass it off to this provider and the provider essentially takes care of everything from there.

71
00:05:26,520 --> 00:05:31,680
So in a typical redux application you're actually very rarely going to interact directly with the store

72
00:05:31,740 --> 00:05:34,950
outside of some more advanced cases that we'll see later on.

73
00:05:36,570 --> 00:05:36,820
OK.

74
00:05:36,840 --> 00:05:37,510
So that's it.

75
00:05:37,530 --> 00:05:43,140
We've now wired up our provider and now any component inside of our component hierarchy can implement

76
00:05:43,140 --> 00:05:45,640
this or make use of this connecting right here.

77
00:05:45,660 --> 00:05:50,490
And remember the purpose of the connect component is to somehow communicate with the provider that we

78
00:05:50,490 --> 00:05:55,730
just put together and thus communicate with all the data inside of our store.

79
00:05:55,740 --> 00:05:56,910
So let's take a pause right here.

80
00:05:56,940 --> 00:06:01,290
When we come back the next section we're going to continue working on the redux side of our application

81
00:06:01,560 --> 00:06:05,970
by putting together our song list component to a quick break and I'll see you in just a minute.