A Welcome Back in the last chapter we got a good taste of redux including actions action creators and 2
even some reducers in there as well. 3
In this chapter we're going to focus on creating an app that's going to serve three purposes. 4
First we're going to solidify our knowledge of react. 5
Number two we're going to get much more familiar with redux. 6
And number three we're going to figure out how to make asynchronous calls with redux like Ajax requests 7
for example. 8
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
going to talk about architecture and challenges. 10
OK. 11
So here's our mockup right here. 12
It's not unlike the YouTube video player app that we built previously but this time around it's obviously 13
going to be redux themed. 14
So our app is going to be a weather forecast browser at the top. 15
A user is going to be able to search for a city. 16
So let's say you know San Francisco or New York when they submit the city by clicking search here or 17
pressing Enter we're going to submit a query to a third party API that's going to serve us back forecasted 18
weather data for the next five days. 19
Once we get that weather back we're going to add a row on a table here with information about that particular 20
cities forecast for the next five days. 21
The user can search for many different cities over time and they each for each search it should just 22
add an additional row. 23
So in the table itself the first column is going to be just the city and they search for the actual 24
name the remaining columns on here are going to be the temperature pressure and humidity that is forecast 25
and for the next five days. 26
And there's a little twist rather than doing just numbers or something like that. 27
We're going to do a simple line chart to represent each of those values. 28
So each chart here is going to represent you know the temperature of the pressure and the humidity for 29
that given city over the next five days to keep the complexity of these charts down a little bit. 30
We're not going to be doing a lot around adding say like axes to the charts or values on the charts 31
. 32
It's going to be a lot more for you. 33
Just give me our users the ability to have out a very simple glance. 34
You know in the next five days do I expect the weather to generally go up or down and temperature. 35
OK let's talk a little bit about the challenges that we need to solve here. 36
The first challenge as I mentioned above is we need to figure out a way to make Ajax requests with three 37
weeks when we did this with the YouTube app we just made an Ajax request right in the event handler 38
of our component. 39
So it was kind of like an approach where we only had right at right we didn't have redux around to manage 40
our application stay with redux. 41
We need to centralize all of our logic into reducers and actions as much as possible and instead our 42
re-act components are only responsible for showing data they're not responsible for fetching data at 43
all. 44
Of course they can tell a redux like hey please go fetch this data. 45
Someone just clicked on the search button up here. 46
But in general are re-act components are not going to make any Ajax requests whatsoever. 47
We're going to rely entirely upon redux to do that for us. 48
So that's the first challenge. 49
The second challenge is obviously you know we've got to figure out how to do this chart here. 50
This line chart we're gonna use a third party library to draw that chart for us. 51
But still you know we need to figure out how to work with a component that has been created by another 52
developer and integrate it into our own project. 53
The third challenge that we need to figure out here is how to deal with a redux application where state 54
changes significantly over time. 55
In the last half we built the it was like you know fairly static. 56
We had that set array of books and the only thing that ever changed was the active Look this time around 57
or give me changing our state significantly as you might imagine we're going to have like you know a 58
list of cities here each time that a user conducts a search. 59
We were not going replace that array of cities right. 60
We're going to add onto that array. 61
So it's not like the active book that we were working with previously where like we just kind of knocked 62
off the existing active book and said You know I don't care about what was there before is not active 63
anymore this time around. 64
We're going to kind of be amalgamating our gathering state over time. 65
OK. 66
So without further ado let's get started by installing our boilerplate package. 67
I'm going to navigate in my browser to github dot com slash Stephen Grider slash redux simple starter 68
. 69
And once year remember we can grab this repo one of two ways either clone it from the link right here 70
. 71
If you're familiar with it or you can download it from the zip right here. 72
So I'm going to clone it to my machine going and change into the directory and then I'm going to do 73
an install to grab all of our dependencies. 74
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
complete.