1
00:00:01,100 --> 00:00:02,210
Welcome back.

2
00:00:02,210 --> 00:00:08,780
Now that we have our actions constants and reducers, let's start connecting this redux part of our application

3
00:00:09,170 --> 00:00:11,540
to our react application.

4
00:00:13,290 --> 00:00:16,630
Now the way we can do that is quite simple.

5
00:00:17,520 --> 00:00:25,260
If you remember we downloaded a package called react redux and this package let's import it over here

6
00:00:26,910 --> 00:00:32,840
comes with nice and easy API of just two things.

7
00:00:32,920 --> 00:00:40,540
One is a provider and the other one is connect and using these two things we're going to be able to

8
00:00:40,780 --> 00:00:42,900
connect these two parts of our application.

9
00:00:43,570 --> 00:00:52,660
So I'm going to say import from react redux.

10
00:00:52,870 --> 00:00:58,520
Now in this video we're going to talk about the provider and in the next video talk about connect.

11
00:00:58,540 --> 00:01:04,560
So for now let's just have the provider importing.

12
00:01:04,780 --> 00:01:13,300
Now within here there's a few things we need to do first is to create the store. If we go back to our

13
00:01:13,300 --> 00:01:23,510
diagram we remember that there's something called a store and redox which is the source of all truth.

14
00:01:23,800 --> 00:01:32,530
That is it's a big object javascript, object that describes the state of our app so that react can render

15
00:01:32,530 --> 00:01:36,010
it make changes and display it to the user.

16
00:01:36,010 --> 00:01:43,330
So we've created an action we've created and reduce a reducer and we also need a store.

17
00:01:43,510 --> 00:01:45,900
So let's do that first.

18
00:01:46,020 --> 00:01:53,600
We can use the redux package for this and say import and it has a function called create store.

19
00:01:53,670 --> 00:01:54,920
Nice and easy name.

20
00:01:55,170 --> 00:02:00,620
And we're going to import that from the redux package.

21
00:02:00,660 --> 00:02:06,570
Now the way we create a store is quite easy and we can say const store equals

22
00:02:09,780 --> 00:02:19,940
create store and within here we put the, what we call a rootReducer, that is the reducer of our app

23
00:02:20,570 --> 00:02:22,390
Now in real life,

24
00:02:22,460 --> 00:02:25,420
we have many many reducers.

25
00:02:25,730 --> 00:02:34,230
If we go back to our reducer file, right now we only have one the search robots reducer.

26
00:02:34,430 --> 00:02:41,240
But as I said before applications get more and more complex and you're going to have more and more actions

27
00:02:41,360 --> 00:02:42,450
that need to be taken.

28
00:02:42,890 --> 00:02:50,420
And we can keep listing actions related to search robots right in here but later on in the video we

29
00:02:50,420 --> 00:02:54,840
also need to get robots from the API.

30
00:02:55,280 --> 00:03:05,870
If you remember. now because of that we're going to have many many many reducers and in the store we

31
00:03:05,870 --> 00:03:15,820
want to combine all these reducers to create one root reducer which we're going to do later on.

32
00:03:16,650 --> 00:03:25,080
But for now because we only have one reducer, let's just use the search robots reducer to create

33
00:03:25,080 --> 00:03:25,480
the store

34
00:03:29,650 --> 00:03:31,580
and we need to import this.

35
00:03:31,600 --> 00:03:32,880
So let's go ahead and do that.

36
00:03:33,680 --> 00:03:34,920
And I say import

37
00:03:38,010 --> 00:03:44,470
search robots from our reducer file.

38
00:03:44,480 --> 00:03:44,970
All right.

39
00:03:45,020 --> 00:03:51,930
So I have search robots here to create the store with and that's it.

40
00:03:51,950 --> 00:04:00,560
We have a store. Now this store can now be accessed and passed down into our app.

41
00:04:00,650 --> 00:04:08,110
Remember with redux hypothetically we can remove all state from our react up and keep it inside of

42
00:04:08,110 --> 00:04:11,850
the store and pass down the store as a prop.

43
00:04:11,890 --> 00:04:21,589
So let's see what happens if I do that if I go store equals to the store that we have and I save.

44
00:04:21,740 --> 00:04:24,460
And let's also open up app.js

45
00:04:25,360 --> 00:04:26,780
And in the

46
00:04:26,810 --> 00:04:27,690
componentDidMount.

47
00:04:27,890 --> 00:04:29,240
Let's just console log

48
00:04:32,000 --> 00:04:40,060
this.props.store

49
00:04:40,100 --> 00:04:41,460
All right let's run npm start

50
00:04:48,270 --> 00:04:49,630
When I open up the console

51
00:04:52,820 --> 00:04:57,800
and we have a bit of an narrow here that's just a syntax error in our case then statements so let's

52
00:04:57,800 --> 00:04:58,550
fix that.

53
00:05:01,540 --> 00:05:03,150
Go to reducers.

54
00:05:03,240 --> 00:05:09,420
We don't need the double quotes here for the semicolon here because we have it over here.

55
00:05:09,500 --> 00:05:17,770
Let's save that and we get an error saying that search field is not defined in our reducers file.

56
00:05:17,840 --> 00:05:20,720
And again a small little error here.

57
00:05:20,720 --> 00:05:30,370
The way we want to pass the third parameter to an object.assign is as an object so we want to go like

58
00:05:30,370 --> 00:05:31,020
this.

59
00:05:32,880 --> 00:05:39,790
And we to constant small little error here to save all right.

60
00:05:39,840 --> 00:05:40,950
So everything is working.

61
00:05:40,950 --> 00:05:46,700
We have a warning saying that provider is defined but never used that's fine.

62
00:05:47,570 --> 00:05:49,180
Because while we're not using yet.

63
00:05:49,250 --> 00:05:51,390
But let's go to console log and see what happens.

64
00:05:52,750 --> 00:06:01,570
All right we see that our store over here has logged out and we have a few functions that we can use

65
00:06:01,870 --> 00:06:05,860
including get state. Let's use that and see what happens.

66
00:06:05,890 --> 00:06:15,750
Again going to my index file I'm going to say or in our app.js file I'm going to say get state, going

67
00:06:15,760 --> 00:06:20,490
to save go back and look at that.

68
00:06:20,550 --> 00:06:27,190
We have our state which just has the search field right now.

69
00:06:27,190 --> 00:06:27,620
All right.

70
00:06:27,760 --> 00:06:36,910
So we're passing down our store as a prop and we can use get state. Very cool, let's remove this console

71
00:06:36,910 --> 00:06:37,750
log.

72
00:06:37,750 --> 00:06:43,120
Since we don't need it we understand what's going on now in the index file we need to pass down the

73
00:06:43,120 --> 00:06:45,820
store to the app.

74
00:06:45,920 --> 00:06:52,900
Now we don't really want to pass down the store all the way down our component tree to the smaller components

75
00:06:53,200 --> 00:07:01,170
over and over again and react redox gives us a nice component that we can use to do this very easily.

76
00:07:01,280 --> 00:07:06,770
We can simply wrap our app component in this provider component.

77
00:07:06,770 --> 00:07:07,770
Let me show you.

78
00:07:08,300 --> 00:07:24,180
We're going to have a provider component and this app component is going to be inside of it just like

79
00:07:24,180 --> 00:07:27,150
that.

80
00:07:27,160 --> 00:07:31,540
Now the formatting here is a little bit off but it's fine for now.

81
00:07:31,540 --> 00:07:39,220
I just wanna see that the provider is wrapping the app and now instead of passing down the store to

82
00:07:39,220 --> 00:07:47,440
the app we can just include it into the provider component and the provider component is going to take

83
00:07:47,440 --> 00:07:56,410
care of passing down the store to all the components down the component tree from the app and we use something

84
00:07:56,410 --> 00:08:02,730
called Connect which we talked about to finish this connection.

85
00:08:02,750 --> 00:08:04,530
So there you have it.

86
00:08:04,610 --> 00:08:14,000
We've created the provider component that passes down the store and the store uses the root reducer or whatever

87
00:08:14,000 --> 00:08:19,660
reducers that we have to create the store and create that object tree of our state.

88
00:08:20,820 --> 00:08:28,950
So in the next video let me save this. In the next video we're going to use the other part of react redux

89
00:08:29,100 --> 00:08:31,520
to finally connect everything together.

90
00:08:32,270 --> 00:08:34,070
I'll see that one. Bye bye.