1
00:00:00,850 --> 00:00:01,860
Well that's pretty much it.

2
00:00:01,870 --> 00:00:06,820
We finished this application before we move on I want to do a quick review of some very important concepts

3
00:00:06,820 --> 00:00:08,890
that we covered inside this application.

4
00:00:08,940 --> 00:00:14,650
I'm inside the actions index dodgiest file where we created in action creator to fetch weather from

5
00:00:14,710 --> 00:00:17,500
our open weather API inside of here.

6
00:00:17,500 --> 00:00:21,550
We made use of a constant declared type for our action.

7
00:00:21,580 --> 00:00:25,290
We made this constant action right here so that we would not risk making any typos.

8
00:00:25,390 --> 00:00:30,830
Between defining our typewrite here and when we actually used it inside of our producers file.

9
00:00:30,920 --> 00:00:36,890
In addition inside of our action creator we made use of redux promise which is a middleware that allows

10
00:00:36,890 --> 00:00:41,270
us to return a request excuse a promise on payload property right here.

11
00:00:41,510 --> 00:00:45,860
When we return a promise on this Paillard property redux promise is going to automatically wait for

12
00:00:45,860 --> 00:00:47,250
that promise to resolve.

13
00:00:47,450 --> 00:00:50,840
Then once it does it'll take the data that the problem is resolved with.

14
00:00:50,990 --> 00:00:56,330
It'll replace the request right here with that data and then it will send the action on to our reducers

15
00:00:57,200 --> 00:01:00,010
in your own applications that you start to work on in the future.

16
00:01:00,110 --> 00:01:04,640
I really expect that you'll probably end up making use of redux promise any time you need to make some

17
00:01:04,640 --> 00:01:07,330
type of Ajax request.

18
00:01:07,330 --> 00:01:13,040
Now the next big thing that we tackled inside this application was our weather reducer which was used

19
00:01:13,100 --> 00:01:16,700
to store all the data that we fetch from the outside API.

20
00:01:16,700 --> 00:01:21,890
The big lesson here was that we wanted to make sure that we never mutated existing state.

21
00:01:21,890 --> 00:01:27,290
So any time an action came in that we cared about we would make sure that we returned a completely new

22
00:01:27,350 --> 00:01:33,140
array rather than modifying the existing array that we already had the line of code that you see right

23
00:01:33,140 --> 00:01:38,600
here where we create a new array we add in a single new record and then add in all the previous records

24
00:01:38,600 --> 00:01:42,890
what we have is a very common pattern and it's something that you're going to see very frequently when

25
00:01:42,890 --> 00:01:45,220
you start working on your own redux projects as well.

26
00:01:46,230 --> 00:01:50,230
And the last big thing I wanted to mention was our Google Map component right here.

27
00:01:50,630 --> 00:01:57,200
So inside of our Google Map component we made use of 3x ref system in order to get a direct DOM reference

28
00:01:57,470 --> 00:02:01,520
to this div right here that was rendered in our browser.

29
00:02:01,560 --> 00:02:08,030
We then fed that ref off to the Google Maps library which was to render an actual library I-frame or

30
00:02:08,030 --> 00:02:13,470
see a map I-frame on the screen which made the user think that Yup we've got this map sitting right

31
00:02:13,470 --> 00:02:16,170
here and they could see the actual city appearing.

32
00:02:16,200 --> 00:02:22,170
So this was a good use or a good example of how we can still use third party libraries such as Google

33
00:02:22,170 --> 00:02:24,870
maps inside of a re-act application.

34
00:02:25,020 --> 00:02:26,010
And that's pretty much it.

35
00:02:26,960 --> 00:02:29,840
Now there's still a lot for us to learn about redux and react.

36
00:02:29,840 --> 00:02:31,490
So let's take a quick break right here.

37
00:02:31,580 --> 00:02:34,820
And in the next section we'll get started on our next application.