Define a state store with "define"

[hairyf]

I really enjoy the reactivity of Valtio—it feels incredibly smooth and completely free from the constraints imposed by React. At the same time, I also like Pinia's factory pattern of defining a state through "define." I’d like to share a tool I made for this: https://github.com/hairyf/valtio-define. Hmm, I hope like it, and I’d also love to hear more opinions.

import { defineStore, useStore } from 'valtio-define'

const store = defineStore({
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    },
  },
})

function Counter() {
  const { count } = useStore(store)
  return (
    <div>
      <button onClick={store.increment}>Increment</button>
      <div>{count}</div>
    </div>
  )
}

[overthemike]

This looks pretty similar to what I'm attempting to do with valtio-plugin I think. I'll take a close look at it and maybe we can exchange some ideas.

[hairyf]

Thanks for the reply! I care deeply about the quality, stability, and type safety of valtio-define, as well as the overall DX. I'm constantly updating it, So feel free to share any ideas! 😊