👋

Jotaiを使ってみた

2024/03/23に公開

jotai

tech

はじめに

今回のコードはこちら↓

開発環境

"jotai": "^2.7.1"

Jotai とは？

最小コア API (2kb)
多くのユーティリティと拡張機能
TypeScript 指向
Next.js、Gatsby、Remix、Waku、および React Native で動作します

https://jotai.org/docs/introduction

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

以上！

はじめに

開発環境

Jotai とは？

Jotai の導入

Jotai をインストール

フォームを作成する

Jotai の構築

Discussion