react-async-tracker

react wrapper (HOC) for tracking the status of async requests.

A package that reuses state logic responsible for tracking an async request's status. Supports promises, thunks, and any other type of async request. Don't forget to ⭐️ if you like.

Install

npm install react-async-tracker

or if you're using yarn

yarn add react-async-tracker

Usage

This package reuses state logic responsible for tracking an async request's status. It exports a wrapper function, and an object that contains the possible status values which you can use to compare your request's status against. The values that a request status can take are as follows:

• undefined: Request not yet initiated
• FETCH_STATUS.ACTIVE: 🏋
• FETCH_STATUS.SUCCESS: 😇
• FETCH_STATUS.FAIL: 😢
• FETCH_STATUS.INACTIVE: the request is set to this value ONLY after finishing (either with success or failure). BTW, this is equal to 0, which means it's a falsy value.

import { escortAsync, FETCH_STATUS } from 'react-async-tracker';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
    this.fetchData = this.fetchData.bind(this);
  }

  componentWillUnmount() {
    this.props.escort.cancelRequests();
  }

  fetchData() {
    this.props.escort.makeRequest(
      'myRequest',
      dispatch(thunkReturningFunction())
    )
    .then((data) => this.setState({ data }))
    .catch((e) => console.log('e', e));
  }

  render() {
    const { escort } = this.props;
    const { data } = this.state;
    return (
      <div>
          {data && data.length ? (
            <ul>
              display your fetched data
            </ul>
          ) : (
            <Fragment>
              {/* Create a reusable component that replicates the behavior below */}
              <span>{!escort.fetchStatus('myRequest') && (
                <button onClick={this.fetchData}>Fetch Data</button>
              )}
              </span>

              <span>{escort.fetchStatus('myRequest') === FETCH_STATUS.ACTIVE && (
                LOADING...
              )}</span>

              <span>{escort.fetchStatus('myRequest') === FETCH_STATUS.SUCCESS && (
                <p>😃</p>
              )}</span>

              <span>{escort.fetchStatus('myRequest') === FETCH_STATUS.FAIL && (
                <p>😔</p>
              )}</span>
            </Fragment>
          )}
        </h3>
      </div>
    )
  }
}

export default escortAsync(MyComponent);

The escortAsync function is a wrapper which passes down the object escort to your props. Use this object to make requests, track their status, and cancel them:

• escort.makeRequest(myRequestName, request): makes the request. Make sure whatever promise-chaining functions you use (then, catch, finally) are chained to it and NOT the request in the arguments!
• escort.fetchStatus(myRequestName): returns the status of the request. Compare this against one of the values of the FETCH_STATUS enum (scared by the word enum? pretend it's not there) object.
• escort.cancelRequests(): use this in the componentWillUnmount method to cancel all ongoing requests and avoid the memory leak console warning. And no, you can't cancel just one request.

Escort.makeRequest() Options:

PS: it's very important we don't rely on FETCH_STATUS.SUCCESS as a condition to access whether we have data. Why?

1. FETCH_STATUS.SUCCESS is temporary. The value should eventually change to FETCH_STATUS.INACTIVE (unless the user chooses not to for that individual request; that is).
2. fetchStatus(REQUEST_NAME) becomes assigned to SUCCESS before the result of the promise is resolved. Some time is given before changing value to INACTIVE so that users get to see the SUCCESS result on their screens.
3. Assuming you persist the data, e.g. store it in redux, unmounting the component will reset the status of the request to undefined while the data is still available.

License

MIT © @tareqdayya