1

00:00:00,870  -->  00:00:08,280
A Welcome Back in the last chapter we got a good taste of redux including actions action creators and

2

00:00:08,280  -->  00:00:10,770
even some reducers in there as well.

3

00:00:10,770  -->  00:00:15,930
In this chapter we're going to focus on creating an app that's going to serve three purposes.

4

00:00:16,170  -->  00:00:19,800
First we're going to solidify our knowledge of react.

5

00:00:19,800  -->  00:00:23,490
Number two we're going to get much more familiar with redux.

6

00:00:23,490  -->  00:00:29,780
And number three we're going to figure out how to make asynchronous calls with redux like Ajax requests

7

00:00:29,790  -->  00:00:31,000
for example.

8

00:00:31,470  -->  00:00:36,450
So let's talk a little bit about the app that we're going to build by looking at a mockup and then we're

9

00:00:36,450  -->  00:00:40,100
going to talk about architecture and challenges.

10

00:00:40,790  -->  00:00:41,300
OK.

11

00:00:41,310  -->  00:00:43,110
So here's our mockup right here.

12

00:00:43,470  -->  00:00:48,750
It's not unlike the YouTube video player app that we built previously but this time around it's obviously

13

00:00:48,750  -->  00:00:50,410
going to be redux themed.

14

00:00:51,030  -->  00:00:56,090
So our app is going to be a weather forecast browser at the top.

15

00:00:56,130  -->  00:00:58,580
A user is going to be able to search for a city.

16

00:00:58,620  -->  00:01:04,800
So let's say you know San Francisco or New York when they submit the city by clicking search here or

17

00:01:04,800  -->  00:01:12,810
pressing Enter we're going to submit a query to a third party API that's going to serve us back forecasted

18

00:01:12,810  -->  00:01:15,190
weather data for the next five days.

19

00:01:15,330  -->  00:01:21,630
Once we get that weather back we're going to add a row on a table here with information about that particular

20

00:01:21,930  -->  00:01:24,790
cities forecast for the next five days.

21

00:01:24,840  -->  00:01:30,450
The user can search for many different cities over time and they each for each search it should just

22

00:01:30,450  -->  00:01:32,480
add an additional row.

23

00:01:33,300  -->  00:01:38,160
So in the table itself the first column is going to be just the city and they search for the actual

24

00:01:38,220  -->  00:01:47,410
name the remaining columns on here are going to be the temperature pressure and humidity that is forecast

25

00:01:47,410  -->  00:01:48,910
and for the next five days.

26

00:01:48,960  -->  00:01:52,260
And there's a little twist rather than doing just numbers or something like that.

27

00:01:52,260  -->  00:01:56,230
We're going to do a simple line chart to represent each of those values.

28

00:01:56,370  -->  00:02:01,200
So each chart here is going to represent you know the temperature of the pressure and the humidity for

29

00:02:01,200  -->  00:02:07,320
that given city over the next five days to keep the complexity of these charts down a little bit.

30

00:02:07,320  -->  00:02:12,480
We're not going to be doing a lot around adding say like axes to the charts or values on the charts

31

00:02:12,480  -->  00:02:12,540
.

32

00:02:12,570  -->  00:02:14,670
It's going to be a lot more for you.

33

00:02:14,670  -->  00:02:17,820
Just give me our users the ability to have out a very simple glance.

34

00:02:17,850  -->  00:02:22,920
You know in the next five days do I expect the weather to generally go up or down and temperature.

35

00:02:23,630  -->  00:02:27,560
OK let's talk a little bit about the challenges that we need to solve here.

36

00:02:27,570  -->  00:02:32,710
The first challenge as I mentioned above is we need to figure out a way to make Ajax requests with three

37

00:02:32,770  -->  00:02:38,490
weeks when we did this with the YouTube app we just made an Ajax request right in the event handler

38

00:02:38,490  -->  00:02:39,810
of our component.

39

00:02:39,990  -->  00:02:44,610
So it was kind of like an approach where we only had right at right we didn't have redux around to manage

40

00:02:44,610  -->  00:02:47,310
our application stay with redux.

41

00:02:47,340  -->  00:02:53,270
We need to centralize all of our logic into reducers and actions as much as possible and instead our

42

00:02:53,310  -->  00:02:58,200
re-act components are only responsible for showing data they're not responsible for fetching data at

43

00:02:58,200  -->  00:02:58,980
all.

44

00:02:58,980  -->  00:03:01,800
Of course they can tell a redux like hey please go fetch this data.

45

00:03:01,800  -->  00:03:04,970
Someone just clicked on the search button up here.

46

00:03:05,160  -->  00:03:09,930
But in general are re-act components are not going to make any Ajax requests whatsoever.

47

00:03:10,080  -->  00:03:13,330
We're going to rely entirely upon redux to do that for us.

48

00:03:13,650  -->  00:03:15,420
So that's the first challenge.

49

00:03:15,420  -->  00:03:18,950
The second challenge is obviously you know we've got to figure out how to do this chart here.

50

00:03:18,990  -->  00:03:23,360
This line chart we're gonna use a third party library to draw that chart for us.

51

00:03:23,460  -->  00:03:28,230
But still you know we need to figure out how to work with a component that has been created by another

52

00:03:28,230  -->  00:03:32,900
developer and integrate it into our own project.

53

00:03:32,910  -->  00:03:38,310
The third challenge that we need to figure out here is how to deal with a redux application where state

54

00:03:38,400  -->  00:03:40,890
changes significantly over time.

55

00:03:41,040  -->  00:03:44,480
In the last half we built the it was like you know fairly static.

56

00:03:44,580  -->  00:03:50,550
We had that set array of books and the only thing that ever changed was the active Look this time around

57

00:03:51,310  -->  00:03:56,160
or give me changing our state significantly as you might imagine we're going to have like you know a

58

00:03:56,160  -->  00:04:00,230
list of cities here each time that a user conducts a search.

59

00:04:00,660  -->  00:04:03,270
We were not going replace that array of cities right.

60

00:04:03,270  -->  00:04:04,930
We're going to add onto that array.

61

00:04:04,980  -->  00:04:09,120
So it's not like the active book that we were working with previously where like we just kind of knocked

62

00:04:09,120  -->  00:04:13,560
off the existing active book and said You know I don't care about what was there before is not active

63

00:04:13,560  -->  00:04:15,090
anymore this time around.

64

00:04:15,090  -->  00:04:21,070
We're going to kind of be amalgamating our gathering state over time.

65

00:04:21,120  -->  00:04:21,850
OK.

66

00:04:22,200  -->  00:04:27,570
So without further ado let's get started by installing our boilerplate package.

67

00:04:27,570  -->  00:04:39,000
I'm going to navigate in my browser to github dot com slash Stephen Grider slash redux simple starter

68

00:04:39,000  -->  00:04:41,190
.

69

00:04:41,190  -->  00:04:47,340
And once year remember we can grab this repo one of two ways either clone it from the link right here

70

00:04:47,340  -->  00:04:47,380
.

71

00:04:47,400  -->  00:04:56,400
If you're familiar with it or you can download it from the zip right here.

72

00:04:57,000  -->  00:05:02,460
So I'm going to clone it to my machine going and change into the directory and then I'm going to do

73

00:05:02,520  -->  00:05:05,610
an install to grab all of our dependencies.

74

00:05:05,610  -->  00:05:09,150
So this is going to take a little bit of time of course so I'll catch you in the next section when it's

75

00:05:09,150  -->  00:05:10,230
complete.