rsrc-cache v0.0.1

A collection of components designed to simplify fetch state in React.

Docs

Getting Started

yarn add rsrc

Usage

import React from "react";
import { Resource } from "rsrc";

export default props => {
  const { id } = props;
  const url = `/todos/${id}`;

  return (
    <Resource
      url={url}
      maxAge={60}
      actions={{
        remove: () => ({
          options: {
            method: "DELETE"
          },
          invalidates: ["/todos"]
        })
      }}
    >
      {({ state, actions }) => {
        if (!state.fulfilled) return null;

        const todo = state.value;

        const handleClick = () => {
          actions
            .remove()
            .then(fetchState => {
              /* */
            })
            .catch(error => {
              /* */
            });
        };

        return (
          <div>
            <h1>{todo.name}</h1>
            <p>{todo.description}</p>
            <button onClick={handleClick}>×</button>
          </div>
        );
      }}
    </Resource>
  );
};

Related

• Redux
• React Refetch