1
00:00:00,750 --> 00:00:06,470
Unless we generated our brand new project I'm not going to change into that directory that was created.

2
00:00:06,590 --> 00:00:10,880
I'm going to start at my code editor and site there and then we're also going to install a couple of

3
00:00:10,880 --> 00:00:14,780
additional dependencies inside of our project right now rather than having to come back and install

4
00:00:14,780 --> 00:00:16,580
these dependencies later on.

5
00:00:16,580 --> 00:00:22,940
So inside of my blog project directory I'm going to do an NPM install dash dash save and we're going

6
00:00:22,940 --> 00:00:27,020
to get redux reactor's ducks X-posts.

7
00:00:27,080 --> 00:00:31,610
And then one other new dependency that we're going to talk about quite a bit inside this application

8
00:00:31,880 --> 00:00:37,540
called redux Dasch think like so redux Dasch thunk.

9
00:00:37,560 --> 00:00:38,600
That's the new one.

10
00:00:38,950 --> 00:00:39,190
OK.

11
00:00:39,210 --> 00:00:40,170
So I'm going to run this.

12
00:00:40,260 --> 00:00:41,400
And while that's installing.

13
00:00:41,420 --> 00:00:45,750
Let's have a quick reminder about what all these dependencies do including this new one called redux

14
00:00:45,750 --> 00:00:47,180
thunk.

15
00:00:47,190 --> 00:00:47,520
All right.

16
00:00:47,520 --> 00:00:48,610
So first off redux.

17
00:00:48,630 --> 00:00:48,950
Yup.

18
00:00:49,020 --> 00:00:49,710
You know what that is.

19
00:00:49,710 --> 00:00:51,590
We've seen good examples of that already.

20
00:00:51,600 --> 00:00:53,740
It's the actual redux library itself.

21
00:00:53,760 --> 00:00:55,480
Next up reactor redux.

22
00:00:55,500 --> 00:00:58,290
We just worked on an application that made use of this library.

23
00:00:58,290 --> 00:01:03,510
Remember this is the integration layer between the react and redux libraries because they were not originally

24
00:01:03,510 --> 00:01:05,330
designed to work with each other.

25
00:01:05,340 --> 00:01:09,800
Right out of the box we've made use of axially before member.

26
00:01:09,900 --> 00:01:13,150
We make use of ASIO's any time that we want to make network requests.

27
00:01:13,180 --> 00:01:16,380
Ex-U.S. is not strictly required inside of these Riak projects.

28
00:01:16,380 --> 00:01:19,400
We could technically use that fetch API or the fecche function.

29
00:01:19,530 --> 00:01:24,030
But remember we had said that there's a lot of kind of manual hand-holding that you have to do with

30
00:01:24,030 --> 00:01:24,770
the fetch function.

31
00:01:24,780 --> 00:01:28,730
And so it's usually just a lot easier to make use of XS.

32
00:01:28,850 --> 00:01:32,090
And then finally this new dependency called redux thunk.

33
00:01:32,420 --> 00:01:38,630
Now this is a dependency that we refer to as a middleware the term middleware applies to the redux library

34
00:01:39,260 --> 00:01:45,250
middleware are essentially functions that are going to slightly change the behavior of our redux store.

35
00:01:45,470 --> 00:01:51,080
So they will add in new capabilities or new features to the redux side of your application.

36
00:01:51,080 --> 00:01:55,910
In the case of redux thunk this is a middleware that is going to help us make network requests from

37
00:01:55,910 --> 00:02:01,920
the read up side of rap in the vast vast majority of redux applications you are ever going to work on.

38
00:02:01,920 --> 00:02:04,910
You you're going to make use of a middleware like redux thunk.

39
00:02:04,940 --> 00:02:09,460
Maybe not exactly redux stunk but something very much like it.

40
00:02:09,530 --> 00:02:14,360
Redux thunk is extremely popular and there's only a handful of other alternatives that make it easy

41
00:02:14,360 --> 00:02:17,830
for you to do network requests from the redux side of your application.

42
00:02:17,840 --> 00:02:22,240
So again if not redux thunk it will be something very similar to it.

43
00:02:22,280 --> 00:02:25,030
All right so let's flip back over to our terminal.

44
00:02:25,040 --> 00:02:27,750
It looks like everything has installed successfully.

45
00:02:28,010 --> 00:02:33,070
So I'm not going to start up my application with NPM start.

46
00:02:33,250 --> 00:02:36,470
And after a second or two we should see the application.

47
00:02:36,920 --> 00:02:40,660
OK it started up but I already deleted some boilerplate inside the SIRC folder.

48
00:02:40,660 --> 00:02:43,680
So you're probably going to see that default loading screen appear right now.

49
00:02:43,960 --> 00:02:46,240
So let's flip back over to our code editor.

50
00:02:46,240 --> 00:02:50,950
We're going to go ahead and start doing some cleanup inside that sarcy directory.

51
00:02:51,070 --> 00:02:57,370
So as usual I'm going to delete everything inside my sarcy folder and we're going to replace all that

52
00:02:57,390 --> 00:03:02,590
boilerplate automatically generated code with some usual boilerplate that we're going to use inside

53
00:03:02,620 --> 00:03:06,480
of just about every react and redux application that you and I work on.

54
00:03:06,490 --> 00:03:06,760
All right.

55
00:03:06,760 --> 00:03:11,490
So inside the sarf see folder I'll begin by creating an index file.

56
00:03:11,760 --> 00:03:19,210
I'm going to import re-act from re-act import reac Dom from re-act dash Dom.

57
00:03:19,250 --> 00:03:25,130
I'm going to get the provider element from reactor's docs and then I'll make sure that I also get create

58
00:03:25,130 --> 00:03:31,310
store from the redux library itself.

59
00:03:31,850 --> 00:03:36,500
And then after that I'll also assume that I'm going to eventually have an app component we haven't created

60
00:03:36,530 --> 00:03:38,240
just yet but we will in just a moment.

61
00:03:38,300 --> 00:03:45,020
So import app from components app and then I'm also going to assume that we're going to eventually have

62
00:03:45,050 --> 00:03:53,630
a couple of reducers inside this application so I'm going to import reducers from reducers and then

63
00:03:53,630 --> 00:04:01,920
at the bottom we'll do our re-act dum dum render a call so I'm going to show my provider tag I'm going

64
00:04:01,920 --> 00:04:07,650
to pass it reate store and when I call create store right here I'll be sure to pass in all my different

65
00:04:07,650 --> 00:04:15,770
reducers I'll close off the provider tag and then inside there I'll show my app component.

66
00:04:15,770 --> 00:04:20,210
And then finally as the second argument to the re-act Dannatt render a call we'll do the same thing

67
00:04:20,210 --> 00:04:21,370
we've always done before.

68
00:04:21,410 --> 00:04:24,200
We'll tell re-act where it needs to render our application.

69
00:04:24,250 --> 00:04:29,870
So I'll say document Dom queries selector Halland route like the.

70
00:04:30,000 --> 00:04:30,290
All right.

71
00:04:30,290 --> 00:04:35,510
So just some typical boilerplate that you're going to see in just about every single redux application.

72
00:04:35,540 --> 00:04:39,530
So now at this point if we flip back over to our browser we'll very quickly see an error message because

73
00:04:39,530 --> 00:04:42,050
we do not have a app file.

74
00:04:42,050 --> 00:04:44,730
We also do not have any reducers just yet.

75
00:04:44,900 --> 00:04:50,360
So it's very quickly make a kind of default little app component and some default little reducers just

76
00:04:50,360 --> 00:04:53,740
to get our application working and appearing on the screen.

77
00:04:53,750 --> 00:05:00,310
So inside my SIRC directory I'll make a new folder called component's inside of component's I'll make

78
00:05:00,580 --> 00:05:01,250
my apt.

79
00:05:01,270 --> 00:05:02,740
Genius file.

80
00:05:03,010 --> 00:05:10,050
And then inside of here I will import re-act from re-act I'll create my app component as a functional

81
00:05:10,050 --> 00:05:16,580
component and right now we'll just have it return a div that has that text app.

82
00:05:16,720 --> 00:05:21,250
Now we've seen many times so far throughout this course as we've been making use of semantic UI.

83
00:05:21,270 --> 00:05:26,410
We've always had to come back to this app component and add in that class name of UI container.

84
00:05:26,520 --> 00:05:31,410
Remember that class name when used with semantic UI gets us the nice margin on the left hand side and

85
00:05:31,410 --> 00:05:32,590
the right hand side.

86
00:05:32,760 --> 00:05:35,940
So we're going to make sure that we just go ahead and apply that class name right now.

87
00:05:35,940 --> 00:05:40,060
So we don't have to come back and do it later as we've done throughout this course so far.

88
00:05:40,080 --> 00:05:48,650
So on that div I'll put on a class name of UI container and then finally at the bottom I will export

89
00:05:48,660 --> 00:05:51,410
default app like so.

90
00:05:51,420 --> 00:05:55,440
All right so now if we save this we can flip back over and we're going to see that the error message

91
00:05:55,440 --> 00:05:56,720
has now been updated.

92
00:05:56,730 --> 00:06:02,090
Now it says that it cannot resolve reducers which means essentially we don't have a reducers directory.

93
00:06:02,100 --> 00:06:04,980
We don't have any reducers to make use of whatsoever.

94
00:06:04,980 --> 00:06:07,390
Now we've already done a lot of typing inside this video.

95
00:06:07,390 --> 00:06:08,820
So let's take a quick pause right here.

96
00:06:08,880 --> 00:06:13,350
When we come back the next section will start creating some reducers for this application just to get

97
00:06:13,350 --> 00:06:16,110
our application rendering and working inside the browser.