1

00:00:00,880  -->  00:00:06,330
In the last section we discussed exactly how redux promise unwraps a promise for us so that we only

2

00:00:06,330  -->  00:00:10,590
have to work with data in our reducers not promises.

3

00:00:10,590  -->  00:00:12,220
Let's go ahead and work with that day.

4

00:00:12,220  -->  00:00:15,800
And now inside of our weather reducer.

5

00:00:16,140  -->  00:00:19,980
First we need to figure out what part of the request we want to save.

6

00:00:20,340  -->  00:00:26,030
Let's flip back over to our consul here and take a look at the action that's coming in.

7

00:00:26,100  -->  00:00:32,310
So this is from the last section when we were a logging action that was coming in and we counsel logged

8

00:00:32,310  -->  00:00:35,060
it and we saw the payload here.

9

00:00:35,790  -->  00:00:40,890
We don't if we look at the payload here carefully we've got this config object we've got some headers

10

00:00:40,890  -->  00:00:42,580
and status and status text.

11

00:00:42,690  -->  00:00:45,120
We don't really care about any of that request data.

12

00:00:45,120  -->  00:00:48,930
The only thing we really care about here is the data object in here.

13

00:00:48,960  -->  00:00:54,810
This is a thing that contains the city and the list that contains all of our forecasts.

14

00:00:54,810  -->  00:00:58,440
So any time that we get a fetch weather action that comes in.

15

00:00:58,440  -->  00:01:06,690
The only piece of data that we really care about is action dot payload dot data that's only we care

16

00:01:06,690  -->  00:01:08,760
about.

17

00:01:08,760  -->  00:01:09,680
All right.

18

00:01:09,960  -->  00:01:15,750
Next thing we need to do is decide what our initial state for be or what our data structure for our

19

00:01:15,750  -->  00:01:17,130
weather state should be.

20

00:01:17,580  -->  00:01:22,950
A user can query for many different cities by you know entering one city and then searching for another

21

00:01:22,950  -->  00:01:29,340
and searching for another and thinking back to our initial Mock's for this project which I've still

22

00:01:29,340  -->  00:01:31,700
got up right here.

23

00:01:31,770  -->  00:01:35,320
We want to show multiple rows from multiple cities at a time.

24

00:01:35,430  -->  00:01:39,570
So that implies that we're going to have a data structure for our state here that's going to be kind

25

00:01:39,570  -->  00:01:41,510
of a list of sorts.

26

00:01:41,520  -->  00:01:46,440
So as you might imagine we're probably going to want to store all of these weather pieces of weather

27

00:01:46,440  -->  00:01:48,450
data in an array.

28

00:01:48,450  -->  00:01:56,760
So rather than having an initial state of Noal we'll have an initial state of an array instead.

29

00:01:56,760  -->  00:02:03,270
Next thing we need to do is set up a switch statement in here to handle only the fetch weather action

30

00:02:03,300  -->  00:02:11,020
type we'll set up our switch statement by writing switch action type.

31

00:02:11,940  -->  00:02:17,640
And then we need a case in here and we need to know what the action type that we specifically care about

32

00:02:17,640  -->  00:02:18,150
.

33

00:02:18,150  -->  00:02:25,450
So this is where if you recall we spoke briefly about the fecche weather typing declare it in here.

34

00:02:25,530  -->  00:02:30,650
This is where we're going to make use of that instead of just typing the string fetch whether you know

35

00:02:30,660  -->  00:02:36,440
fetch whether like so this is something that's really brittle it's really really fragile.

36

00:02:36,900  -->  00:02:43,590
If I accidently delete this R.H. here now all of a sudden this action right here that is supposed to

37

00:02:43,590  -->  00:02:45,790
map up with this case right here.

38

00:02:45,960  -->  00:02:50,360
They're not going to map up anymore because they've got different different strings right.

39

00:02:50,400  -->  00:02:56,400
So to handle that little bit of you know annoyance who knows when that's going to come out and bite

40

00:02:56,400  -->  00:03:04,390
you we assigned that type to the constant fecche weather and we exported it from this file.

41

00:03:04,470  -->  00:03:09,750
So we'll go ahead and import that inside of our weather reducer now and make that make use of that as

42

00:03:09,750  -->  00:03:11,520
our case type.

43

00:03:11,520  -->  00:03:23,520
So we will import fetch weather from and we're in reducers we'll go up into actions and then index.

44

00:03:23,520  -->  00:03:31,420
So we're up into actions and then index civil duties.

45

00:03:31,700  -->  00:03:37,080
Fetch weather now again we can change this string right here.

46

00:03:37,080  -->  00:03:44,620
All we want but both the action and the reducer that cares about it are referencing the same string

47

00:03:44,620  -->  00:03:44,650
.

48

00:03:44,660  -->  00:03:48,840
So you know no problem we can make typos all day.

49

00:03:50,130  -->  00:03:55,150
OK so now that we're inside of here we need to handle the payload.

50

00:03:55,380  -->  00:04:01,160
So we'll return in in an array action payload dot data.

51

00:04:01,360  -->  00:04:06,840
I remember putting this inside of an array because we're going to have multiple cities coming back here

52

00:04:06,840  -->  00:04:07,050
.

53

00:04:07,200  -->  00:04:12,930
And we also just discussed why we're taking payload data only this data property right here has the

54

00:04:12,930  -->  00:04:14,080
data that we actually care about.

55

00:04:14,100  -->  00:04:20,040
Has the city and the list of the forecast you know objects as well we don't care about like payload

56

00:04:20,280  -->  00:04:25,440
headers or payload status or any of those other properties.

57

00:04:25,440  -->  00:04:30,960
There's just one property from what we have here right now when we search for a city it will return

58

00:04:30,960  -->  00:04:31,200
it.

59

00:04:31,230  -->  00:04:37,050
You know we'll get this return action payload data inside of an array but we aren't actually collecting

60

00:04:37,050  -->  00:04:38,890
cities right.

61

00:04:38,910  -->  00:04:45,550
If a user searches for another city will return a new array with only that new city.

62

00:04:45,600  -->  00:04:49,910
We're not like collecting cities over time we're not building a list.

63

00:04:49,920  -->  00:04:58,280
We've only we still only have the concept of one searchable city one active city at a time so what we

64

00:04:58,280  -->  00:05:07,490
need to do here is say take the current state you know take our current list of cities and add this

65

00:05:07,490  -->  00:05:10,140
new city action not payload data to it.

66

00:05:10,220  -->  00:05:16,660
So we need to add onto the existing state not replace the existing state entirely.

67

00:05:17,480  -->  00:05:28,330
So when we try to do that wind up doing something like you know maybe state DOT push action payload

68

00:05:28,330  -->  00:05:29,460
dot data.

69

00:05:29,510  -->  00:05:34,040
Now before I tell you right now this is kind of like you know your natural inclination.

70

00:05:34,040  -->  00:05:36,790
OK no problem we need to collect cities over time.

71

00:05:36,890  -->  00:05:42,170
So as a user searches more cities just push it into our existing state right here.

72

00:05:42,170  -->  00:05:47,240
This right here this line of code that we have is opening up a huge can of worms.

73

00:05:47,240  -->  00:05:52,640
Believe it or not and this is probably something that's one of the most subtle traps inside of all of

74

00:05:52,640  -->  00:05:59,090
redux something that we discussed when we were coming re-act earlier we were covering react and we covered

75

00:05:59,090  -->  00:06:01,750
the topic of state and a rock component.

76

00:06:01,760  -->  00:06:04,540
You'll recall that I said very emphatically.

77

00:06:04,670  -->  00:06:07,980
Never ever call or say something like this.

78

00:06:07,980  -->  00:06:10,930
Dot state DOT text equals blah blah blah.

79

00:06:11,030  -->  00:06:13,400
Never said state equal or something right.

80

00:06:13,400  -->  00:06:20,400
We only update state by calling said state that is completely true of redux as well.

81

00:06:20,450  -->  00:06:24,270
We don't ever manipulate state directly and that's what's happening here.

82

00:06:24,320  -->  00:06:28,420
We've got this existing Auray state and we are changing that array.

83

00:06:28,430  -->  00:06:36,980
We're mutating it from mutating that array in place whenever we're inside of a reducer like this.

84

00:06:36,980  -->  00:06:39,260
We don't mutate our state.

85

00:06:39,260  -->  00:06:43,640
We return a completely new instance of state.

86

00:06:44,360  -->  00:06:52,910
So instead of writing state push we need to return a new array entirely that that includes all of the

87

00:06:52,910  -->  00:06:57,080
old weather data and the new piece of weather data.

88

00:06:57,080  -->  00:07:03,980
So one approach to make this happen might be something like instead of doing a push We're concat the

89

00:07:03,980  -->  00:07:10,240
existing array of cities with a new array that contains our new city right here.

90

00:07:10,310  -->  00:07:16,670
Concat doesn't change the existing array it creates a new array that contains all the old stuff and

91

00:07:16,700  -->  00:07:18,370
the new stuff in here.

92

00:07:18,380  -->  00:07:20,740
So this right here would be a much better approach.

93

00:07:20,750  -->  00:07:22,460
We are mutating our state.

94

00:07:22,470  -->  00:07:29,630
We're returning a new version of our state super key and redux and a very easy trap to fall into is

95

00:07:29,630  -->  00:07:32,270
to accidentally mutate your state over time.

96

00:07:32,270  -->  00:07:37,170
Always make sure that you are returning a new instance of state.

97

00:07:37,170  -->  00:07:42,530
So anyways state I can count right here works well you know it's going to work for us but there's a

98

00:07:42,530  -->  00:07:47,140
little piece of yes six syntax that we can take two approaches and a slightly different way.

99

00:07:47,390  -->  00:07:58,190
Instead of writing state concat we can write return action dot payload dot data and then dot dot dot

100

00:07:58,430  -->  00:08:00,690
state.

101

00:08:02,690  -->  00:08:06,740
So these two lines that we have right here are nearly completely identical.

102

00:08:06,920  -->  00:08:15,380
They say to make a new array put action data inside of it and then take this other variable which because

103

00:08:15,380  -->  00:08:18,730
of these three dots says oh yeah this might be an array.

104

00:08:18,770  -->  00:08:24,860
So take all of the entries outside inside of it and insert it into this new outside arrays so kind of

105

00:08:24,860  -->  00:08:27,610
like flatten it out for a little bit.

106

00:08:27,650  -->  00:08:35,190
This will end up with an array that looks like you know state or city city city.

107

00:08:35,330  -->  00:08:43,570
It does not end up with something that looks like city and then new Newroz city city like so.

108

00:08:44,380  -->  00:08:50,090
So this is a nice little very compact way of creating a new array which is what we always want to do

109

00:08:50,090  -->  00:08:52,890
with our state as opposed to mutating it.

110

00:08:53,540  -->  00:08:55,770
It's really up to you which approach you want to take.

111

00:08:55,940  -->  00:09:02,180
Do know that by doing action upload that data and then you know Khama the rest of this stuff we insert

112

00:09:02,210  -->  00:09:07,160
the new record at the top or the very front of the array and we can easily do that with the concat by

113

00:09:07,160  -->  00:09:11,210
swapping in two entries here as well if we wanted to.

114

00:09:12,230  -->  00:09:19,460
OK so one last time just to reiterate absolutely key and redox we never want to manipulate our state

115

00:09:19,580  -->  00:09:26,720
which is what we would have done if we did something like state DOT push action dot haloed dot data

116

00:09:26,720  -->  00:09:27,080
.

117

00:09:27,200  -->  00:09:30,690
It would have manipulated the existing array.

118

00:09:30,830  -->  00:09:35,950
Instead we create an entirely new array and return that instead.

119

00:09:37,020  -->  00:09:41,420
OK so we have now wired up or reducer here.

120

00:09:41,450  -->  00:09:45,490
We've got it added to our application under the combined reducers.

121

00:09:45,950  -->  00:09:52,310
Let's go ahead and test it out in the next section by making a new component to render a list of cities

122

00:09:52,560  -->  00:09:52,840
.

123

00:09:52,960  -->  00:09:53,390
Of their