hyperapp-dot-notation-reducer
v0.0.3
Published
Hyperapp mixin to use dot.notations return objects in actions.
Downloads
9
Maintainers
Readme
Dot.notation reducer mixin
This mixin allows Hyperapp-actions to return an object with a path as property: { '...deep.path': { deep: 'variable' } }
.
The mixin is uses update
event to modify the newState
.
Make sure you include this as the first mixin, as other mixins might want to use the 'normalized' state.
An example can be found here: https://codepen.io/alber70g/pen/dzKvYB?editors=0010
Installation
You can import the mixin and use it in the app like so:
import { DotNotationReducer } from 'hyperapp-dot-notation-reducer';
// umd
// const { DotNotationReducer } = hyperappDotNotationReducer;
// pre es6
// var DotNotationReducer = hyperappDotNotationReducer.DotNotationReducer;
app({
state: { something: { counter: 0 } },
view: (state, actions) =>
<main>
{state.something.counter}
<button onclick={actions.up}>up</button>
</main>,
actions: {
up: (state, actions) =>
({ 'something.counter': state.something.counter + 1 })
}
mixins: [DotNotationReducer],
events: {}
})
Usage
Setting a deep property
actions: {
setName: (state, actions, value) =>
({ 'login.name': value })
}
{ "login": { "name": "value" } }
Deep object with spread
Set an the properties of a deep path, while retaining the other properties. This means that you can send an object, and it's properties will be set instead of the new object replaces the existing one
actions: {
setName: (state, actions, { name, email }) =>
({ '...login': { name, email })
}
before
{ "login": { "prop": "value" } }
after
{ "login": { "prop": "value", "name": "name", "email": "email" } }
Replacing the state
Since you cannot replace the full state in Hyperapp (it's always a merge of existing properties overwriting the new ones in the root of the state),
you can now do so using the spread ...
operator without a property.
actions: {
setState: (state, actions, newState) =>
({ '...': { prop: 'value' } })
}
before
{ "login": { "prop": "value" } }
after
{ "prop": "value" }
Author notes
This is my first official contribution to anything public. Any comments are welcome.
Further improvements:
- array index manipulation through path
{ 'app.counters[0].value': 10 }