1
00:00:01,260 --> 00:00:05,210
In this section, we're going to start to take a look at making Redux in typescript work together,

2
00:00:05,490 --> 00:00:09,170
we're going to be working on a very slightly larger application in the section.

3
00:00:09,420 --> 00:00:11,520
It's still a very small app, don't get me wrong.

4
00:00:11,820 --> 00:00:14,490
But we're going to be very much focused on the side of things.

5
00:00:14,490 --> 00:00:19,020
And I'm going to try to give you kind of a project template that you can very easily use in future projects

6
00:00:19,020 --> 00:00:19,500
as well.

7
00:00:20,050 --> 00:00:24,150
So let's first begin by taking a look at a very quick mockup of this very small application we're going

8
00:00:24,150 --> 00:00:24,570
to build.

9
00:00:25,350 --> 00:00:25,710
All right.

10
00:00:25,710 --> 00:00:26,130
Here we go.

11
00:00:26,600 --> 00:00:28,740
Like I said, it is very small, very simple.

12
00:00:28,960 --> 00:00:30,780
I don't really care about the UI side of things.

13
00:00:30,810 --> 00:00:34,050
This is really all about understanding Redux and TypeScript together.

14
00:00:34,960 --> 00:00:40,420
So our application is going to show a very simple text input to a user, a user's then going to type

15
00:00:40,420 --> 00:00:45,610
in some package name inside there and then click on a submit button once they click on that button.

16
00:00:45,640 --> 00:00:50,640
We're going to take that search term and we're going to do a search of the NPM API.

17
00:00:50,800 --> 00:00:56,680
We're going to try to find all different packages named React well, then get all these different packages

18
00:00:56,680 --> 00:00:58,930
with that name or somehow related to that name.

19
00:00:59,200 --> 00:01:02,160
And then we'll just print up the name of all those packages on the screen.

20
00:01:02,830 --> 00:01:07,540
So essentially, just a very simple let's make a request, get back some data, take that data showed

21
00:01:07,540 --> 00:01:08,680
on the screen and that's it.

22
00:01:09,250 --> 00:01:14,110
Now, again, I know this seems like just the smallest, most inconsequential thing, but trust me,

23
00:01:14,110 --> 00:01:19,240
along the way, you are going to be shocked, absolutely shocked at the amount of code that we're going

24
00:01:19,240 --> 00:01:24,130
to have to write if we want to really implement this correctly in the reader's side of things when it

25
00:01:24,130 --> 00:01:25,540
comes to kind of typescript.

26
00:01:26,910 --> 00:01:32,400
OK, so let's go back over to our terminal, let's generate a new project and then start installing

27
00:01:32,400 --> 00:01:33,530
a couple of dependencies.

28
00:01:34,290 --> 00:01:36,720
So I'm back inside of a workspace directory of sorts.

29
00:01:37,280 --> 00:01:40,290
I'm going to run and create react app.

30
00:01:40,980 --> 00:01:44,380
I'm going to name this project Redux Dashti.

31
00:01:46,180 --> 00:01:49,450
And then a dash dash template type script like so.

32
00:01:52,070 --> 00:01:56,000
As usual, this is going to take a couple of minutes to install, so I'm going to let it do its thing,

33
00:01:56,180 --> 00:01:57,200
come back to the next video.

34
00:01:57,200 --> 00:02:01,790
We're going to add in a couple more packages to kind of handle Redox and all that kind of stuff.

35
00:02:01,970 --> 00:02:03,650
And we'll start working on our application.