Reflux - Loading data with Superagent

Share this video with your friends

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.

Srihari

~ 9 years ago

How can i render this using NOT es6/babel and with lodash.. i am trying:

var Name = React.createClass({
    mixins:[Reflux.connect(store)],
    render: function(){
        return(
            <div>
            {_.map(this.state.users,function(n){
                fName=n.user.name.first
                lName=n.user.name.last
                picture = n.user.picture.thumbnail;
                return ""+fName+" "+lName + " " + picture
            })
            }
                </div>
        )
    }
});

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.

Ignacio Morales

~ 9 years ago

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); }); },

Ben

~ 9 years ago

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

Martin Genev

~ 9 years ago

hi, great video, how do i use the connect to store mixin with es6 class syntax?