https://github.com/fakundo/react-axios-hoc
React Higher-Order Component (HOC) for observing and invoking axios requests
https://github.com/fakundo/react-axios-hoc
axios hoc react
Last synced: about 2 months ago
JSON representation
React Higher-Order Component (HOC) for observing and invoking axios requests
- Host: GitHub
- URL: https://github.com/fakundo/react-axios-hoc
- Owner: fakundo
- Created: 2017-11-06T01:05:29.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:02:40.000Z (over 3 years ago)
- Last Synced: 2025-07-06T03:40:52.971Z (12 months ago)
- Topics: axios, hoc, react
- Language: JavaScript
- Homepage: https://fakundo.github.io/react-axios-hoc/
- Size: 2.19 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-axios-hoc
[](https://www.npmjs.com/package/react-axios-hoc)
React Higher-Order Component (HOC) for observing and invoking `axios` 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-axios-hoc
```
### Demo
[Demo](https://fakundo.github.io/react-axios-hoc/)
/
[Source](https://github.com/fakundo/react-axios-hoc/tree/master/examples)
### Usage
```js
import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
import withActions from 'react-axios-hoc'
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: cancelToken => () => (
axios('https://dog.ceo/api/breeds/image/random', {
cancelToken
})
)
}
export default withActions(mapActionsToProps)(Dog)
```
#### Action `run` 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 arguments
```js
...
const mapActionsToProps = {
fetchUserAction: cancelToken => id => (
axios(`/users/${id}`, { cancelToken })
)
}
...
fetchUserAction.run({
params: [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 request is pending
- `isSucceded` - `true` if request has succeded
- `isFailed` - `true` if request has failed
- `result` - result of request
- `error` - error occured while performing request
- `run(runOptions)` - starts request
- `reset(resetOptions)` - resets action (aborts request & resets status)
#### `runOptions`
- `params = []` - params will be passed to axios action
- `silent = false` - disables throwing errors
- `abortPending = true` - aborts previous request if it's still running
- `updateComponent = true` - invokes component rerender on status change
- `updateComponentOnPending = true`
- `updateComponentOnSuccess = true`
- `updateComponentOnFailure = true`
#### `resetOptions`
- `updateComponent = true` - invokes component rerender