resift v0.2.0

ReSift ·

Introduction

ReSift is a React state management library for fetches with the goal of giving your team a capable standard for fetching, storing, and reacting to data with a great developer experience.

Features:

• 💾 Global, consistent, injectable-anywhere data cache
• 🔄 Supports "fetch-then-render" (with "render-as-you-fetch" coming soon)
• 📬 Status reporting
• 🔌 Pluggable
• 🔗 REST oriented
• 👽 Backend agnostic
• 🌐 Universal — Share code amongst your apps. Works with React Native!
• 🎣 Hooks API
• 🤝 Full TypeScript support

We like to think of ReSift as the Relay of REST. ReSift is in the same class of tools as Relay and the Apollo Client. However, ReSift does not require GraphQL.

See this doc for definitions and comparisons of ReSift vs Relay/Apollo.

Basic usage

In order to get the benefits of these frameworks within REST, we first define a "fetch factory".

makeGetPerson.js

import { defineFetch } from 'resift';

//        👇 this is a fetch factory
//
const makeGetPerson = defineFetch({
  displayName: 'Get Person',
  make: personId => ({
    request: () => ({ http }) =>
      http({
        method: 'GET',
        route: `/people/${personId}`,
      }),
  }),
});

export default makeGetPerson;

Then you can use this fetch factory to:

1. kick off the initial request
2. get the status of the fetch
3. pull data from the fetch

Person.js

import React, { useEffect } from 'react';
import { useDispatch, useStatus, useData, isLoading } from 'resift';
import makeGetPerson from './makeGetPerson';

function Person({ personId }) {
  const dispatch = useDispatch();

  //                 👇👇👇 this is using the "fetch factory" from above
  const getPerson = makeGetPerson(personId);
  //     👆👆👆 this is a "fetch" from

  useEffect(() => {
    // 1) kick off the initial request
    dispatch(getPerson());
  }, [dispatch, getPerson]);

  // 2) get the status of the fetch
  const status = useStatus(getPerson);

  // 3) pull data from the fetch
  const person = useData(getPerson);

  return (
    <div>
      {isLoading(status) && <div>Loading...</div>}
      {person && <>Hello, {person.name}!</>}
    </div>
  );
}

export default Person;

In this basic example, we fetched and pulled data in the same component, but with ReSift, you don't have to!

With ReSift, you can dispatch a fetch in one component and pull it from another. This makes it much easier to reuse data across components and enables the concept of pre-fetching

Why ReSift?

What's wrong with window.fetch? Why use ReSift over traditional methods?

To put it simply, window.fetch (or similar), isn't a state management library. It's just a function that returns a promise of your data.

"State management" is up to you. If your application doesn't have a lot of changing state regarding data fetches, then it's easy to manage this state by yourself and you should.

However, you may not be so lucky. Here are some questions to help you consider if you should use this library:

• Does your app have to load data from multiple different endpoints?
• Do you want to cache the results of these fetches?
• Are you reusing this data across different components?
• Do you want state to stay consistent and update components when you do PUT, POST, etc?
• Do you have a plan for reporting loading and error statuses?
• Is it easy to onboard new members of your team to your data state management solution?

ReSift is an opinionated state management solution for data fetches for REST-oriented applications.

You could manage the state of your data fetches yourself (using Redux or similar) to get the same benefits but the question is: Do you want to?

Are you confident that your solution is something your team can follow easily? Does it scale well? Is it reusable?

If you answered "No" to any of those questions then give ReSift a try.

Intrigued? This only scratches the surface. Head on over to the docs!