Need help with react-async?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

andreypopp
453 Stars 30 Forks MIT License 184 Commits 16 Opened issues

Description

[DEPRECATED] Asynchronously fetch data for React components

Services available

!
?

Need anything else?

Contributors list

No Data

React Async

VERSION DESCRIBED IN THIS DOCUMENT IS NOT RELEASED YET

React Async provides a way for React components to subscribe for observable values.

Installation

React Async is packaged on npm:

sh
$ npm install react-async

Basic usage

React Async provides a component decorator

@Async
which given a set of observable specifications wraps a regular React component and returns a new one which subscribes to observables and re-renders the component when new data arrives.

The basic example looks like:

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 ... }

}

The

@Async
decorator injects data from observables via props so in
render()
method of
 the 
user
property will contain the data fetched via XHR.

Rendering async components on server with fetched async state

While React provides

renderToString(element)
function which can produce markup for a component, this function is synchronous. That means that it can't be used when you want to get markup from server populated with data.

React Async provides another version of

renderToString(element)
which is asynchronous and fetches all data defined in observable specifications before rendering a passed component tree.

First, you'd need to install

fibers
package from npm to use that function:
sh
$ npm install fibers

Then use it like: ```js import {renderToString} from 'react-async';

renderToString( , function(err, markup) { // send markup to browser }) ```

This way allows you to have asynchronous components arbitrary deep in the hierarchy.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.