Makes state dead simple ;)
$ yarn add reim react-reim
"Hook" (React 16.7.0-alpha2+)
import React from 'react'
import reim from 'reim'
import {useReim} from 'react-reim'
function Counter() {
const [count, {increment}] = useReim(10, {
increment: () => state => state++,
decrement: () => state => state--
})
return (
<div>
<button onClick={increment}>+</button>
<div id="count">{count}</div>
</div>
)
}
import React from 'react'
import reim from 'reim'
import {State} from 'react-reim'
const Toggle = () => (
<State
initial={false}
actions={{toggle: () => state => !state}}
onChange={console.log}
>
{(visible, {toggle}) => (
<button onClick={toggle}>{visible}</button>
)}
</State>
)
import React from 'react'
import reim from 'reim'
import {withReim} from 'react-reim'
// create a store
const counter = reim({count: 10})
// create a presentational component
const Counter = ({visible, increment, decrement}) => (
<div>
<button onClick={decrement}>-</button>
<div>{value}</div>
<button onClick={increment}>+</button>
</div>
)
// create a container component
const ConnectedCounter = witReim(
store
/* Filter */({first, last}) => ({full: `${first} ${last}`}),
/* Actions */ {increment: amount => state => void (state.count += amount)}
)(Counter)
export default ConnectedCounter