https://github.com/darmikon/ducks-helpers
Some functions which helps to reduce boilerplate in redux ducks files
https://github.com/darmikon/ducks-helpers
ducks ducks-helpers react react-redux reactjs redux redux-actions
Last synced: 11 months ago
JSON representation
Some functions which helps to reduce boilerplate in redux ducks files
- Host: GitHub
- URL: https://github.com/darmikon/ducks-helpers
- Owner: Darmikon
- Created: 2017-01-15T16:19:02.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-09T08:49:42.000Z (almost 9 years ago)
- Last Synced: 2025-02-14T07:02:21.356Z (11 months ago)
- Topics: ducks, ducks-helpers, react, react-redux, reactjs, redux, redux-actions
- Language: JavaScript
- Size: 10.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ducks-helpers
Utils for [ducks](https://github.com/erikras/ducks-modular-redux) in redux to create action types and actions creators
###Installation
```
npm i --save ducks-helpers
```
###`constants(namespace, actions)`
`constants()` - generates action types names
If `~` sign presents at the beginning of the string
then extra sufixes will be generated:
```
// available SUFFIXES
// 'LOADING'
// 'PENDING'
// 'SUCCESS'
// 'ERROR'
// 'FAILED'
// 'CANCELED'
```
How to use:
```
import {constants} from 'ducks-helpers'
export const TYPE = constants('module-name/namespace', [
'~ASYNC_ACTION',
'SYNC_ACTION'
])
```
Result:
```
// with ~
// TYPE.ASYNC_ACTION === 'module-name/namespace/ASYNC_ACTION'
// TYPE.ASYNC_ACTION_SUCCESS === 'module-name/namespace/ASYNC_ACTION_SUCCESS'
//...
// TYPE.ASYNC_ACTION_CANCELED === 'module-name/namespace/ASYNC_ACTION_CANCELED'
// without ~
// TYPE.SYNC_ACTION === 'module-name/namespace/SYNC_ACTION'
```
Using handleActions() from [redux-actions](https://github.com/acdlite/redux-actions#handleactionsreducermap-defaultstate)
```
// reducer
export default handleActions({
[TYPE.SYNC_ACTION]: (state, action) => state,
[TYPE.ASYNC_ACTION]: (state, action) => state,
[TYPE.ASYNC_ACTION_LOADING]: (state, action) => state,
//... other suffixes also are available and can be used
[TYPE.ASYNC_ACTION_SUCCESS]: (state, action) => state,
[TYPE.ASYNC_ACTION_ERROR]: (state, action) => state,
}, {})
```
###`actions(types)`
`types` is an array of constants.
In case of using `~` sign at the beginning of action name
it will also create action creators with suffixes
`syncAction`,
`asyncAction`,
`asyncActionLoading`,
`asyncActionPending`,
`asyncActionCanceled`,
`asyncActionError`,
`asyncActionFailed`
using redux-actions:
```
import {actions} from 'ducks-helpers'
export const ACTION = actions(TYPE)
```
All action creators have been built now.
You can use any action creators in your container.
```
// container.js
import { ACTION } from '../duck'
...
@connect(
...,
{
asyncAction: ACTION.asyncAction
}
)
...
componentWillMount(){
this.props.asyncAction()
}
...
```