👋
Jotaiを使ってみた
はじめに
今回のコードはこちら↓
開発環境
"jotai": "^2.7.1"
Jotai とは？
最小コア API (2kb)
多くのユーティリティと拡張機能
TypeScript 指向
Next.js、Gatsby、Remix、Waku、および React Native で動作します
Jotai の導入
よくカウンターの事例が紹介されているので、今回は form を例に使ってみる。
公式を参考に進める。
- Jotai をインストール
- フォームを作成する
- Jotai の構築
Jotai をインストール
npm i jotai
フォームを作成する
フォームの作成は下記記事で紹介しているので、よければ参考までに！
Jotai の構築
import { atom } from 'jotai'
import { Schema } from '../schema';
export const submitDataAtom = atom<Schema[] | null>(null);
Provider とかはないので、これで store の構築は完成！簡単！
個人的には、直接 store をいじるのは好きでないなと思ったので Reducer 的なものを作成する。
送信の関数に追加する。
const [, setData] = useAtom(updateSubmitDataAtom);
const onSubmit: SubmitHandler<Schema> = (data) => {
setData(data);
reset()
}
更新したデータを表示する。
import { useAtom } from 'jotai'
・・・
const FormData = () => {
const [data] = useAtom(getSubmitDataAtom);
if (data && data.length < 1) return undefined;
return (
<Box>
{data?.map(el => (
<Box>
<Box>text:{el.text}</Box>
<Box>number:{el.number}</Box>
<Box>select:{el.select}</Box>
<Box>checkbox:{el.checkbox}</Box>
<Box>checkboxes:{el.checkboxes}</Box>
<Box>radio:{el.radio}</Box>
<Box>date:{el.date}</Box>
<Box>textarea:{el.textarea}</Box>
</Box>
))}
</Box>
)
}
function MuiRhfWithControllerAndZod() {
・・・
return (
<Container maxWidth="sm" sx={{ pt: 5 }}>
・・・
<FormData />
</Container>
)
}
export default MuiRhfWithControllerAndZod
以上！
Discussion