create

import { create } from 'xoid'

create is used to create atoms. Atoms are standalone setter/getter objects that hold state.

import { create } from 'xoid'
const atom = create(3)
atom() // 3 (get the value)
atom(5) // void (set the value to 5)
atom(state => state + 1) // void (also set the value)
atom() // 6

Atoms can have actions, and with use function they can be used.

import { create, use } from 'xoid'
const numberAtom = create(5, (atom) => ({
increment: () => atom(s => s + 1),
decrement: () => atom(s => s - 1)
}))
use(numberAtom).increment()

Derived state

By providing a function as the first argument, a derived atom can be created.

import { alpha, beta } from './some-file'
const sum = create((get) => get(alpha) + get(beta));

Deriving state from other sources (Advanced)

With an additional feature of get function above, you can get the state from non-atoms. This can be a Redux store, an RxJS observable, or anything that implements getState & subscribe pair. Here is an atom that derives its state from a Redux store.

import store from './reduxStore'
const derivedAtom = create((get) => get(store.getState, store.subscribe))

Grabbing refs

With no arguments used, create function can be used to grab refs.

const $ref = create<HTMLElement>() // Atom<HTMLElement | undefined>
$ref(document.body)

Enhanced atoms (Advanced)

An enhanced atom is an atom with different "setter" behavior. Optional third argument of create is called an enhancer. It's used for returning a function to be used instead of the default setter function. Most people using xoid will not need to write enhancers.

Following is a simple "logger middleware" created with xoid:

import store from './reduxStore'
const enhancedAtom = create(
5,
null,
(defaultSetter) =>
(state) => {
console.log('state before:', atom())
defaultSetter(state)
console.log('state after:', atom())
}
)
Last updated on