React Native (feat. Redux) HTTP Requests

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott Moss: So let's hop into HTTP and actually hook this Todo app up to a server. And then we'll go from there, we'll make it real, yeah? So I'm not gonna do it in here cuz then that would be the solution. Let's hop back over to our fancy thing here and we'll just make something else like talks to the server or some like that.

[00:00:26] So I'm gonna head back into, actually I'm just gonna make a new component here, let's just do that. And I'm gonna call this one, I don't even know what to call this one. Let's call it Lists. No, that's lame. We'll call it Reddit, we'll call it Reddit. So this will be Reddit.js, yeah it's a good example.

[00:00:49] So what we're gonna do is we're going to connect to a server. Yes?
>> Speaker 2: I have a question about scrolling. So in our Todo app-
>> Scott Moss: Mm-hm.
>> Speaker 2: As stuff goes underneath the screen, there's no way to scroll.
>> Scott Moss: I was wondering if somebody was gonna do that.

[00:01:05] You did Mark. So, [LAUGH] there's no way to scroll by default and that's because all we did was place it inside of a view. A view, is just a base type but there are other different types of use like list view and scroll view that we're gonna get into tomorrow.

[00:01:18] But yeah, you would either need to use a scroll view and make your own view inside of that. Or just use the list view which solves this problem for you. But we're gonna talk about the list view tomorrow. So, yeah. Cool all right, so what we are gonna do is we're gonna talk about some HTTP and how that actually works in React Native.

[00:01:38] So we're gonna import React. We're gonna do our Component again.
>> Scott Moss: And we'll just say from react here and then all the other stuff that we need. In this case will just do a View and a Text. I don't think we're gonna need more than that at this point.

[00:02:01]
>> Scott Moss: All right and then we'll just say export class Reddit extends Component. Great so we have that. And I'm just gonna go ahead and create this render here. And just return a Text or a View with a Text that says Reddit. Now I'm just gonna switch these out in my index files right quick.

[00:02:36]
>> Scott Moss: Fancy to the Reddit and Reddit. There we go, copy that, put that in my iOS and refresh.
>> Scott Moss: Okay, so there we go. So now we're on the Reddit.js. So now, this is where, it's like wow, this is literally like the web. Because it's literally the same thing.

[00:03:08] Who here has used window.fetch inside the web? window.fetch, right. If you don't know window.fetch is, you go to browser and you open it up. Whoa, let's unpause that. You go to the browser, you open it up, you can type in fetch(), you see this thing right here? So fetch is the new API to access, it's like the new Ajax.

[00:03:31] They're getting rid of XML HTTP requests and they're using fetch instead, which is like a promise based Ajax method that's built into the browser now. It's a standard. So it's not something Google made up or something. It's in most browsers now actually. So what React Native does, is it's like, let's just use that.

[00:03:48] So that's what they use. They just use window.fetch. Right inside the environment. And you don't have to import it anywhere. It's a global. It's globally available inside your applications. So there's no, I didn't have to import it from React Native or React. It's just going to be there.

[00:04:03] So to test this out what we're gonna do is we're going to use .com/.JSON. So this is the front page of Reddit right here. We're just going to use this as API, we're gonna render this stuff on the page. It's gonna be bags, we didn't talk about scroll views but we'll just do that.

[00:04:21] Maybe we'll get into scroll views today if we just can't stand it. So what we'll do first is, we're gonna do this all in the component. We're not going to make a service or talk about reduction or anything right now. We're just gonna do this in the component.

[00:04:33] We'll use life cycle hook, we'll say when componentDidMount or I should say will mount actually. So, the componentWillMount, we'll go ahead and make this call to get our stuff. So, what we'll do is we'll say fetch, which is going to be a global and then the URL that we want to fetch which is that.

[00:05:01] And then we can pass in options here like for the headers so far instance we can Accept: 'application/json' here. There we go. Actually know what we wanna do that's not the header object, I'm sorry. What we'll do we'll say fetch and then, or no that'll be the header because we're using shorthand method, yeah.

[00:05:31] So we'll just fetch and this returns a promise by default which is I think is pretty amazing. So we'll get promise back here which will give us the response and then, we want to get the res.json which also returns a promise. This is not unique to React Native, this is literally the fetch API.

[00:05:49] This is how this works exactly the same in the browser. If I were to copy this and go to the browser, actually it'll break cuz it's ZS6, but it's the same syntax. Returning a promise, I wanna get this stuff in here. I wanna call that then again. And the data is gonna be right here.

[00:06:06] And then I'm just going to console.log the data. And we'll see what that looks like. So we'll come in here. We'll debug the JS remotely. So we can look at the console. We'll refresh this. Cool, and then here we go, here's our front page of Reddit. It just spit it out for us.

[00:06:39] Although the server is not letting us scroll down and look at it, but that's it right there. If we look at the network tab, let me see if we refresh, will it show the network tab. I don't know if it will or not.
>> Scott Moss: No, it's not going to load the network tab.

[00:06:55] But anyway we get the data back and that's the data from Reddit, right there. So this is how you would use fetch for a shorthand by passing in a URL like this. It's assuming you wanna do a get request. But let's say you wanna do a post. Instead of passing this URL as the first argument, you would just do an object that had the method that you wanted to do.

[00:07:20] So we can say method: 'get' and instead of putting this here, this would be headers and then it would be the headers that we wanted. So you can do any method like that. But just by passing in like that. This is just shorthand, I'm going to get requests for this URL and then give me the response.

[00:07:37] The JSON and that's just gonna to resolve to date, I'm just logging the data, all right. But what we want to do instead here, I'll just say constructor, I'll set up some state.
>> Scott Moss: And I'll say this.state = {posts[]}, which an array and all I do is out of set the posted out data right there.

[00:08:11] Which is actually if we look at the data, it is post.data, wow what is this? This is a lot of stuff.
>> Scott Moss: I don't know, we'll have to see, I think it's post.data.
>> Scott Moss: So say this.setState({posts : data}). I think it's actually data.data.children but I will say data.data.

[00:08:46] There we go.
>> Scott Moss: Unexpected token. Where's that at?
>> Speaker 3: I think you need your Accept on line 14 to have
>> Speaker 3: Is it uppercase or lowercase?
>> Scott Moss: It's uppercase, but.
>> Speaker 3: It is, okay.
>> Scott Moss: Yeah, it's fine, yeah. I just freaked out on line 17 right here, this.setState({posts: data.data}).

[00:09:17] I must have missed something over here, let's see.
>> Scott Moss: Maybe one too many parenthesis, whatever. Let's just refresh.
>> Scott Moss: There we go. Sweet, so we got that. The post will be here and what we'll do is we'll just iterate over those posts with a View.
>> Scott Moss: Yeah we'll say View and then we'll say this.state.posts.map get the post.

[00:09:58] And what we want to render is going to be a Text with some property on the post and let's look at what that data looks like, if we can come here. I thought I had pretty JSON in here but I guess I don't, data.children.data. I know there's an author, okay, data.children.

[00:10:28] Okay, I think I know what to do, data.data.children, which is an array, and I want to get the post.dataproperly.author. I think that's gonna work. This.state.post. Let's reload this.
>> Scott Moss: Cool, okay, so looks like that don't work cuz it's probably the data's in the wrong shape. The way we can do this is use our debugger.

[00:11:05] So we'll coming here, get this, but we're already debugging. What I'll do now is I come over here to our debugger, I open this up to sources, head over to our debugger to our file in Reddit.
>> Scott Moss: And I will just put a break point right here. There we go.

[00:11:32] And we'll just refreshes this.
>> Scott Moss: Boom, and it stopped. So data is an object, right here, data.data just like I said .children and children.data.author. Yeah, that's what I got. So this should be good. So, let's check it out. Let me unpause it there you go, you have a question?

[00:12:07] Somebody raised their hand? I thought I saw you raise your hand, okay. All right, so componentWillMount this.state. Let's move this to DidMount, let's do that. Posts.data.author, all right. Now, let's try it out.
>> Scott Moss: And it stuck cuz I got this, still pause, there we go. Why are you not rendering this.state.posts.

[00:12:46]
>> Speaker 3: [COUGH] in the map you have posts instead of post.
>> Scott Moss: I have.
>> Speaker 3: And right down there
>> Scott Moss: [CROSSTALK] There you go, yeah so let's just say that should be read in. Thank you. I got to get rid of that break point stop.
>> Scott Moss: Now let's try it again.

[00:13:18]
>> Scott Moss: Still doesn't wanna do it.
>> Scott Moss: There it is. Okay it just took a while. Right, so then there's a front page of Reddit with all the authors on it. That's the entire front page right now, with just the authors. And that's pretty much HTTP, it's literally just window.fetch.

[00:13:39] And it's just a global. They didn't do anything new with it, they didn't add some crazy to stuff. Just like we're going to take the thing that's in the window.fetch and we're going to use it and that's basically it.