-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
36 changed files
with
17,302 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
*/node_modules | ||
*.log |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,3 +2,4 @@ node_modules | |
build | ||
coverage | ||
.DS_Store | ||
website/build |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"workbench.colorCustomizations": {} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
FROM node:8.11.4 | ||
|
||
WORKDIR /app/website | ||
|
||
EXPOSE 3000 35729 | ||
COPY ./docs /app/docs | ||
COPY ./website /app/website | ||
RUN yarn install | ||
|
||
CMD ["yarn", "start"] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
version: "3" | ||
|
||
services: | ||
docusaurus: | ||
build: . | ||
ports: | ||
- 3000:3000 | ||
- 35729:35729 | ||
volumes: | ||
- ./docs:/app/docs | ||
- ./website/blog:/app/website/blog | ||
- ./website/core:/app/website/core | ||
- ./website/i18n:/app/website/i18n | ||
- ./website/pages:/app/website/pages | ||
- ./website/static:/app/website/static | ||
- ./website/sidebars.json:/app/website/sidebars.json | ||
- ./website/siteConfig.js:/app/website/siteConfig.js | ||
working_dir: /app/website |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
id: todo | ||
title: TODO | ||
--- | ||
|
||
This doc has not been created yet. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
--- | ||
id: doc1 | ||
title: Latin-ish | ||
sidebar_label: Example Page | ||
--- | ||
|
||
Check the [documentation](https://docusaurus.io) for how to use Docusaurus. | ||
|
||
## Lorem | ||
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien. | ||
|
||
## Mauris In Code | ||
|
||
``` | ||
Mauris vestibulum ullamcorper nibh, ut semper purus pulvinar ut. Donec volutpat orci sit amet mauris malesuada, non pulvinar augue aliquam. Vestibulum ultricies at urna ut suscipit. Morbi iaculis, erat at imperdiet semper, ipsum nulla sodales erat, eget tincidunt justo dui quis justo. Pellentesque dictum bibendum diam at aliquet. Sed pulvinar, dolor quis finibus ornare, eros odio facilisis erat, eu rhoncus nunc dui sed ex. Nunc gravida dui massa, sed ornare arcu tincidunt sit amet. Maecenas efficitur sapien neque, a laoreet libero feugiat ut. | ||
``` | ||
|
||
## Nulla | ||
|
||
Nulla facilisi. Maecenas sodales nec purus eget posuere. Sed sapien quam, pretium a risus in, porttitor dapibus erat. Sed sit amet fringilla ipsum, eget iaculis augue. Integer sollicitudin tortor quis ultricies aliquam. Suspendisse fringilla nunc in tellus cursus, at placerat tellus scelerisque. Sed tempus elit a sollicitudin rhoncus. Nulla facilisi. Morbi nec dolor dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et aliquet lectus. Pellentesque sit amet eros nisi. Quisque ac sapien in sapien congue accumsan. Nullam in posuere ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacinia leo a nibh fringilla pharetra. | ||
|
||
## Orci | ||
|
||
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin venenatis lectus dui, vel ultrices ante bibendum hendrerit. Aenean egestas feugiat dui id hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in tellus laoreet, eleifend nunc id, viverra leo. Proin vulputate non dolor vel vulputate. Curabitur pretium lobortis felis, sit amet finibus lorem suscipit ut. Sed non mollis risus. Duis sagittis, mi in euismod tincidunt, nunc mauris vestibulum urna, at euismod est elit quis erat. Phasellus accumsan vitae neque eu placerat. In elementum arcu nec tellus imperdiet, eget maximus nulla sodales. Curabitur eu sapien eget nisl sodales fermentum. | ||
|
||
## Phasellus | ||
|
||
Phasellus pulvinar ex id commodo imperdiet. Praesent odio nibh, sollicitudin sit amet faucibus id, placerat at metus. Donec vitae eros vitae tortor hendrerit finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae purus dolor. Duis suscipit ac nulla et finibus. Phasellus ac sem sed dui dictum gravida. Phasellus eleifend vestibulum facilisis. Integer pharetra nec enim vitae mattis. Duis auctor, lectus quis condimentum bibendum, nunc dolor aliquam massa, id bibendum orci velit quis magna. Ut volutpat nulla nunc, sed interdum magna condimentum non. Sed urna metus, scelerisque vitae consectetur a, feugiat quis magna. Donec dignissim ornare nisl, eget tempor risus malesuada quis. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
id: doc2 | ||
title: document number 2 | ||
--- | ||
|
||
This is a link to [another document.](doc3.md) | ||
This is a link to an [external page.](http://www.example.com) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
--- | ||
id: doc3 | ||
title: This is document number 3 | ||
--- | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac euismod odio, eu consequat dui. Nullam molestie consectetur risus id imperdiet. Proin sodales ornare turpis, non mollis massa ultricies id. Nam at nibh scelerisque, feugiat ante non, dapibus tortor. Vivamus volutpat diam quis tellus elementum bibendum. Praesent semper gravida velit quis aliquam. Etiam in cursus neque. Nam lectus ligula, malesuada et mauris a, bibendum faucibus mi. Phasellus ut interdum felis. Phasellus in odio pulvinar, porttitor urna eget, fringilla lectus. Aliquam sollicitudin est eros. Mauris consectetur quam vitae mauris interdum hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
|
||
Duis et egestas libero, imperdiet faucibus ipsum. Sed posuere eget urna vel feugiat. Vivamus a arcu sagittis, fermentum urna dapibus, congue lectus. Fusce vulputate porttitor nisl, ac cursus elit volutpat vitae. Nullam vitae ipsum egestas, convallis quam non, porta nibh. Morbi gravida erat nec neque bibendum, eu pellentesque velit posuere. Fusce aliquam erat eu massa eleifend tristique. | ||
|
||
Sed consequat sollicitudin ipsum eget tempus. Integer a aliquet velit. In justo nibh, pellentesque non suscipit eget, gravida vel lacus. Donec odio ante, malesuada in massa quis, pharetra tristique ligula. Donec eros est, tristique eget finibus quis, semper non nisl. Vivamus et elit nec enim ornare placerat. Sed posuere odio a elit cursus sagittis. | ||
|
||
Phasellus feugiat purus eu tortor ultrices finibus. Ut libero nibh, lobortis et libero nec, dapibus posuere eros. Sed sagittis euismod justo at consectetur. Nulla finibus libero placerat, cursus sapien at, eleifend ligula. Vivamus elit nisl, hendrerit ac nibh eu, ultrices tempus dui. Nam tellus neque, commodo non rhoncus eu, gravida in risus. Nullam id iaculis tortor. | ||
|
||
Nullam at odio in sem varius tempor sit amet vel lorem. Etiam eu hendrerit nisl. Fusce nibh mauris, vulputate sit amet ex vitae, congue rhoncus nisl. Sed eget tellus purus. Nullam tempus commodo erat ut tristique. Cras accumsan massa sit amet justo consequat eleifend. Integer scelerisque vitae tellus id consectetur. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
id: doc4 | ||
title: Other Document | ||
--- | ||
|
||
this is another document |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
id: doc5 | ||
title: Fifth Document | ||
--- | ||
|
||
Another one |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
id: fetch-services | ||
title: Fetch services | ||
sidebar_label: Fetch services | ||
--- | ||
|
||
this is a thing |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
--- | ||
id: installation | ||
title: Installation | ||
sidebar_label: Installation | ||
--- | ||
|
||
## Installation | ||
|
||
``` | ||
npm i -s resift redux react-redux | ||
``` | ||
|
||
> Redux 4 and React-Redux >= 7.1 are required peer dependencies to ReSift | ||
## Creating the data service and HTTP service | ||
|
||
`dataService.js` | ||
|
||
```js | ||
import { createHttpService, createDataService } from 'resift'; | ||
|
||
const http = createHttpService({ | ||
prefix: '/api', | ||
getHeaders: () => { | ||
const token = localStorage.getItem('auth_token'); // or however you get your authentication token | ||
|
||
return { | ||
Authorization: `Bearer ${token}`, | ||
}; | ||
}, | ||
}); | ||
|
||
const services = { http }; | ||
|
||
const dataService = createDataService({ | ||
services, | ||
onError: e => { | ||
throw e; | ||
}, | ||
}); | ||
|
||
export default dataService; | ||
``` | ||
|
||
## Adding the `<ResiftProvider />` | ||
|
||
`App.js` | ||
|
||
```js | ||
import React from 'react'; | ||
import { ResiftProvider } from 'resift'; | ||
import RestOfYourApplication from '...'; | ||
import dataService from './dataService'; | ||
|
||
function App() { | ||
return ( | ||
<ResiftProvider dataService={dataService}> | ||
<RestOfYourApplication /> | ||
</ResiftProvider> | ||
); | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
--- | ||
id: quick-glance | ||
title: Quick glance | ||
sidebar_label: Quick glance | ||
--- | ||
|
||
After a lot of feedback on these docs, we realized the first thing you all wanted to see was some code. | ||
|
||
This quick glance is just that. Without too many words, here are some quick code examples that _show_ how ReSift dispatches requests, gives status updates, and pulls data from memory. | ||
|
||
> These examples makes use of [React Hooks](https://reactjs.org/docs/hooks-intro.html). If you're not familiar with React Hooks, these examples may look a bit foreign as they are hooks idiomatic. | ||
> | ||
> We recommend using our hooks API, but if you're not comfortable, we do offer a way to use this library with [React-Redux's `connect`](../TODO.md) for more compatibility. | ||
`Person.js` | ||
|
||
```js | ||
import React, { useEffect } from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { useDispatch, useFetch, isLoading } from 'resift'; | ||
import SpinnerOverlay from './SpinnerOverlay'; | ||
|
||
// import a pre-defined fetch factory | ||
import makePersonFetch from './makePersonFetch'; | ||
|
||
function Person({ personId, expand }) { | ||
const dispatch = useDispatch(); | ||
|
||
// make a fetch from a fetch factory | ||
const personFetch = makePersonFetch(personId); | ||
// fetches 👆 are nouns | ||
// this is a 👆 fetch factory | ||
|
||
// use an effect to re-dispatch requests when the fetch itself | ||
// or any of the request arguments change (e.g. `expand`) | ||
useEffect(() => { | ||
dispatch(personFetch(expand)); | ||
}, [dispatch, personFetch, expand]); | ||
|
||
// get the data and the status associated with your fetch | ||
const [person, status] = useFetch(personFetch); | ||
// 👆 | ||
// this hook causes re-renders when the status or the response changes | ||
|
||
return ( | ||
<div> | ||
{/* show a spinner overlay during the initial fetch or any re-fetches */} | ||
{isLoading(status) && <SpinnerOverlay />} | ||
|
||
{/* when the response comes back, the person will no longer be null */} | ||
{person && <div>Hello, {person.name}!</div>} | ||
</div> | ||
); | ||
} | ||
|
||
Person.propTypes = { | ||
personId: PropTypes.string.isRequired, | ||
expand: PropTypes.string, | ||
}; | ||
|
||
export default Person; | ||
``` | ||
|
||
--- | ||
|
||
`makePersonFetch.js` | ||
|
||
```js | ||
import { defineFetch } from 'resift'; | ||
|
||
// `makePersonFetch` is a "fetch factory" which defines what this fetch does and | ||
// how it gets data | ||
const makePersonFetch = defineFetch({ | ||
displayName: 'Get Person', | ||
|
||
// These 👇 are the arguments to `makePersonFetch` | ||
make: personId => ({ | ||
key: [personId], // 👈 This tells resift where to save the response | ||
|
||
// The `request` which is responsible for sending off the request | ||
// These 👇 are the arguments when dispatching | ||
request: expand => ({ http }) => | ||
// The http 👆 service is being "picked off" and used | ||
// to send off the request | ||
http({ | ||
method: 'GET', | ||
route: `/people/${personId}`, | ||
// This will add the query param `expand` to the request | ||
// e.g. `/people/person123?expand=blah | ||
query: { expand }, | ||
}), | ||
}), | ||
}); | ||
|
||
export default makePersonFetch; | ||
``` | ||
|
||
Intrigued? Continue to the [Main Concepts]() to learn more. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
--- | ||
id: what-is-resift | ||
title: What is ReSift? | ||
sidebar_label: What is ReSift? | ||
--- | ||
|
||
Simply put, **ReSift is a state management library for fetches** with the goal of giving your team a capable standard for fetching, storing, and reacting to data. | ||
|
||
## Motivation | ||
|
||
When you start to develop a React application, you soon realize that there is a lot more than meets the eye regarding data fetching. | ||
|
||
With every fetch we need to know: | ||
|
||
- If the data request is inflight (so we can show a loading indicator) | ||
- Where the resulting data will be stored, and how to later retrieve it | ||
- If it's related to other fetches so they update consistently | ||
- If the response was an error so we can try to recover | ||
|
||
These tasks themselves aren't overly complicated, but doing them over and over and over again _will_ take time away from your product. | ||
|
||
To make matters worse, there are an infinite number of ways to accomplish said tasks, and managing these differences while working on a team can be confusing and hard to manage. | ||
|
||
## Introducing ReSift | ||
|
||
ReSift is a capable and versatile library for data fetches. ReSift is opinionated where it matters but also pluggable to suit your different data fetching needs. | ||
|
||
**Features:** | ||
|
||
- 💾 Framework for storing and retrieving responses from data requests | ||
- 📬 Monitoring and updating the status of inflight requests | ||
- 🔌 Pluggable via custom "fetch services" | ||
- 🌐 Universal — Share code amongst your apps. Works with React Native! | ||
- 🎣 Hooks API | ||
- ⚛️ Optional Redux integration with Redux dev tools support |
Oops, something went wrong.