a react-announce declarative to create REST based data stores
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



Build Status npm semantic-release Coverage Status

An HTTP based reactive data store. Essentially it takes in an input stream which represents the HTTP Request Stream (an Rx.Observable), and returns a Response stream (an Rx.Observable).


npm install react-announce-fetch --save


import Rx from 'rx'

import {create, toJSON} from 'react-announce-fetch'
import {connect} from 'react-announce-connect'
import {Component} from 'react'

const users = create(Rx.Observable.just(['/api/users', {method: 'GET'}]))

UsersList extends Component {
  render () {
    const users = this.state.users
    return <ul>{users.map(x => <li>{x.name}</li>)}</ul>



create(request, [fetch]) ⇒ Observable

Takes in request parameters that will be used to call the fetch function. The request params is essentially the arguments to the fetch function — [url, options]. Internally the request observable is used as follows:

request.flatMap(params => fetch.apply(null, params))

Though you can simply use the code above this module a couple of extra things to optimize interms of making HTTP requests.

  1. API requests are only made once per notification on the request stream, irrespective of how many subscribers have subscribed to it. Once a response is received it is shared by all its subscribers.

  2. No API requests must be made until there is at least one subscriber on the response stream. Once there is a subscriber only one request should be made with the latest value on the request stream.

  3. In case a subscriber disposes and resubscribes later in time, it should get the most recent response.

Kind: global function
Returns: Observable - Emits the Response Object that returned by fetch

Param Type Default Description
request Observable Request stream that emits params for the fetch function as an array.
[fetch] function window.fetch.bind(window) Optional custom fetch method

toJSON(response) ⇒ Observable

Create a Response stream where the json() method is already called upon. It makes sure that json parsing is only done once and the result is shared amongst everyone.

Kind: global function
Returns: Observable - Maps Response to a JS object containing json and the original response.

Param Type Description
response Observable Response stream that is returned by create


An observable is an interface that provides a generalized mechanism for push-based notification, also known as observer design pattern.

Kind: global external
See: RxJS Observable


Represents the response to a request in the fetch API.

Kind: global external
See: Response


window.fetch is an easier way to make web requests and handle responses than using XMLHttpRequest. It returns a promise and is easily consumed by Rx using the flatMap operator.

Kind: global external
See: fetch polyfill