Quick Tutorial
You can skip this part if you've already read the Github README.
xoid has only one export: create
. Create is also exported as the default export.
import { create } from 'xoid'
import create from 'xoid'
Atom
Atoms are holders of state.
Atoms can have actions if the second argument is used.
There's the .focus
method, which can be used as a selector/lens. xoid is based on immutable updates, so if you "surgically" set state of a focused branch, changes will propagate to the root.
Derived state
Atoms can be derived from other atoms. This API was heavily inspired by Recoil.
Alternatively, .map
method can be used to quickly derive the state from a single atom.
Subscriptions
For subscriptions, subscribe
and watch
are used. They are the same, except watch
runs the callback immediately, while subscribe
waits for the first update after subscription.
To cleanup side-effects, a function can be returned in the subscriber function. (Just like
React.useEffect
)
React integration
@xoid/react is based on two hooks. useAtom
subscribes the component to an atom. If a second argument is supplied, it'll be used as a selector function.
The other hook is useSetup
. It can be used for creating local component state. It's similar to React.useMemo
with empty dependencies array. It'll run its callback only once.
useSetup
is guaranteed to be non-render-causing. Atoms returned by that should be explicitly subscribed viauseAtom
hook.
An outer value can be supplied as the second argument. It'll turn into a reactive atom.
In the following sections, you'll find more detailed explanation of the API.