Jotaiのatom

from Jotai

docs

4パターンある ref

第1引数はvalueかread用の関数

第2引数はwrite用の関数

型が厳密になっている

例えば、readonlyのものはuseAtomを使ってもsetできないようになっている

primitive atom

初期値のみ取る

read/write可能

code:使用例.ts

const priceAtom = atom(10)

code:ts

function atom<Value>(

initialValue: Value

): PrimitiveAtom<Value> & WithInitialValue<Value>

read-only derived atom

read-only

第1引数のgetを使ってderivedする

code:使用例.ts

const readOnlyAtom = atom((get) => get(priceAtom) * 2)

code:ts

function atom<Value>(read: Read<Value>): Atom<Value>

Recoilのselectorと同等

write-only derived atom

第1引数にはnullを渡す

何らかのatomに対する処理を定義したいときに使う感じかなあmrsekut.icon

これは「atom」という感じではなく、「operator」って感じ

code:使用例.ts

const writeOnlyAtom = atom(

null,

(get, set, update) => {

set(priceAtom, get(priceAtom) - update.discount)

}

)

// in component

function ProductComponent() {

const price, setPrice = useAtom(priceAtom);

const applyDiscount = useAtom(applyDiscountAtom);

const handleDiscount = () => {

applyDiscount(10); // $10の割引を適用

};

...

code:ts

function atom<Value, Args extends unknown[], Result>(

initialValue: Value,

write: Write<Args, Result>

): WritableAtom<Value, Args, Result> & WithInitialValue<Value>

writable derived atom

code:使用例.ts

const readWriteAtom = atom(

(get) => get(priceAtom) * 2,

(get, set, newPrice) => {

set(priceAtom, newPrice / 2)

// you can set as many atoms as you want at the same time

}

)

write側の関数は、read側のロジックと整合性を取るように書かないとおかしくなるってことかなmrsekut.icon

code:ts

// writable derived atom

function atom<Value, Args extends unknown[], Result>(

read: Read<Value, SetAtom<Args, Result>>,

write: Write<Args, Result>

): WritableAtom<Value, Args, Result>