atom
import { atom } from '@zedux/react'
Where it all starts. atom()
is a factory for creating atom templates. These templates are actually instances of the AtomTemplate class. Atom templates are passed to many of Zedux's hooks and injectors. They tell Zedux how to create their atoms.
Example
- Simplified
- TypeScript
atom = (key, valueOrFactory, config?) => newAtom
declare const atom: {
// Query Atoms
<
State = any,
Params extends any[] = [],
Exports extends Record<string, any> = Record<string, never>
>(
key: string,
value: (...params: Params) => AtomApi<{
Exports: Exports
Promise: any
State: Promise<State>
Store: undefined
}>,
config?: AtomConfig<State>
): AtomTemplate<{
State: PromiseState<State>
Params: Params
Exports: Exports
Store: Store<PromiseState<State>>
Promise: Promise<State>
}>
// Custom Stores
<
StoreType extends Store<any> = Store<any>,
Params extends any[] = [],
Exports extends Record<string, any> = Record<string, never>,
PromiseType extends AtomApiPromise = undefined
>(
key: string,
value: (...params: Params) =>
| StoreType
| AtomApi<{
Exports: Exports
Promise: PromiseType
State: StoreStateType<Store>
Store: StoreType
}>,
config?: AtomConfig<StoreStateType<StoreType>>
): AtomTemplate<{
State: StoreStateType<StoreType>
Params: Params
Exports: Exports
Store: StoreType
Promise: PromiseType
}>
// Catch-all
<
State = any,
Params extends any[] = [],
Exports extends Record<string, any> = Record<string, never>,
StoreType extends Store<State> = Store<State>,
PromiseType extends AtomApiPromise = undefined
>(
key: string,
value: AtomValueOrFactory<{
Exports: Exports
Params: Params
Promise: PromiseType
State: State
Store: StoreType
}>,
config?: AtomConfig<State>
): AtomTemplate<{
Exports: Exports
Params: Params
Promise: PromiseType
State: State
Store: StoreType
}>
}
Required. A string.
This key must be unique except when creating atom overrides.
It is possible for plugins to hook into the instanceReused
mod and check for potentially problematic duplicate keys. Though HMR makes that difficult.
Required. Can be any of the following:
- A raw value. When the atom is instantiated, Zedux will create a new store with this value as its initial state.
- A Zedux store. This will be the store of this atom's instance - "instance" singular because such an atom will naturally be a singleton (meaning it doesn't take params, since a state factory function wasn't passed).
- A state factory function that returns a raw value. Zedux will create a new store with the returned value as its initial state.
- A state factory function that returns a Zedux store. The returned store will be the instance's
.store
. A state factory function that returns an AtomApi instance.
The Atom API's value can be any of the following:
- A raw value. Zedux will create a new store with this value as its initial state.
- A Zedux store. This will be the instance's
.store
. - A promise. This will turn the atom into a query atom.
The Atom API's exports will be set as the atom instance's
.exports
.The Atom API's promise will be set as the atom instance's
.promise
.
Optional. An AtomConfig object.
An atom template. This template is actually an instance of the AtomTemplate class.
Zedux will manage creating and maintaining instances of the atom template as you use it.