Hyperapp mixin to use dot.notations return objects in actions.
npm install hyperapp-dot-notation-reducerDot.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:
``javascript
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) =>
{state.something.counter}
actions: {
up: (state, actions) =>
({ 'something.counter': state.something.counter + 1 })
}
mixins: [DotNotationReducer],
events: {}
})
`
Usage
-----
`javascript`
actions: {
setName: (state, actions, value) =>
({ 'login.name': value })
}`json`
{ "login": { "name": "value" } }
`javascript`
actions: {
setName: (state, actions, { name, email }) =>
({ '...login': { name, email })
}
before
`json`
{ "login": { "prop": "value" } }
after
`json`
{ "login": { "prop": "value", "name": "name", "email": "email" } }
operator without a property.`javascript
actions: {
setState: (state, actions, newState) =>
({ '...': { prop: 'value' } })
}
`before
`json
{ "login": { "prop": "value" } }
`after
`json
{ "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 } `