solidjs's Introduction

Storeon Solid.js

Solid.js a declarative, efficient, and flexible JavaScript library for building user interfaces. @storeon/solidjs package helps to connect store with Solid.js to provide a better performance and developer experience while remaining so tiny.

Size. 172 bytes (+ Storeon itself) instead of ~3kB of Redux (minified and gzipped).
Ecosystem. Many additional tools can be combined with a store.
Speed. It tracks what parts of state were changed and re-renders only components based on the changes.

Install

npm install -S @storeon/solidjs

yarn add @storeon/solidjs

How to use

Create store using storeon module:

`store.js`

import { createStoreon } from 'storeon'

let counter = store => {
  store.on('@init', () => ({ count: 0 }))
  store.on('inc', ({ count }) => ({ count: count + 1 }))
}

export const store = createStoreon([counter])

`main.js`

Provide store using StoreonProvider from @storeon/solidjs:

import { render } from 'solid-js/dom'
import { StoreonProvider } from '@storeon/solidjs'
import { store } from './store'

render(
  <StoreonProvider store={store}>
    <App />
  </StoreonProvider>,
  document.body
)

Import useStoreon decorator from @storeon/solidjs:

`Counter.jsx`

import { useStoreon } from '@storeon/solidjs'

export default function Counter() {
  const [state, dispatch] = useStoreon()

  return (
    <div>
      {state.count}
      <button onClick={() => dispatch('inc')}>inc</button>
    </div>
  )
}

Using with TypeScript

`Counter.tsx`

import { useStoreon } from '@storeon/solidjs'
import { State, Events } from './store'

export default function Counter() {
  const [state, dispatch] = useStoreon<State, Events>()

  return (
    <div>
      {state.count}
      <button onClick={() => dispatch('inc')}>inc</button>
    </div>
  )
}

Recommend Projects