Repository files navigation

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" comingsoon)
• 📬 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 theRelay of REST. ReSift is in the same class of tools asRelay andthe Apollo Client. However,ReSift does not require GraphQL.

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

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//constmakeGetPerson=defineFetch({displayName:'Get Person',make:personId=>({request:()=>({ http})=>http({method:'GET',route:`/people/${personId}`,}),}),});exportdefaultmakeGetPerson;

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

importReact,{useEffect}from'react';import{useDispatch,useStatus,useData,isLoading}from'resift';importmakeGetPersonfrom'./makeGetPerson';functionPerson({ personId}){constdispatch=useDispatch();//                 👇👇👇 this is using the "fetch factory" from aboveconstgetPerson=makeGetPerson(personId);//     👆👆👆 this is a "fetch" fromuseEffect(()=>{// 1) kick off the initial requestdispatch(getPerson());},[dispatch,getPerson]);// 2) get the status of the fetchconststatus=useStatus(getPerson);// 3) pull data from the fetchconstperson=useData(getPerson);return(<div>{isLoading(status)&&<div>Loading...</div>}{person&&<>Hello,{person.name}!</>}</div>);}exportdefaultPerson;

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

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

To put it simply,window.fetch (orsimilar), isn't a state management library.
It'sjust 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!