0.3.83 • Published 3 years ago
react-reqq v0.3.83
Description
Easy redux setup for react.
Installation
yarn add react-reqq
its not a typo, its just thicc
Feature Logs:
0.3.7
- Added
cacheStorage
option in configureApi- INDEXEDDB (buggy)
- LOCALSTORAGE
- WEBSQL
- Added
clearCache()
function inreq
- Added
cacheKey
option inget
,list
andshow
0.3.6
- Added
cancelAll()
function inreq
0.3.X
- Added Header override
- *Added transform state
Setup
Provider Setup
import { configureApi } from 'react-reqq';
export const store = configureApi({
endpoint: process.env.REACT_APP_END_POINT,
});
// import { Provider } from 'react-redux';
<Provider store={store}>
...
</Provider>
Import req
import { req } from 'react-reqq`
GET
req.get({
key: 'foo',
url: '/users',
params: {
q: 'juan',
}
});
How to get the data
useSelector
of react-redux
or use the helpers
*see below.
import { useSelector } from 'react-redux';
const data = useSelector((state) => state.api.foo);
POST
req.post({
key: 'foo',
url: '/users',
payload: {
name: 'juan',
}
});
PUT
req.put({
key: 'foo',
url: '/users/1',
payload: {
name: 'juan',
}
});
PATCH
req.patch({
key: 'foo',
url: '/users/1',
payload: {
name: 'juan',
}
});
REMOVE
req.remove({
key: 'foo',
url: '/users/1'
});
SET
req.set('isFoo', true);
LIST/SHOW
must have id
property in the response
req.list({
key: 'foo',
url: '/users',
transform: res => ({
data: res.users, // array
meta: res.meta, // for pagination *optional for meta
}),
});
req.show({
key: 'foo',
url: '/users/1'
id: 1,
});
React Hooks Helpers
useApiShow(key
, id
)
import { useApiShow } from 'react-reqq';
const data = useApiShow('foo', '1');
useApiLoading(key
, get|post|put|patch|remove|list|?id
)
import { useApiLoading } from 'react-reqq';
const isLoading = useApiLoading('foo', 'get');
useApiList(key
)
import { useApiList } from 'react-reqq';
const [list, meta] = useApiList('foo');
useApiShow(key
, id
)
import { useApiShow } from 'react-reqq';
const data = useApiShow('foo', '1');
When to use LIST+SHOW instead of GET
Use .list
+.show
for data with id
, .show
updates the .list
item if id
is found in .list
's response.
Other
configureApi
- endpoint string - Root endpoint http://localhost:8000
- requestHeaders function - Set headers on request.
- onError function - When an error occured during request.
GET | POST | PUT | PATCH | REMOVE | LIST | SHOW
req.get({
...
// Calls on success response
onSuccess: () => { ... },
// Calls on error response
onError: () => { ... },
});
GET | LIST | SHOW
req.get({
...
// Transforms response before storing
transform: () => {
// transform data here
return { ... };
},
// Cache response to local storage. `false` clears cache
cache: true,
});
Powered by Multisys Technologies Corporation
0.3.83
3 years ago
0.3.82
4 years ago
0.3.81
4 years ago
0.3.8
4 years ago
0.3.71
4 years ago
0.3.7
4 years ago
0.3.6
4 years ago
0.3.57
4 years ago
0.3.56
4 years ago
0.3.55
4 years ago
0.3.54
4 years ago
0.3.53
4 years ago
0.3.52
4 years ago
0.3.51
4 years ago
0.3.5
4 years ago
0.3.4
4 years ago
0.3.31
4 years ago
0.3.3
4 years ago
0.3.2
4 years ago
0.3.1
4 years ago
0.3.0
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.2
4 years ago
0.1.3
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago