Published
Edited
Oct 29, 2020
Importers
React.render(htm`
<${storeon.StoreContext.Provider} value=${store}>
<${Counter} />
</>
`)
changedStoreState = Generators.observe(next => {
next(store.get())
const unbindEventListerner = store.on("@changed", state => { next(state) })
return () => {
unbindEventListerner()
}
})
store = storeon.createStoreon([
counterModule,
//localStorageModule,
reduxDevtoolsModule,
])
counterModule = store => {
// Initial state.
store.on("@init", () => ({ count: 5, text: "hello" }))
// Reducers returns only changed part of the state.
store.on("more", ({ count, text }, char = "o") => ({
count: count + 1,
text: text + char,
}))
store.on("less", ({ count, text }) => ({
count: Math.max(count - 1, 0),
text: text.slice(0, count - 1),
}))
}
localStorageModule = storeon.persistState(["count", "text"], {
key: "storeon",
storage: window.localStorage,
})
// https://github.com/zalmoxisus/redux-devtools-extension/blob/v2.15.0/docs/API/Arguments.md
reduxDevtoolsModule = storeon.storeonDevtools({
name: "storeon",
})
Counter = () => {
// Counter will be re-render only on `state.count` and `state.text` changes.
const { dispatch, count, text } = storeon.useStoreon("count", "text")
return htm`
<${Button} onClick=${() => dispatch("less")}>less</>
<${Button} onClick=${() => dispatch("more", "o")}>more</>
<${Text}>count: ${count}</>
<${Text}>text: ${text}</>
`
}
Button = styled.button`
font-size: 15px;
`
Text = styled.span`
font-size: 15px;
padding-left: 15px;
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
