1
00:00:01,120 --> 00:00:01,800
All right.

2
00:00:01,810 --> 00:00:06,000
So we got redux working, nicely with our app.

3
00:00:06,100 --> 00:00:09,160
We've just learned an awesome library.

4
00:00:09,580 --> 00:00:12,510
I hope, everybody is feeling good. Now,

5
00:00:13,030 --> 00:00:15,890
I do want to add a few things.

6
00:00:15,940 --> 00:00:23,530
Obviously, this is a simple example. But the fundamentals are there. Using these principles, you can

7
00:00:23,530 --> 00:00:27,560
go off and build, larger and larger applications.

8
00:00:27,970 --> 00:00:32,090
But as I've been writing this, you may have noticed a few things.

9
00:00:32,229 --> 00:00:32,850
One,

10
00:00:33,100 --> 00:00:42,170
well, let's look over here at our folder structure. We can imagine as our app grows that is going to get

11
00:00:42,410 --> 00:00:44,540
bigger and bigger and bigger.

12
00:00:44,690 --> 00:00:49,460
And this is actually something I'm going to demonstrate to you later on in the course, when we work on the

13
00:00:49,460 --> 00:00:57,920
smart brain app. Where we start loading our app js, with a ton of functions.

14
00:00:57,920 --> 00:01:00,100
And we're not using redux for it.

15
00:01:00,200 --> 00:01:06,660
So this file gets longer and longer with new methods and new methods and new methods.

16
00:01:06,690 --> 00:01:16,350
Now, having one container component, that is having one connected component. A component that knows that

17
00:01:16,410 --> 00:01:22,790
the redux store exists and listens to props and dispatch actions from it.

18
00:01:22,830 --> 00:01:26,100
Well, having just one is not really realistic.

19
00:01:26,130 --> 00:01:33,570
Most likely you're going to have multiple containers. But because of the way redux works, that's fairly

20
00:01:33,570 --> 00:01:34,570
easy to do.

21
00:01:34,620 --> 00:01:42,300
We can just use connect and pick and choose which components, we want to connect to the redux store.

22
00:01:42,660 --> 00:01:46,960
And if we want, two containers to speak to each other,

23
00:01:47,280 --> 00:01:50,670
well, very simple, we just connect them.

24
00:01:50,850 --> 00:01:58,030
And because the store is up above everything else, we're able to get that state information.

25
00:01:58,950 --> 00:02:01,420
So it makes communication very very easy.

26
00:02:01,770 --> 00:02:08,789
So we obviously want to have containers like this. And simple presentational components that are just

27
00:02:08,789 --> 00:02:13,940
pure functions, that just receive props and render.

28
00:02:14,050 --> 00:02:20,650
However, as we grow more and more components, and more and more containers, it starts to make sense to

29
00:02:20,650 --> 00:02:26,710
not have just one 'constants' file, one 'actions' file and one 'reducers' file.

30
00:02:27,010 --> 00:02:33,670
You can imagine these getting bigger and bigger and bigger. And you'll see projects that have a 'actions'

31
00:02:33,670 --> 00:02:37,470
folder, a 'constants' folder and a 'reducers' folder.

32
00:02:37,630 --> 00:02:41,820
But I personally like the component way of doing things.

33
00:02:42,160 --> 00:02:46,260
That is, group everything according to the component.

34
00:02:46,420 --> 00:02:53,630
For example, create an app dot js or let's say, there's a smart search field component.

35
00:02:54,010 --> 00:02:59,920
We're going to create a folder, called 'search field' and that 'search field' folder is going to have all

36
00:02:59,920 --> 00:03:03,670
the DOM presentational components, that it needs.

37
00:03:03,670 --> 00:03:06,730
It's going to have all the 'actions' that it needs in action dot

38
00:03:06,790 --> 00:03:10,060
js. It's going to have all the 'reducer' that it needs.

39
00:03:10,180 --> 00:03:12,780
And it's also going to have all the constant that 

40
00:03:13,000 --> 00:03:19,810
it needs. So each folder is going to represents a component, a chunk of our website and it's all coupled together

41
00:03:20,080 --> 00:03:21,760
in one little folder.

42
00:03:21,760 --> 00:03:26,400
So, if we ever want to share code, it's going to be fairly easy to do.

43
00:03:26,410 --> 00:03:32,850
It's also really nice to think about it that way. Instead of having these massive general folder names.

44
00:03:33,020 --> 00:03:35,840
And that's what you'll see with most big projects.

45
00:03:35,840 --> 00:03:43,190
This idea of components, that have their own folders, these containers that again have their own folders,

46
00:03:43,190 --> 00:03:45,950
as well as reducers and actions.

47
00:03:46,100 --> 00:03:52,130
And this way you can read through the folder structure and decide where you want to go to fix a bug

48
00:03:52,130 --> 00:03:53,670
or create a new feature.

49
00:03:55,690 --> 00:03:59,010
You also want to avoid repeating code as much.

50
00:03:59,170 --> 00:04:03,940
For example, in most applications, we're going to have a lot of fetch call.

51
00:04:04,210 --> 00:04:11,800
So wouldn't it be great, if we had an API folder here, that does the fetch call, maybe we'll call it API,

52
00:04:11,920 --> 00:04:20,740
'get API' and all we need to do is pass a function, and that function is going to pass that url into

53
00:04:20,740 --> 00:04:24,130
the fetch function and it's also going to do this

54
00:04:24,160 --> 00:04:27,120
json for us. So its just going to return the data.

55
00:04:27,130 --> 00:04:36,170
So we keep repe.., so we stop repeating all this fetch dot then dot then dot catch. So, thinking in terms of

56
00:04:36,230 --> 00:04:40,550
organizing your folders, to something that makes sense, something that can scale.

57
00:04:40,760 --> 00:04:47,270
And, if somebody comes on to the project, it makes it easy for them to follow and read, is a good way of

58
00:04:47,270 --> 00:04:50,030
doing things.

59
00:04:50,050 --> 00:04:52,390
All right, that's enough for now.

60
00:04:52,390 --> 00:04:53,900
I'll see you in the next video.

61
00:04:53,910 --> 00:04:54,380
Bye-bye