Design actions by restricting authority.
yarn add orph
import React, { Component } from 'react'
import Orph from 'orph'
const store = new Orph({ count: 0 })
store.register({
UP: (e, { state, render }) =>
state('count')
.then(count => count + 1)
.then(count => render({ count })),
DOWN: (e, { state, render }) =>
state('count')
.then(count => count - 1)
.then(count => render({ count })),
},{
prefix: 'RENDER:',
use: { state: true, render: true }
})
const listeners = store.order()
class App extends Component {
constructor(props) {
super(props)
store.attach(this, { inherit: true })
}
componentWillUnmount() {
store.detach()
}
render() {
return (
<main>
<h1>{this.state.count}</h1>
<button onClick={listeners['RENDER:UP']}>+</button>
<button onClick={listeners['RENDER:DOWN']}>-</button>
</main>
)
}
}
initialState
is set to react when attached and will be never changed.
use
required to restrict authority of use.
prefix
string added to name head.
{
FOO: (data, { render }) => console.log(render) // undefined
},{
use: {
dispatch: true
}
}
return object contain listener format function.
store.register({
FOO: (data, { render }) => {}
},{
use: { render: true }
})
const listeners = store.order()
// listeners['FOO']: (e) => store.dispatch('FOO', e)
used in constructor
.
inherit
: boolean setpreState
toreact.state
.
used in componentWillUnmount
. Extract instance state as preState
.
same as below.
util for debug.
cloned by default.
if reference
is true
, not be cloned that is passed directly.
pass arg to setState
.
pass arg to forceUpdate
the result is passed by then
.
{
THOUSAND_TIMES: ({ count }, { dispatch }) => count * 1000,
BUTTON_CLICK: (n, { props, dispatch }) =>
dispatch('UTIL:THOUSAND_TIMES', { count: props('count') })
.then((multiplied) => dispatch('RENDER:COUNT', multiplied))
},{
prefix: 'UTIL:',
use: { dispatch: true, props: true }
}
All functions registerd can be connected by dispatch
.
Use
process will be canceled if run after orph.detach
.
state('key')
.then(value => console.log(value))
.catch(err => console.log(err)) // { isDetached: true }