State

npm i @minsize/state

yarn add @minsize/state

Getting Started

Atom

An atom represents a piece of state. Atoms can be read from and written to from any component. Components that read the value of an atom are implicitly subscribed to that atom, so any atom updates will result in a re-render of all components subscribed to that atom:

import { atom } from "@minsize/state";

const EXAMPLE_ATOM = atom<{ name: string }, { userId: number }>({
  default: { name: "NAME" }, // default value
  onRequested: (options, key) => {
    console.log(options.userId, key)
  },
  onUpdate: ({ prev, next }, key) => {
    console.log({ prev, next }, key)
  },
})

setter

This is the function that updates the atom, initializes the render of components subscribed to the mutable state. Does not require use in functional components.

import { produce } from "solid-js/store"
import { setter, useAtom } from "@minsize/state"

const COUNT = atom({
  default: {
    user: {
      first_name: "NAME",
    },
  },
})

const App = () => {
  const [state, setState] = useAtom(COUNT)

  const handleClick = () => {
    setter(
      COUNT,
      "user",
      produce((user) => {
        user.first_name = "NAME2"
        return user
      }),
    )
    // OR
    setter(COUNT, "user", "first_name", "NAME2")
  }

  return <div onClick={handleClick}>{state.user.first_name}</div>
}

getter

This is a function that receives the value of an atom. Does not require use in functional components.

import { getter, useAtom } from "@minsize/state"

const COUNT = atom({ default: 0 })

const App = () => {
  const [state, setState] = useAtom(COUNT)
  const handleClick = () => {
    const count = getter(COUNT)
    console.log(count)
  }
  return <div onClick={handleClick}>{state}</div>
}

globalSignal

This API is similar to the SolidJS createStore hook except it takes a Global State state instead of a default value as an argument. It returns a tuple of the current value of the state and a setter function. The setter function may either take a new value as an argument or an updater function which receives the previous value as a parameter.

import { useAtom } from "@minsize/state";

const EXAMPLE_ATOM = atom({ default: "" });

const App = () => {
  const [state, setState] = globalSignal(EXAMPLE_ATOM);
  return <div>{state}</div>;
};

Caching

Atoms can be cached by providing an options object to useAtom, setter and getter. This allows you to manage multiple instances of the same atom with different configurations.

import { atom, useAtom } from "@minsize/state"

const USER = atom<{ name: string }, { userId: number }>({
  default: { name: "NAME" }, // default value
  onRequested: async (options, key) => {
    console.log(options.userId, key)

    const data = await getUser()

    setter([USER, key], "name", data.name)
    // or
    setter([USER, key], data)
  },
  onUpdate: ({ prev, next }, key) => {
    console.log({ prev, next }, key)
  },
})

// Using useAtom with caching
const App = () => {
  const [state, setState] = useAtom(USER, { userId: 1 }, { key: "userId_1" })

  return <div>{state.user.first_name}</div>
}