Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andre-araujo/redux-create-request
A helper to make requests connected with redux without stress
https://github.com/andre-araujo/redux-create-request
fetch middleware promise redux request requests
Last synced: 22 days ago
JSON representation
A helper to make requests connected with redux without stress
- Host: GitHub
- URL: https://github.com/andre-araujo/redux-create-request
- Owner: andre-araujo
- License: mit
- Created: 2018-08-24T17:27:34.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-17T20:34:39.000Z (over 6 years ago)
- Last Synced: 2024-11-18T04:43:53.757Z (about 1 month ago)
- Topics: fetch, middleware, promise, redux, request, requests
- Language: JavaScript
- Size: 67.4 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Redux Create Request.
A helper to make requests connected with redux without stress with only *607 B*.
## Why?
Creating requests connected with redux can be tedious and prone to inconsistencies, this library tries to reduce time spent coding repeated code when creating requests, given status to each request.
## Example:
```javascript
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { createRequestService, createRequestMiddleware } from 'redux-create-request';
const regionURL = 'https://servicodados.ibge.gov.br/api/v1/localidades/mesorregioes';
const getRegionsService = createRequestService({
type: 'GET_REGIONS_REQUEST',
request: () => fetch(regionURL, { method: 'GET' })
});
const getRegions = getRegionsService.action;
const store = createStore(
combineReducers({
regions: getRegionsService.reducer,
// more reducers...
}),
applyMiddleware(createRequestMiddleware),
);
store.subscribe(() =>
console.log(store.getState().regions)
// first dispatch {"loading":true,"loaded":false,"status":null,"error":null,"payload":null}
// second dispatch {"loading":false,"loaded":true,"status":200,"error":null,"payload":[{"id":1101,"nome":"M ...
)
store.dispatch(getRegions());
```
## Usage
### Install
`npm install redux-create-request --save`
### createRequestMiddleware
Redux middleware that makes Redux Create Request works.
Intercepts any actions dispatched by `redux-create-request`.
```javascript
import { createStore, applyMiddleware } from 'redux';
import { createRequestMiddleware } from 'redux-create-request';
// ...
const store = createStore(
rootReducer,
applyMiddleware(createRequestMiddleware),
);
// ...
```
### createRequestService
A helper function to create request actions and reducers in a easy way.
It returns an object with both action and reducer functions.
```javascript
import { createRequestService } from 'redux-create-request';
const MY_REQUEST_ACTION_TYPE = 'MY_REQUEST_ACTION_TYPE',
const {
action,
reducer
} = createRequestService({
type: MY_REQUEST_ACTION_TYPE,
request: (param1, param2) => fetch(regionURL, { method: 'GET' })
});
```
#### Sintaxe
> createRequestService({ type: String, request: Function })
##### type
Action type that will me used by redux to dispatch request states (start, success and error)
##### request
The actual request action creator, it will be the function called by `createRequestService().action(...params)`.
Each param is repassed to `request(...params)`.
It **must return a promise**
### Redux state template
`createRequestService().reducer` manages request state using the following template:
```javascript
const defaultInitialState = {
loading: false,
loaded: false,
status: null,
error: null,
payload: null,
};
```
##### loading
>`true` when request start
>`false` when request ends
>`false` when request throws an error
##### loaded
>`false` when request start
>`true` when request ends
>`false` when request throws an error
##### status
> `null` when request start
> Receives status code from request
##### error
> `null` when request start
> Receives error object when promise throws an error
##### payload
> `null` when request start
> Receives request payload when it has a `JSON` content-type header