react-action-observer

1.0.7 • Public • Published

Action observer

npm

HOC which allows you to observe the status of an asynchronous actions.

Features

  • can rerender component when status has changed
  • can abort axios requests on component unmount
  • can abort axios request on second call

Installation

yarn add react-action-observer

Usage

import axios from 'axios'
import actionObserver from 'react-action-observer'
 
const fetchGeolocation = cancelToken => axios('http://freegeoip.net/json/', { cancelToken })
 
@actionObserver
export default class TestComponent extends Component {
  static propTypes = {
    observeAction: PropTypes.func.isRequired,
    getObservedAction: PropTypes.func.isRequired
  }
 
  async handleClick = () => {
    const { observeAction } = this.props
    const data = await observeAction(cancelToken => fetchGeolocation(cancelToken))
    ...
  }
 
  render() {
    const { getObservedAction } = this.props
    const action = getObservedAction()
    return (
      <div>
        <button onClick={this.handleClick}>
          Fetch location (try click fast to see how multiple requests will be cancelled)
        </button>
        { action.isPending() &&
          <div>Loading ...</div>
        }
        { action.isSucceded() &&
          <pre>{ JSON.stringify(action.getResult().data, null, ' ') }</pre>
        }
      </div>
    )
  }
}

Props

  • observeAction(getAction, { key = '', shouldComponentUpdate = true, silent = true } = {})
  • getObservedAction(key = '')

Package Sidebar

Install

npm i react-action-observer

Weekly Downloads

1

Version

1.0.7

License

ISC

Last publish

Collaborators

  • fakundo