In the last section we discussed exactly how redux promise unwraps a promise for us so that we only 2
have to work with data in our reducers not promises. 3
Let's go ahead and work with that day. 4
And now inside of our weather reducer. 5
First we need to figure out what part of the request we want to save. 6
Let's flip back over to our consul here and take a look at the action that's coming in. 7
So this is from the last section when we were a logging action that was coming in and we counsel logged 8
it and we saw the payload here. 9
We don't if we look at the payload here carefully we've got this config object we've got some headers 10
and status and status text. 11
We don't really care about any of that request data. 12
The only thing we really care about here is the data object in here. 13
This is a thing that contains the city and the list that contains all of our forecasts. 14
So any time that we get a fetch weather action that comes in. 15
The only piece of data that we really care about is action dot payload dot data that's only we care 16
about. 17
All right. 18
Next thing we need to do is decide what our initial state for be or what our data structure for our 19
weather state should be. 20
A user can query for many different cities by you know entering one city and then searching for another 21
and searching for another and thinking back to our initial Mock's for this project which I've still 22
got up right here. 23
We want to show multiple rows from multiple cities at a time. 24
So that implies that we're going to have a data structure for our state here that's going to be kind 25
of a list of sorts. 26
So as you might imagine we're probably going to want to store all of these weather pieces of weather 27
data in an array. 28
So rather than having an initial state of Noal we'll have an initial state of an array instead. 29
Next thing we need to do is set up a switch statement in here to handle only the fetch weather action 30
type we'll set up our switch statement by writing switch action type. 31
And then we need a case in here and we need to know what the action type that we specifically care about 32
. 33
So this is where if you recall we spoke briefly about the fecche weather typing declare it in here. 34
This is where we're going to make use of that instead of just typing the string fetch whether you know 35
fetch whether like so this is something that's really brittle it's really really fragile. 36
If I accidently delete this R.H. here now all of a sudden this action right here that is supposed to 37
map up with this case right here. 38
They're not going to map up anymore because they've got different different strings right. 39
So to handle that little bit of you know annoyance who knows when that's going to come out and bite 40
you we assigned that type to the constant fecche weather and we exported it from this file. 41
So we'll go ahead and import that inside of our weather reducer now and make that make use of that as 42
our case type. 43
So we will import fetch weather from and we're in reducers we'll go up into actions and then index. 44
So we're up into actions and then index civil duties. 45
Fetch weather now again we can change this string right here. 46
All we want but both the action and the reducer that cares about it are referencing the same string 47
. 48
So you know no problem we can make typos all day. 49
OK so now that we're inside of here we need to handle the payload. 50
So we'll return in in an array action payload dot data. 51
I remember putting this inside of an array because we're going to have multiple cities coming back here 52
. 53
And we also just discussed why we're taking payload data only this data property right here has the 54
data that we actually care about. 55
Has the city and the list of the forecast you know objects as well we don't care about like payload 56
headers or payload status or any of those other properties. 57
There's just one property from what we have here right now when we search for a city it will return 58
it. 59
You know we'll get this return action payload data inside of an array but we aren't actually collecting 60
cities right. 61
If a user searches for another city will return a new array with only that new city. 62
We're not like collecting cities over time we're not building a list. 63
We've only we still only have the concept of one searchable city one active city at a time so what we 64
need to do here is say take the current state you know take our current list of cities and add this 65
new city action not payload data to it. 66
So we need to add onto the existing state not replace the existing state entirely. 67
So when we try to do that wind up doing something like you know maybe state DOT push action payload 68
dot data. 69
Now before I tell you right now this is kind of like you know your natural inclination. 70
OK no problem we need to collect cities over time. 71
So as a user searches more cities just push it into our existing state right here. 72
This right here this line of code that we have is opening up a huge can of worms. 73
Believe it or not and this is probably something that's one of the most subtle traps inside of all of 74
redux something that we discussed when we were coming re-act earlier we were covering react and we covered 75
the topic of state and a rock component. 76
You'll recall that I said very emphatically. 77
Never ever call or say something like this. 78
Dot state DOT text equals blah blah blah. 79
Never said state equal or something right. 80
We only update state by calling said state that is completely true of redux as well. 81
We don't ever manipulate state directly and that's what's happening here. 82
We've got this existing Auray state and we are changing that array. 83
We're mutating it from mutating that array in place whenever we're inside of a reducer like this. 84
We don't mutate our state. 85
We return a completely new instance of state. 86
So instead of writing state push we need to return a new array entirely that that includes all of the 87
old weather data and the new piece of weather data. 88
So one approach to make this happen might be something like instead of doing a push We're concat the 89
existing array of cities with a new array that contains our new city right here. 90
Concat doesn't change the existing array it creates a new array that contains all the old stuff and 91
the new stuff in here. 92
So this right here would be a much better approach. 93
We are mutating our state. 94
We're returning a new version of our state super key and redux and a very easy trap to fall into is 95
to accidentally mutate your state over time. 96
Always make sure that you are returning a new instance of state. 97
So anyways state I can count right here works well you know it's going to work for us but there's a 98
little piece of yes six syntax that we can take two approaches and a slightly different way. 99
Instead of writing state concat we can write return action dot payload dot data and then dot dot dot 100
state. 101
So these two lines that we have right here are nearly completely identical. 102
They say to make a new array put action data inside of it and then take this other variable which because 103
of these three dots says oh yeah this might be an array. 104
So take all of the entries outside inside of it and insert it into this new outside arrays so kind of 105
like flatten it out for a little bit. 106
This will end up with an array that looks like you know state or city city city. 107
It does not end up with something that looks like city and then new Newroz city city like so. 108
So this is a nice little very compact way of creating a new array which is what we always want to do 109
with our state as opposed to mutating it. 110
It's really up to you which approach you want to take. 111
Do know that by doing action upload that data and then you know Khama the rest of this stuff we insert 112
the new record at the top or the very front of the array and we can easily do that with the concat by 113
swapping in two entries here as well if we wanted to. 114
OK so one last time just to reiterate absolutely key and redox we never want to manipulate our state 115
which is what we would have done if we did something like state DOT push action dot haloed dot data 116
. 117
It would have manipulated the existing array. 118
Instead we create an entirely new array and return that instead. 119
OK so we have now wired up or reducer here. 120
We've got it added to our application under the combined reducers. 121
Let's go ahead and test it out in the next section by making a new component to render a list of cities 122
. 123
Of their