https://github.com/kwhitley/redux-automap
Redux helper library to greatly reduce action+reducer definition boilerplate.
https://github.com/kwhitley/redux-automap
Last synced: 23 days ago
JSON representation
Redux helper library to greatly reduce action+reducer definition boilerplate.
- Host: GitHub
- URL: https://github.com/kwhitley/redux-automap
- Owner: kwhitley
- License: mit
- Created: 2018-06-11T14:46:44.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-31T19:41:24.000Z (over 6 years ago)
- Last Synced: 2024-04-14T07:11:28.528Z (about 1 year ago)
- Language: JavaScript
- Size: 75.2 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Redux helper library to greatly reduce action+reducer definition boilerplate.
=======
#### Works with sagas, thunks, reselect, etc
[](https://www.npmjs.com/package/redux-automap)
[](https://www.npmjs.com/package/redux-automap)
[](https://travis-ci.org/kwhitley/redux-automap)
[](https://coveralls.io/github/kwhitley/redux-automap?branch=master)
[](https://www.npmjs.com/package/redux-automap)
## Why?
Because much of the redux boilerplate (defining consts, logic in reducers to match actions to reducers, etc)
really isn't necessary if you define actions with matching reducers together.
## Usage
```js
import { automap } from 'redux-automap'
const todos = automap({
initialState: [],
actionReducers: [
{
addTodo: text => ({ type: 'ADD_TODO', text }),
reducer: (state, action) => [ ...state, action.text ]
},
{
clearTodos: () => ({ type: 'CLEAR_TODOS' }),
reducer: state => []
}
]
})
/*
todos === {
actions: { // exposed for access to action creators
addTodo,
clearTodos
}
reducer: (state, action) // exposed as the main reducer for each branch
}
*/
const { addTodo, clearTodos } = todos.actions
const washClothesAction = addTodo('wash clothes') // { type: 'ADD_TODO', text: 'wash clothes' }
const foldClothesAction = addTodo('fold, clothes') // { type: 'ADD_TODO', text: 'fold clothes' }
let state = []
state = todos.reduce(state, washClothesAction) // state === [ 'wash clothes' ]
state = todos.reduce(state, foldClothesAction) // state === [ 'wash clothes', 'fold clothes' ]
state = todos.reduce(state, clearTodos()) // state === [ ]
```
#### Example (allows multiple actions routing through a shared reducer)
```js
import { automap } from 'redux-automap'
const category = automap({
initialState: 'dogs',
actionReducers: [
{
setCategory: category => ({ type: 'SET_CATEGORY', category }),
setCategoryToBirds: () => ({ type: 'SET_CATEGORY', category: 'birds' }),
reducer: (state, action) => action.category // both actions will use this shared reducer
}
]
})
const { setCategory, setCategoryToBirds } = todos.actions
let state = 'dogs'
state = todos.reduce(state, setCategory('cats')) // state === 'cats'
state = todos.reduce(state, setCategoryToBirds()) // state === 'birds'
```
## Changelog
v1.1.0 - added ability for multiple actions paired to one reducer
v1.2.0 - added optional pass-through selector namespacing for use with combined reducers (docs to follow)
v1.3.0 - actions and selectors are now automatically mapped onto default return (convenience)