Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rootsher/react-async-action
Solution for better handling of asynchronous calls in react components (independent isLoading, etc.)
https://github.com/rootsher/react-async-action
action async component promise react
Last synced: 8 days ago
JSON representation
Solution for better handling of asynchronous calls in react components (independent isLoading, etc.)
- Host: GitHub
- URL: https://github.com/rootsher/react-async-action
- Owner: rootsher
- Created: 2018-09-28T11:00:53.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-21T13:56:20.000Z (almost 6 years ago)
- Last Synced: 2024-04-27T18:20:39.718Z (7 months ago)
- Topics: action, async, component, promise, react
- Language: JavaScript
- Homepage:
- Size: 113 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-async-action - ``
[](https://www.npmjs.com/package/react-async-action)
[](https://www.npmjs.com/package/react-async-action)
[](https://github.com/ghengeveld/react-async/issues)
[](https://github.com/ghengeveld/react-async/pulls)
[](https://opensource.org/licenses/ISC)
## installation
```bash
npm install --save react-async-action
```
## usage
### data-request example
* using simple callback children:
```js
import Async from 'react-async-action';
export default () => (
fetch('api/product/list')}>
{({ isLoading, response, error }) => (
{isLoading &&
Loading...}
{response && {JSON.stringify(response, null, '\t')}}
{error && {JSON.stringify(error, null, '\t')}}
)}
);
```
* identical example, using only ``:
```js
import Async from 'react-async-action';
export default () => (
fetch('api/product/list')}>
Loading...
{({ response }) => {JSON.stringify(response, null, '\t')}}
{({ error }) => {JSON.stringify(error, null, '\t')}}
);
```
### request-on-demand example
```js
import Async from 'react-async-action';
export default () => (
fetch('api/product/1/save')} onDemand>
{({ run, response }) => (
save
{response &&
{JSON.stringify(response, null, '\t')}}
)}
);
```
### create-instance example (Async factory)
```js
import { createInstance } from 'react-async-action';
const ProductList = createInstance({
action: () => fetch('api/product/list'),
});
export default () => (
{({ response }) => (
{response &&
{JSON.stringify(response, null, '\t')}}
)}
);
```
### dependent-requests example
```js
import Async from 'react-async-action';
const fetchProductToken = () => fetch('api/product/token');
const fetchProductDetails = ({ token }) => fetch('api/product/1/details', { token });
export default () => (
{({ response: token }) => (
{({ response }) => (
{JSON.stringify(response, null, '\t')}
)}
)}
);
```
### response-transformer example
```js
import Async from 'react-async-action';
export default () => (
fetch('api/product/list')}
transformer={response => ({
...response,
someKey: 'someValue'
})}
>
{({ response }) =>
{response.someKey}}
);
```
### cancel-request example
```js
import Async from 'react-async-action';
export default () => (
fetch('api/product/list')} delay={3000}>
{({ cancel, reload }) => (
reload
cancel
Loading...
{({ response }) => {JSON.stringify(response, null, '\t')}}
)}
);
```
## API - ``
### component - available properties (props):
* `action` - a function that should return an asynchronous value
* `transformer` - a function that transform response
* `onResolve` - a function that fires when the promise is fulfilled
* `onReject` - a function that fires when the promise is rejected
* `delay` (ms) - delay in the execution of action
* `onDemand` (boolean) - a flag which allows to run the action on demand
* `params` (object) - parameters to compare when updating
### render component - available properties (props):
* `isPending` - returns true if the request has not yet been fired (boolean)
* `isLoading` - contains status of the asynchronous action (boolean)
* `response` - contains the response of the asynchronous action
* `error` - contains an error that occurred in an asynchronous action
* `cancel` - function allowing to cancel a pending action
* `run` - function which allows firing action on demand (onDemand flag is required)
* `reload` - a function that allows calling the action again
## ` components`
Sub-components are rendering only when the status occured.
These components can be inserted at any level of the structure,
because for communication with the main Async component is used react context api.
Unlike child-functional functions, they allow the capture of responses from Async-parents.
* `` - renders itself only when pending status occurs
* `` - renders itself only when the loading status occurs
* `` - render only when resolved status occurs
* `` - renders itself only if the status is rejected