https://github.com/andersdjohnson/redux-reducer-async
Create redux reducers for async behaviors of multiple actions.
https://github.com/andersdjohnson/redux-reducer-async
action actions async flux flux-architecture flux-pattern flux-standard-action fsa fsa-actions promise promises react reducer reducer-creation reducers redux
Last synced: 2 months ago
JSON representation
Create redux reducers for async behaviors of multiple actions.
- Host: GitHub
- URL: https://github.com/andersdjohnson/redux-reducer-async
- Owner: AndersDJohnson
- License: mit
- Created: 2017-07-02T19:05:09.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-12T09:52:42.000Z (over 2 years ago)
- Last Synced: 2024-04-14T05:16:05.247Z (about 1 year ago)
- Topics: action, actions, async, flux, flux-architecture, flux-pattern, flux-standard-action, fsa, fsa-actions, promise, promises, react, reducer, reducer-creation, reducers, redux
- Language: JavaScript
- Homepage:
- Size: 794 KB
- Stars: 14
- Watchers: 2
- Forks: 2
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# redux-reducer-async
> Create redux reducers for async behaviors of multiple actions.
[](https://npmjs.com/package/redux-reducer-async)
[](https://travis-ci.org/AndersDJohnson/redux-reducer-async)
[](https://codecov.io/gh/AndersDJohnson/redux-reducer-async)
Be DRY & reduce boilerplate.
Standardize state schema with managed properties for loading, success, and error cases.
Think of it as [`redux-actions`](https://redux-actions.js.org/) for asynchronous reducers.
Works with [Flux Standard Actions (FSA)][FSA].
By default, supports the action type conventions of [`redux-promise-middleware`][redux-promise-middleware],
but see [Custom Action Types](#custom-action-types) below for configuration to support [`redux-promise`][redux-promise].
## Install
[](https://copyhaste.com/c?t=npm%20install%20--save%20redux-reducer-async "npm install --save redux-reducer-async (copy)")
## Use
```js
import createReducer from 'redux-reducer-async'
const myActionReducer = createReducer('MY_ACTION')
```
results in a reducer like this:
```js
(state = {}, action = {}) => {
switch (action.type) {
case 'MY_ACTION_PENDING':
return { ...state, loading: true, error: null }
case 'MY_ACTION_FULFILLED':
return { ...state, loading: false, error: null, data: action.payload }
case 'MY_ACTION_REJECTED':
return { ...state, loading: false, error: action.payload }
default:
return state
}
}
```
You can then mount it with [`combineReducers`](http://redux.js.org/docs/api/combineReducers.html):
```js
import { combineReducers } from 'redux'
import createReducer from 'redux-reducer-async'
const rootReducer = combineReducers({
myAction: createReducer('MY_ACTION')
})
```
Or even call it manually within another reducer (useful with [custom properties](#custom-properties) or [reducers](#custom-reducers)):
```js
import createReducer from 'redux-reducer-async'
const myActionReducer = createReducer('MY_ACTION')
const reducer = (state = {}, action = {}) => {
state = myActionReducer(state, action)
// ...
return state
}
```
### Custom Properties
You can provide custom property names (all optional) for each case to be used on the state:
```js
createReducer('MY_ACTION', {
loading: 'isMyActionLoading',
success: 'myActionData',
error: 'myActionError'
})
```
### Custom Reducers
You can also provide custom reducer functions (again all optional, but be careful to define all cases if you use non-standard property names in one):
```js
createReducer('MY_ACTION', {
loading: state => ({
...state,
myActionError: null,
myActionIsLoading: true,
extra: 'whatever'
})
// success, error...
})
```
And you can even mix these with custom properties:
```js
createReducer('MY_ACTION', {
loading: 'isLoading',
error: (state, action) => ({
...state,
isLoading: false,
error: action.payload,
also: 'etc'
})
})
```
### Custom Action Types
You can provide custom action types.
For example, to support [`redux-promise`][redux-promise], which uses same the action type for success and error cases (though it does not provide a loading action),
you can use `finalActionType`:
```js
import createReducer, { finalActionType } from 'redux-reducer-async'
createReducer(finalActionType('MY_ACTION'))
```
which is effectively like providing custom action types:
```js
createReducer({
loading: 'MY_ACTION_PENDING',
success: 'MY_ACTION',
error: 'MY_ACTION'
})
```
Or similarly by passing suffixes to the `actionTypes` helper,
which is normally used to explicitly define all types:
```js
import createReducer, { actionTypes } from 'redux-reducer-async'
createReducer(actionTypes('MY_ACTION', '_LOADING', '_SUCCESS', '_ERROR'))
```
But can also be used to suppress suffixes (here undefined means use default):
```js
createReducer(actionTypes('MY_ACTION', undefined, '', ''))
```
### Transforms
As a shortcut to defining custom reducers, you can provide transform functions to manipulate only the payload, optionally in success and/or error cases:
```js
createReducer('MY_ACTION', {
transform: payload => ({
...payload,
title: payload.title.trim()
}),
transformError: payload => ({
...payload,
message: `There was an error: ${payload.message}`
})
})
```
[redux-promise-middleware]: https://github.com/pburtchaell/redux-promise-middleware
[redux-promise]: https://github.com/acdlite/redux-promise
[FSA]: https://github.com/acdlite/flux-standard-action