StoreonDemo.js

import React from "react"
import createStore from "storeon"
import useStoreon from "storeon/react"
import StoreContext from "storeon/react/context"
import produce from "immer"
import { Pane, Button } from "fannypack"

export default () => {
  return (
    <StoreContext.Provider value={store}>
      <Count />
    </StoreContext.Provider>
  )
}

export const increment = store => {
  store.on("@init", () => {
    return { count: 0 }
  })

  store.on(
    "increment",
    produce(state => {
      state.count += 1
    })
  )
}

export const store = createStore([
  increment,
  process.env.NODE_ENV !== "production" && require("storeon/devtools"),
  process.env.NODE_ENV !== "production" && require("storeon/devtools/logger"),
])

export const Count = () => {
  const { dispatch, count } = useStoreon("count")
  return (
    <Pane margin="10px" padding="10px" border>
      <Button onClick={() => dispatch("increment")}>count = {count}</Button>
    </Pane>
  )
}