【React, Next.js】Recoilで複数のStateを管理する

はじめに

Recoilとは、Stateをグローバルに管理することが出来る状態管理ライブラリです。
Recoilで複数のStateを管理する際の記述があまり載っていなかったのでここでメモ程度に記載しておきます。

※Recoilのインストール、初期設定は公式リファレンスに記載されてあるため割愛します。

Recoilで複数のStateを管理

今回管理するStateは以下の型になっています。

type.ts

interface TodoProps {
    title: string;
    description: string;
    is_completed: boolean;
}

まずは、atomを定義していきます。defaultはお好きなように変更してください。

atom.ts

import { atom } from 'recoil'

interface TodoProps {
    title: string;
    description: string;
    is_completed: boolean;
}

export const TodoState = atom<TodoProps>({
    key: 'TodoState',
    default: {
        title: 'hoge',
        description: 'fuga',
        is_completed: false,
    },
})

次に、実際にStateを扱うコンポーネントでimportし、値を入れます。

Todo.tsx

'use client'

import { useRecoilState } from 'recoil'
import { TodoState } from './TodoState'

export const Todo = () => {
    const [todo, setTodo] = useRecoilState(TodoState)
    const handleTodoState = () => {
        setUser((currentTodo) => ({
            ...currentTodo,
            ...{
                title: "hogehoge",
                description: "hugahuga",
                is_completed: true,
            },
        }))
    }
    return (
        <>
            <button onClick={handleTodoState}>更新</button>
            <p>{todo.title}</p>
            <p>{todo.description}</p>
            <p>{todo.is_completed}</p>
        </>
    )
}

これで、buttonを押下するとTodoStateが更新され表示が変わるようになります。