Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/calvinfroedge/redux-modifiers
A collection of generic functions for writing redux reducers to operate on various data structures
https://github.com/calvinfroedge/redux-modifiers
Last synced: about 1 month ago
JSON representation
A collection of generic functions for writing redux reducers to operate on various data structures
- Host: GitHub
- URL: https://github.com/calvinfroedge/redux-modifiers
- Owner: calvinfroedge
- Created: 2016-04-14T18:28:27.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-06-06T22:51:35.000Z (over 8 years ago)
- Last Synced: 2024-04-29T22:30:28.016Z (8 months ago)
- Language: JavaScript
- Size: 18.6 KB
- Stars: 158
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-redux - redux-modifiers - Collection of generic functions for writing Redux reducers to operate on various data structures. (Utilities)
README
# Write better Redux code faster v0.0.5
Big changes from 0.0.4! API has been completely rewritten on top of [ImmutableJS](http://facebook.github.io/immutable-js).
A collection of generic functions on top of [ImmutableJS](http://facebook.github.io/immutable-js) and [Redux Actions](https://github.com/acdlite/redux-actions) for simplifying your reducers. Declare your reducers and state as plain old javascript objects, but take advantage of `Immutable` guarantees and data structure traversal utilities.
Example reducer:
```js
import { reducer, push, updateIn, removeIn } from 'redux-modifiers'
const reducer = reducer({
'ADD_ITEM_TO_LIST': push,
'UPDATE': updateIn,
'ADD_NESTED_ITEM': (state, action)=>{
let { selected, value } = action.payload; //Index of nested item (could be deeply nested, i.e. [0, 'key', 1])
return state.updateIn(selected, item => item.push(value) ); //Using ImmutableJS API
},
'REMOVE': removeIn
}, []);
```
You can call `toJS` on any structure you get out of the reducer to convert it back to vanilla js, i.e. in a react component where you want to use spread operators, normal object accessors, etc. Anything you put in the reducer will automatically be converted to an ImmutableJS structure, which means you can do things like adding items to state from plain javascript objects without worrying about references sticking around.
## Notes
### FSA
`redux-modifiers` does expect that actions are dispatched as [Flux Standard Actions](https://github.com/acdlite/flux-standard-action). Essentially, this means every action looks like:
```js
{
type: YOUR_ACTION_TYPE,
payload: YOUR_PAYLOAD
}
```
### State and ImmutableJS
`state` is converted to an `Immutable` data structure, so you are free to use any `ImmutableJS` function you like on state. If you find you perform a particular option frequently, consider submitting a *pull request* and adding it to `redux-modifiers`!
# Targeting specific parts of state
Use `updateIn`, to target specific parts of state, passing the update function the path that you want to update. Example state:
```js
{
foo: [
{
id: 1,
name: 'Calvin'
}
]
}
```
Example reducer function:
```js
'UPDATE': updateIn
```
Example dispatch:
```js
dispatch({selected: ['foo', 'name'], value: 'Calvin Froedge'});
```
# API
### push(state, action)
Payload can take any value, but you must call `push` on an array (`List` in ImmutableJS).
```js
'ADD': push
```
### updateIn(state, action)
Payload must include a selection path `selected` and a `value` or `fn`. State (or targeted key) will be replaced with value if `value`, or `fn` will be applied to the existing value.
Example payload:
```
{selected: [0, 'nested_array', 1], fn: value => value * 2}
```
### removeIn(state, action)
Payload must include a selection path. Example payload:
```
[0, 'nested_array', 1]
```