1
00:00:00,750 --> 00:00:05,650
And a welcome back. We know how the RoboFriends app works

2
00:00:05,660 --> 00:00:14,330
now, with react, that's great. But Bruno asked us a specific thing. We need to add redux to our 

3
00:00:14,330 --> 00:00:20,860
RoboFriends app so that it can scale well, and handle state management better.

4
00:00:22,630 --> 00:00:28,960
Now with these next videos were going to work together, step by step.

5
00:00:28,990 --> 00:00:34,630
I'm going to show you how redux is implemented and how it works and you're going to be following along

6
00:00:35,170 --> 00:00:38,320
trying to make sure that your code works as well.

7
00:00:38,770 --> 00:00:42,120
All right so take a pause now and get your environment set up.

8
00:00:42,140 --> 00:00:46,470
So you can code along with me. You're all set?

9
00:00:46,510 --> 00:00:46,940
All right.

10
00:00:46,960 --> 00:00:48,300
I'm going to get started.

11
00:00:48,370 --> 00:00:56,360
The first thing I'm going to do is, I have my RoboFriends app, so I'm going to clone this repo and

12
00:00:56,360 --> 00:01:06,650
we'll just do our regular set up with git clone and then I'm going to CD into my RoboFriend. Perfect.

13
00:01:06,690 --> 00:01:09,510
Let's open this up in your text editor.

14
00:01:14,630 --> 00:01:18,720
And again I love joining these together so it looks nice.

15
00:01:19,470 --> 00:01:20,670
And clean.

16
00:01:20,720 --> 00:01:21,250
Perfect.

17
00:01:22,670 --> 00:01:29,510
Now obviously the first thing we need to do when we clone something is npm install to make sure

18
00:01:29,510 --> 00:01:32,710
we have all the packages.

19
00:01:32,920 --> 00:01:38,970
And we also want to make sure that everything is running smoothly without any errors whatsoever.

20
00:01:39,190 --> 00:01:48,410
So the next step is going to be to run npm start.

21
00:01:48,460 --> 00:01:49,180
All right.

22
00:01:49,180 --> 00:01:49,690
Perfect.

23
00:01:49,690 --> 00:01:50,930
Everything is working.

24
00:01:51,040 --> 00:01:53,780
And we should be able to filter.

25
00:01:53,780 --> 00:01:56,420
Perfect.

26
00:01:56,430 --> 00:01:56,690
All right.

27
00:01:56,700 --> 00:01:59,790
So we're familiar with this codebase.

28
00:02:01,120 --> 00:02:09,990
We have our react app, but that's it. Just a simple react app with containers and components.

29
00:02:10,039 --> 00:02:20,930
The very first thing we would want to do is install redux. So I'm going to close this and run npm install redux.

30
00:02:23,740 --> 00:02:30,990
This redux package will give us some tools in order to incorporate redux into our react app.

31
00:02:32,220 --> 00:02:33,840
But here's the cool part.

32
00:02:33,840 --> 00:02:37,630
With the redux package, and why I'm such a big fan.

33
00:02:38,690 --> 00:02:45,680
It's that 90 percent of your code is still going to be Javascript. Redux is going to give you a few helpers

34
00:02:46,070 --> 00:02:48,620
but you're still writing Javascript.

35
00:02:48,740 --> 00:02:52,280
It's still improving your Javascript skills.

36
00:02:52,280 --> 00:02:57,470
When you write redux and it teaches really really good principles, which is why I'm such a big fan of

37
00:02:57,530 --> 00:03:05,630
the library. You might not always need redux in your projects but it is just a good, good tool to learn

38
00:03:05,960 --> 00:03:13,070
because it has such great concepts that you'll use throughout your career.

39
00:03:13,220 --> 00:03:19,010
Now the second thing we need, and this is something similar with react - remember how we installed the

40
00:03:19,010 --> 00:03:25,730
react package, and then we also needed something called the react dom package to connect react to

41
00:03:25,730 --> 00:03:29,130
the dom? Well, in similar fashion.

42
00:03:29,140 --> 00:03:38,770
We need to connect redux to react because redux theoretically could work with any other library by adding

43
00:03:38,980 --> 00:03:40,240
another package.

44
00:03:40,300 --> 00:03:46,600
We can again let react know that hey we're going to be using redux with you.

45
00:03:46,600 --> 00:03:48,050
So that's very easy to do.

46
00:03:48,070 --> 00:03:53,080
We'll just npm install and the package is called react redux.

47
00:03:59,260 --> 00:04:06,570
And the way this react redux is going to work is that it's going to connect only the containers.

48
00:04:06,760 --> 00:04:14,410
So in this case app.js to the, what we call a redux store or that big Javascript object we're talking

49
00:04:14,410 --> 00:04:14,820
about.

50
00:04:14,860 --> 00:04:21,110
That describes the state of our app and they're going to communicate, the container is going to communicate

51
00:04:21,200 --> 00:04:23,770
with the store and vice versa.

52
00:04:24,900 --> 00:04:31,410
Now the other components, what we call dumb or presentational components,

53
00:04:31,530 --> 00:04:34,250
won't know that redux exists.

54
00:04:34,320 --> 00:04:41,010
The only connection is going to be between something called a container or a smart component and the

55
00:04:41,100 --> 00:04:42,650
redux store.

56
00:04:42,660 --> 00:04:44,130
So let me show you what I mean.

57
00:04:45,280 --> 00:04:51,040
If you remember this diagram we just installed the redux package which you can think of it as being

58
00:04:51,040 --> 00:04:51,990
over here.

59
00:04:52,000 --> 00:04:58,300
This red box that allows us to create a store and a couple of other help functions.

60
00:04:58,300 --> 00:05:10,310
We also downloaded react redux which allows us to connect these two pieces and react redux is able

61
00:05:10,310 --> 00:05:17,090
to be used in order to say hey we want these yellow components to be aware that we're using redux and to

62
00:05:17,090 --> 00:05:20,650
get their state from the redux store.

63
00:05:22,380 --> 00:05:28,020
So just think of this diagram as we're working through it all we're doing is essentially connecting

64
00:05:28,020 --> 00:05:30,710
these two libraries together.

65
00:05:30,770 --> 00:05:37,630
All right so now that we have these two packages we can start importing them and using it within our

66
00:05:37,630 --> 00:05:43,660
app but that's for the next couple of videos. I'll see you in the next one.

67
00:05:43,770 --> 00:05:44,010
Bye-bye.