Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ruanyl/universal-data-loader
Easily fetch data in React
https://github.com/ruanyl/universal-data-loader
Last synced: 3 months ago
JSON representation
Easily fetch data in React
- Host: GitHub
- URL: https://github.com/ruanyl/universal-data-loader
- Owner: ruanyl
- License: mit
- Created: 2017-09-14T19:19:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T07:06:40.000Z (about 2 years ago)
- Last Synced: 2024-10-06T16:03:32.975Z (4 months ago)
- Language: TypeScript
- Homepage: https://ruanyl.gitbook.io/universal-data-loader/
- Size: 1.78 MB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Introduction
universal-data-loader is a library that aims to make data fetching easier to manage in React application. You can easily manage cache, integrate with data persisters\(such as localStorage\), configure fetching behaviours. It works with [redux](https://github.com/reduxjs/redux) + [redux-saga](https://github.com/redux-saga/redux-saga) or the new [React Context API](https://reactjs.org/docs/context.html)
## Getting started
### Install
```text
$ npm i universal-data-loader --save
```
#### step 1: say you have an api call
```typescript
// an api call is simply a function that returns promise
type ApiCall = (args: any) => Promise;
```
Let's create a mock api call which returns a random number in 1000ms
```typescript
const mockApi = () => {
return new Promise((resolve) => {
setTimeout(() => resolve(Math.random()), 1000)
})
}
```
#### step 2: use DataLoader component
```typescript
import { DataLoader } from 'universal-data-loader'
// if you are using redux and redux-saga, import this one:
import { ReduxDataLoader as DataLoader } from 'universal-data-loader'
export const App = () =>
{
(loader) => {
if (loader.loading) {
return
loading...
}
if (loader.error) {
return Error!!!
}
return {loader.data ? loader.data : 'No Data!'}
}
}
```
The `loader` that child function gets as parameter:
```typescript
// data: the data you get from the api call
// loading: the load status, `true` when api call is running
// error: the Error throw from api call
// lastUpdateTime: the last time that data was loaded from api call
// lastErrorTime: the last time that data fetching throw an error
// load: call this function to manually start to load data
interface Loader {
data: T | null
loading: boolean
error: Error | null
lastUpdateTime?: number
lastErrorTime?: number
load: () => void;
}
```
#### Step 3: If you are using React >= 16.4.0 with the new Context API
```typescript
import { DataProvider } from 'universal-data-loader'
ReactDOM.render(
,
document.getElementById('root')
)
```
#### \(Step 3\): If you are using redux and redux-saga
```typescript
import {
dataLoaderSagas,
dataLoaderReducer,
DATA_LOADER_NAMESPACE,
} from 'universal-data-loader'
// combine dataLoaderReducer with your own reducers and give it the name: DATA_LOADER_NAMESPACE
const reducers = combineReducers({
[DATA_LOADER_NAMESPACE]: dataLoaderReducer,
})
// run sagas with dataLoaderSagas
sagaMiddleware.run(dataLoaderSagas)
```