REEZ

Handling async action with ease

Installation

$ npm i reez --save
# or
$ yarn add reez

Features

• Simple API
• Request caching and deduping supported
• Auto polling supported
• ErrorBoundary and Suspense supported
• Optimistic updating supported
• Prefetching/debouncing/throttling supported
• Garbage collection supported

Getting started

import { useAsync } from "reez";

function App() {
  // create async dispatcher
  const dispatcher = useAsync(
    // cache key
    "repoData",
    // async action
    () =>
      fetch("https://api.github.com/repos/facebook/react").then((res) =>
        res.json()
      )
  );
  // dispatch and retrive async result
  const result = dispatcher();

  // show loading status
  if (result.loading) {
    return <div>Loading...</div>;
  }

  // request fail
  if (result.fail) {
    return <div>Error: {result.error.message}</div>;
  }
  // request success
  const data = result.data;
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  );
}

Examples

Mutating async result locally

function App() {
  // create async dispatcher
  const result = useAsync(
    // cache key
    "repoData",
    // async action
    () =>
      fetch("https://api.github.com/repos/facebook/react").then((res) =>
        res.json()
      )
  ).call();

  if (result.loading) return "Loading...";
  const data = result.data;

  function handleClick() {
    result.data = {
      ...data,
      name: prompt("Enter new repo name", data.name),
    };
  }

  return (
    <div>
      <h1>{data.name}</h1>
      <button onClick={handleClick}>Change repo name</button>
    </div>
  );
}