WebediaGaming / react-nexus

Real world apps with React.
483 stars 20 forks source link

Need XHR in component example #17

Open imShara opened 9 years ago

imShara commented 9 years ago

What should isomorphic app make out the box? Complete server rendering. How to make full page render with data from database? With async API request from component before render. Then wait until all data fetched and renderToString().

React Nexus can make something like this but i can't understand how to write this. I don't need to store client stores on server side, but i need just to fetch data on client and on server like it made in react-async, but without fibers.

import React from 'react';
import Async from 'react-async';
import Rx from 'rx';

function defineXHRObservable(url) {
  return {
    id: url,
    start() {
      return Rx.fromPromise(fetch(url))
    }
  }
}

function MyComponentObservables(props) {
  return {
    user: defineXHRObservable(`/api/user?user${props.userID}`)
  }
}

@Async(MyComponentObservables)
class MyComponent extends React.Component {

  render() {
    let {user} = this.props
    ...
  }

}

Can you explain how to make this? Thanks.