https://github.com/latentflip/async-data-loader

https://github.com/latentflip/async-data-loader

Last synced: 30 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/latentflip/async-data-loader
• Owner: latentflip
• Created: 2015-12-01T15:05:33.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2015-12-01T15:36:38.000Z (almost 9 years ago)
• Last Synced: 2024-04-15T02:17:35.647Z (7 months ago)
• Language: JavaScript
• Size: 4.88 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Simple data-loading for React

This is not meant to replace something like a flux architecture as an app grows, but more to provide a starting point for simple data loading.

A higher-order-component, wraps "Page" components and describe their data requirements as a promise, or object of `keys => promises`.

Currently assumes you are using react router.

## Example

### In your app.js or wherever

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import { ApiProvider } from 'async-data-loader';

import HatsIndexPage from './pages/hats-index';

let api = new SomeApiWrapperForCurrentUser();

ReactDOM.render(

  

    

      //...routes

    

  

, document.getElementById('app'));

```

### In a "page" component

```javascript

import React from 'react';

import { connectApi } from 'async-data-loader';

const HatsIndex = React.createClass({

  render() {

    let { hats, fetching, fetchError } = this.props;

    // while data is still loading, fetching will be true

    if (fetching) {

      return (
Loading
);

    }


    // if any promises error, this will be set

    if (fetchError) {

      return (
Loading error: {fetchError}
);

    }


    // once all loaded, your props will be available

    return (

      


        
Hats:

        


          { hats.map(hat => (

            
{hat.id}: {hat.name} - {hat.color}

          ))}

        

      

    );

  }

});


//connectApi takes two arguments, mapProps, mapActions

// mapProps should be a function which receives the api, and the page's original props, and returns a promise of an object, or an object of promises, for the data to load:

// api - is as injected by ApiProvider

// props - is as passed from the router/renderer

// each key of the object returned here will be set as a prop on the page, once promises have resolved

let mapProps = function (api, props) {

  return {

    hats: api.fetch('/hats') // promises as object values will be resolved before being passed as props

  };

}

// lets come back to this

let mapActions = null;

export default connectApi(mapProps, mapActions)(HatsIndex);

```