https://github.com/fakundo/react-fetch-decorator
React Higher-Order Component (HOC) for observing and invoking fetch actions
https://github.com/fakundo/react-fetch-decorator
action fetch react
Last synced: 2 months ago
JSON representation
React Higher-Order Component (HOC) for observing and invoking fetch actions
- Host: GitHub
- URL: https://github.com/fakundo/react-fetch-decorator
- Owner: fakundo
- License: mit
- Created: 2021-11-24T20:08:43.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-11-25T14:49:13.000Z (over 4 years ago)
- Last Synced: 2024-04-24T19:49:34.151Z (about 2 years ago)
- Topics: action, fetch, react
- Language: TypeScript
- Homepage: https://fakundo.github.io/react-fetch-decorator/
- Size: 280 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-fetch-decorator
[](https://www.npmjs.com/package/react-fetch-decorator)
React Higher-Order Component (HOC) for observing and invoking `fetch` requests.
Features:
- can rerender component when request status changes
- can abort requests when unmounting component
- can abort request on second call
### Installation
```
npm i react-fetch-decorator
```
### Demo
[Demo](https://fakundo.github.io/react-fetch-decorator/)
/
[Source](https://github.com/fakundo/react-fetch-decorator/tree/master/examples)
### Usage
```js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import withActions from 'react-fetch-decorator'
class Dog extends Component {
static propTypes = {
fetchDogAction: PropTypes.object.isRequired,
}
handleClick = () => {
const { fetchDogAction } = this.props
fetchDogAction.run()
}
render() {
const { fetchDogAction } = this.props
const { isPending, isFailed, isSucceded, error, result } = fetchDogAction
return (
<>
Random Dog
{isPending && (
Loading...
)}
{isFailed && (
{error.message}
)}
{isSucceded && (
)}
>
)
}
}
const mapActionsToProps = {
fetchDogAction: async (signal) => {
const url = 'https://dog.ceo/api/breeds/image/random'
const response = await fetch(url, { signal })
return response.json()
}
}
export default withActions(mapActionsToProps)(Dog)
```
#### Action `run` method returns a Promise
```js
...
handleClick = async () => {
const { fetchDogAction } = this.props
try {
const dog = await fetchDogAction.run()
console.log('Fetched dog: ', dog)
}
catch (error) {
console.log('Error occured while fetching a dog: ', error.message)
}
}
...
```
#### Invoking action with parameters
```js
...
const mapActionsToProps = {
fetchUserAction: (signal) => async (userId) => {
const url = `/users/${userId}`
const response = await fetch(url, { signal })
return response.json()
}
}
...
fetchUserAction.run({
args: [userId]
})
...
```
## API
#### HOC creator params
- `mapActionsToProps = { ... }` - function or object that defines actions. If it's a function then component props will be passed to it.
- `options = { abortPendingOnUnmount: true }`
#### Structure of action object
- `isDefault` - `true` if action never ran
- `isPending` - `true` if action is pending
- `isSucceded` - `true` if action has succeded
- `isFailed` - `true` if action has failed
- `result` - result of action
- `error` - error occured while performing action
- `run(runOptions)` - starts action
- `reset(resetOptions)` - resets action
#### `runOptions`
- `args = []` - arguments will be passed to action
- `silent = false` - disables throwing errors
- `abortPending = true` - aborts previous action if it still running
- `updateComponent = true` - allows to rerender component on status change
- `updateComponentOnPending = undefined`
- `updateComponentOnSuccess = undefined`
- `updateComponentOnFailure = undefined`
#### `resetOptions`
- `abortPending = true` - aborts pending action
- `updateComponent = true` - invokes component rerender