npm package: @minsize/state
Description: SolidJs state and cache
Author: Egor Kytyukov
Latest version: 0.0.1

## State
[![npm version](https://img.shields.io/npm/v/@minsize/state)](https://www.npmjs.com/package/@minsize/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:

```jsx

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.

```jsx
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.

```jsx
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`](https://docs.solidjs.com/reference/store-utilities/create-store#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.

```jsx
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.

```jsx
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>
}
```