Reflux - Loading data with Superagent
Neither React nor Reflux come with a built-in library for loading data. Many people use jQuery, but this jQuery is heavy for the task. In this lesson, John shows you how to easily load in some data using Superagent and walks you through the process of displaying and formatting the data in your component.
[00:00] Now that we're connected to our store in Reflux, loading in some data is as simple as setting a default data set which can be returned in getInitialState, basically an array of nothing. That way, this won't error out the first time it tries to run through and render the data.
[00:18] In an init method, you can just make a request for some data. Once that data has loaded, just say, "this.trigger," and send that data along so that it can loop through and display each person that is in that data set.
[00:33] For this example, I'm just using the JSON server which I showed in another video, which just returns an array of people that have a name and an avatar. There's nothing fancy going on with the request I'm making.
[00:46] Let's go ahead, tear this all down, and start from scratch so you can see it being built up. I'll just go ahead and delete everything. I'm back to a basic "Hello world" example where I just return a message of Hello world, which is now on this.state.message. This message links up to this message and then renders out as Hello world.
[01:08] To start out, I'll just make a data property here, just cut everything out of this object, paste him up here, add a comma, and say, "return this.data," so that that links to this. Once this refreshes, you can see we're back to Hello world.
[01:28] Now I'm going to go ahead and install something called "superagent." This is a library just for making requests and loading in data. Its sole purpose is for making requests and loading data so you don't have to use something like jQuery or any other libraries. You'd only have to use this one.
[01:48] Say, "require("superagent")." It's just by convention that you call this request when you import it. I'll go ahead and set up our init method here. In init, I can make the request to our URL, which is localhost:3000/people.
[02:14] The second parameter takes the response, which is returned in a function. I'll use the ES6 way of writing this, where I can just say "response" with a fat arrow. Inside of this block, I can use the response and get the response.
[02:30] To show you that, I'll just say, "this.trigger," and then pass in an object with a message on it. This can be response.body and the first person in the array.name. You see, when that refreshes, that it gets the first person from my response and returns her name as the new message.
[02:53] Again, this.state.message was originally Hello world, but then, when the data comes back, it's now being set to what's passed into this.trigger because this.trigger calls set state inside of my component.
[03:07] We want to actually loop through every person in the response.body. We'll go ahead and create a people array and change Hello world. Instead of a string, it's now just an array. Then we'll say, "this.data.people," and assign it to response.body.
[03:27] Again, this people is just that people. Instead of sending an object in, we'll just send this.data. Instead of this.state.message, now we have this.state.people. Once I save this, you'll see that we'll just get a huge string of just unformatted data which you just can't read.
[03:53] Let's go ahead and format this a bit using map. Map is going to take a function. We'll loop through and get a person for each person or each object in that people array. We'll just use that fat arrow syntax again.
[04:10] We're going to return an element. We'll just return a div. Inside of that div, we'll just display person.name. Hit save. You can see now at least we have a whole bunch of divs with their names in it.
[04:28] Just as a note, this paren here and here aren't really required. I just like to use them as a "Hey, this is where my return statement starts and stops" around HTML elements. It just makes more sense, visually, to me.
[04:43] Instead of person.name, I'll just throw in an h2, make it look a little nicer, and then an image tag. Instead of source and a string, we'll just do person.avatar. Close that off. Hit save. You can see we have a nice, long set of people with names and avatars loading in.
superagent documentation change a little bit, right now you need to get the request first and then handle it. that's why the example doesn't work properly if you have the latest superagent version.
To fixed, just change the init call to something like this:
init() { var that = this; request.get('https://output.jsbin.com/dekafa.json') .set('crossOrigin', 'true') .end(function(err, res){ console.log(this); that.data.people = JSON.parse(res.text); that.trigger(that.data); }); },
Correct me I'm wrong, his example is a bit confusing. Using react-router, the store won't get initiated when the concerned component is called after a route change
I'm sure there's a good explanation to it, but this tut' seems to be tied to a very specific context
hi, great video, how do i use the connect to store mixin with es6 class syntax?
How can i render this using NOT es6/babel and with lodash.. i am trying:
i am connecting to randomUser Api. the issue im having is that i can't render line breaks between elements, and therefore can't render img src=linktoImage properly as well, it just shows the URL for respective image.