45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
const choo = require('../../')
|
|
const html = require('../../html')
|
|
const plur = require('plur')
|
|
|
|
const app = choo()
|
|
app.model({
|
|
state: {
|
|
counter: 0
|
|
},
|
|
reducers: {
|
|
increment: (data, state) => ({ counter: state.counter + 1 }),
|
|
decrement: (data, state) => ({ counter: state.counter - 1 })
|
|
},
|
|
effects: {
|
|
incrementAsync: function (data, state, send, done) {
|
|
setTimeout(() => send('increment', done), 1000)
|
|
},
|
|
decrementAsync: function (data, state, send, done) {
|
|
setTimeout(() => send('decrement', done), 1000)
|
|
}
|
|
}
|
|
})
|
|
|
|
const mainView = (state, prev, send) => {
|
|
const count = state.counter
|
|
|
|
return html`
|
|
<main class="app">
|
|
<h1>Async counter</h1>
|
|
<p>Clicked ${count} ${plur('time', count)}!</p>
|
|
<button onclick=${() => send('increment')}>Increment</button>
|
|
<button onclick=${() => send('decrement')}>Decrement</button>
|
|
<button onclick=${() => send('incrementAsync')}>Increment async</button>
|
|
<button onclick=${() => send('decrementAsync')}>Decrement async</button>
|
|
</main>
|
|
`
|
|
}
|
|
|
|
app.router((route) => [
|
|
route('/', mainView)
|
|
])
|
|
|
|
const tree = app.start()
|
|
document.body.appendChild(tree)
|