useStore

It uses useState under the hood and can be considered just a small abstraction layer over basic hooks.

It accepts the same options and returns the same interface.

Options

Argument	Type	Description
model	any?	The default model reflecting the initial state shape
actions	Object?	A map of actions where the key represents the action name and the value represents the action reducer
effects	Object?	A map of effects where the key represents the effect name and the value represents the updater

Returns

(Object) an object containing the state, actions and effects to be used inside a React component.

Example

import { useStore } from 'alveron'

function getStore() {
  const model = 0

  const actions = {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  }

  const effects = {
    incrementWithDelay: (actions) => setTimeout(actions.increment, 1000),
  }

  return {
    model,
    actions,
    effects,
  }
}

function Counter() {
  const { state, actions, effects } = useStore(getStore())

  return (
    <div>
      <div>{state}</div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={effects.incrementWithDelay}>+ in 1s</button>
    </div>
  )
}