Awesome
<h1 align="center">asyncdataloader-react</h1>AsyncDataLoader assumes you are using react-redux (https://github.com/reactjs/react-redux)
AsyncDataLoader is a React Higher Order Component which takes responsibility of fetching data of the Wrapped Component and offers many options like showing an interface preview of the Wrapped Component while data is being fetched, refetch data after specified time.
Installation
npm install asyncdataloader-react --save
Usage
Step-1
Add the reducer to your redux reducers
import {reducer} from 'asyncdataloader-react';
const reducers = {
// your other reducers
asyncDataLoader: reducer,
};
Add the following in your redux initial state
export const initialState = {
// Other inital objects
asyncDataLoader: {
components: {},
},
};
Step-2
import React, { PropTypes } from 'react';
import { asyncDataLoader } from 'asyncdataloader-react';
const InterfacePreview = (props) => <div>Loading</div>;
const get = (url) =>
// Return a new promise.
new Promise((resolve, reject) => {
// Do the usual XHR stuff
const req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function () {
// This is called even on 404 etc
// so check the status
if (req.status == 200) {
// Resolve the promise with the response text
resolve(req.response);
// Dispatch actions, to store response in redux
} else {
// Otherwise reject with the status text
// which will hopefully be a meaningful error
reject(Error(req.statusText));
}
};
// Handle network errors
req.onerror = function () {
reject(Error('Network Error'));
};
// Make the request
req.send();
});
class Example extends React.Component {
static fetchDataAsync(dispatch, params, location) {
return get('https://jsonplaceholder.typicode.com/posts/1');
}
render() {
return <div>Success</div>;
}
}
export default asyncDataLoader(Example, {
componentName: 'Example',
refreshInterval: 60000,
},
InterfacePreview);
It also allows nested components(you can have multiple components with asyncDataLoader nested at different levels).
Parameters
@param {React.Component} WrappedComponent
The Component to be rendered; Component should have a static method with the
signature as follows:
static fetchDataAsync(dispatch, params, location, extraArguments);
If you want to refetch data invoke this.props.fetch() inside the WrappedComponent's methods.
@param {String} options.componentName
componentName needs to be unique,it is used to monitor the load status of
the component.
Async Load Status of a Component is of the form :
asyncLoadStatus[componentName] : {
loaded: 1/2/3,(1: Loaded Successfully, 2: Not Loaded, 3: Error while Loading)
loadCount: 1...,
loadTime: 12345(in milliseconds),
}
@param {Number} options.refreshInterval
refreshInterval is the time specified in milliseconds. After every specified milliseconds, data is fetched again. If not specified, data is only fetched once.
@param {function} options.wrappedComponentMapStateToProps
If the component needs to be connected to the redux store using 'connect' from 'react-redux',then specify mapStateToProps as wrappedComponentMapStateToProps
@param {[type]} options.wrappedComponentMapDispatchToProps
@param {[type]} options.enforceNoPreview
If specified, shows no preview before fetching data
@param {React.Component} InterfacePreview
Specify InterfacePreview if you want to specify custom preview to your Component while the data is being fetched. If not specified, a default loading gif is shown
@param {React.Component} RetryComponent
If you want to specify retry to your Component when data fetch fails.If not specified, a default retry is shown