Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/charlesstover/fetch-action-creator
Fetches using standardized, four-part asynchronous actions for redux-thunk.
https://github.com/charlesstover/fetch-action-creator
async asynchronous chai es6 javascript js mocha npm npm-module npm-package npmjs react-redux redux redux-actions redux-thunk thunk travis travis-ci travisci typescript
Last synced: 4 months ago
JSON representation
Fetches using standardized, four-part asynchronous actions for redux-thunk.
- Host: GitHub
- URL: https://github.com/charlesstover/fetch-action-creator
- Owner: CharlesStover
- License: mit
- Archived: true
- Created: 2017-12-27T20:51:53.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-07-17T21:41:55.000Z (over 4 years ago)
- Last Synced: 2024-10-01T06:21:59.935Z (4 months ago)
- Topics: async, asynchronous, chai, es6, javascript, js, mocha, npm, npm-module, npm-package, npmjs, react-redux, redux, redux-actions, redux-thunk, thunk, travis, travis-ci, travisci, typescript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/fetch-action-creator
- Size: 58.6 KB
- Stars: 28
- Watchers: 5
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README-v1.md
- License: LICENSE
Awesome Lists containing this project
README
# fetch-action-creator
Fetches using standardized, four-part asynchronous actions for redux-thunk.
Dispatch a single, asynchronous action that fetches a request, and your redux store will receive corresponding actions when the request (1) dispatches, (2) receives a response, (3) encounters an error, and/or (4) is aborted.
[](https://github.com/CharlesStover/fetch-action-creator/)
[](https://travis-ci.com/CharlesStover/fetch-action-creator/)
[](https://www.npmjs.com/package/fetch-action-creator)
[](https://www.npmjs.com/package/fetch-action-creator)
[](https://www.npmjs.com/package/fetch-action-creator)
## Install
* `npm install fetch-action-creator --save` or
* `yarn add fetch-action-creator`
Your redux store must be using the `thunk` middleware.
## Use
```JS
import fetchActionCreator from 'fetch-action-creator';
const myFetchAction = () =>
fetchActionCreator(
url,
requestInit,
createRequestAction,
createReceiveAction,
createErrorAction,
createAbortAction,
conditional
);
dispatch(myFetchAction()) // fetches url, dispatching asynchronous actions
```
## Example
```JS
import fetchActionCreator from 'fetch-action-creator';
const fetchEmployees = () =>
fetchActionCreator(
// URL to request.
'https://my.business.com/employees.json',
// Fetch options.
{
body: 'please',
headers: {
'Content-Type': 'text/plain; charset=utf-8'
},
method: 'GET'
},
// Action for when the request has dispatched.
(abortController) => ({
type: 'REQUEST_EMPLOYEES',
abortController
}),
// Action for when the server has responded.
(employees) => ({
type: 'RECEIVE_EMPLOYEES',
employees
}),
// Action for when an error has occurred.
(err, statusCode) => ({
type: 'EMPLOYEES_ERROR',
error: err,
statusCode
}),
// Action for when the request has been aborted.
() => ({
type: 'ABORT_EMPLOYEES'
}),
// Conditional function for when to disregard this action entirely.
(state) => {
// Don't fetch twice.
if (
state.employees.isFetching ||
Array.isArray(state.employees.list)
) {
return false;
}
return true;
}
);
```
## Parameters
* ### url: string
The URL to which you are dispatching a fetch request.
* ### requestInit: any
The fetch options which you are including in your fetch request _or_ a function that returns said options.
* ### createRequestAction: (abortController: AbortController | null) => AnyAction
An action creator that is called when your fetch request has been dispatched.
#### Parameters
* ##### abortController: AbortController | null
An AbortController instance that controls that abort signal for the fetch request.
If you desire to abort any of your fetch requests, you should store this instance in your redux state.
If the user's browser does not support aborting requests, the value will be `null`.
* ### createReceiveAction: (content: Object | string, statusCode: number, headers: Headers) => AnyAction
An action creator that is called when your fetch request has received a response.
#### Parameters
* ##### content: Object | string
A JavaScript object or string with which the server responded to the request.
* ##### statusCode: number
The status code with which the server responded to the request.
* ##### headers: Headers
An instance of `Headers` that contains the headers with which the server responded to the request.
* ### createErrorAction: (error: string, statusCode: null | number) => AnyAction
An action creator that is called when an error occurs.
#### Parameters
* ##### error: string
A string containing the error message. This may be either a JavaScript error or the response from the server.
* ##### statusCode: null | number
The status code with which the server responded to the request. If no status code exists (such as during a JavaScript error), the value is `null`.
* ### createAbortAction: () => AnyAction
An action creator that is called when the fetch request is aborted.
_See also:_ createRequestAction / Parameters / abortController
* ### conditional: (state: any) => boolean
If present, this function is called prior to the fetch request.
If it returns true, the fetch request will continue. If it returns false, the entire asynchronous action will be ignored.
#### Parameters
* ##### state: any
Your current redux state.