Getting Started

Install the package

npm install saphyra

Create a store definition

The newStoreDef function returns a store factory.

import { newStoreDef } from "saphyra"
 
const newCountStore = newStoreDef()

Instantiation

Define your store's lifecycle.

import { useNewStore } from "saphyra/react"
 
function App() {
  const [countStore, resetStore, isLoading] = useNewStore(
    () => newCountStore({})
  )
}

Reading state

A Saphyra store is a plain JavaScript object instance. To integrate it with the React lifecycle, you need to use hooks to translate the store state into React state.

Saphyra provides a helper called createStoreUtils, which generates many useful hooks and utilities to make this integration a breeze.

import { newStoreDef } from "saphyra"
import { useNewStore, createStoreUtils } from "saphyra/react"
 
const newCountStore = newStoreDef()
const CountStore = createStoreUtils()
 
function App() {
  const [countStore, resetStore, isLoading] = useNewStore(
    () => newCountStore({ count: 0 })
  )
  const count = CountStore.useSelector(s => s.count, countStore) 
 
  return <span>{count}</span>
}

Writting state

Use setState for non-critical updates, such as UI state changes from color pickers, control form inputs, etc.

import { newStoreDef } from "saphyra"
import { useNewStore, createStoreUtils } from "saphyra/react"
 
const newCountStore = newStoreDef()
const CountStore = createStoreUtils()
 
function App() {
  const [countStore, resetStore, isLoading] = useNewStore(
    () => newCountStore({ count: 0 })
  )
  const count = CountStore.useSelector(s => s.count, countStore)
 
  return (
    <div>
      <span>{count}</span>
      <button 
        onClick={() => {
          countStore.setState({ count: 10 }) 
        }}
      >
        Set to 10
      </button>
    </div>
  )
}

Providing with Context

The CountStore module exposes a Context component that you can use to provide the store state to children. It also provides a hook called useStore to consume the context.

import { newStoreDef } from "saphyra"
import { useNewStore, createStoreUtils } from "saphyra/react"
 
const newCountStore = newStoreDef()
const CountStore = createStoreUtils()
 
function CountProvider({ initialCount, children }) {
  const [countStore, resetStore, isLoading] = useNewStore(
    () => newCountStore({ count: initialCount })
  )
 
  return (
    <CountStore.Context.Provider value={[countStore, resetStore, isLoading]}>
      {children}
    </CountStore.Context.Provider>
  )
}
 
function Children() {
  const [countStore] = CountStore.useStore()
  const count = CountStore.useSelector(s => s.count)
  const setToTen = () => countStore.setState({ count: 10 })
 
  return (
    <div>
      <span>{count}</span>
      <button onClick={setToTen}>Set to 10</button>
    </div>
  )
}
 
function App() {
  return (
    <CountProvider initialCount={0}>
      <Children />
    </CountProvider>
  )
}

We're all set up

That's pretty much it. Every feature you want to add to your app should look like this at first.

These are the basic concepts. Now, let's explore what makes Saphyra unique and powerful.