Recoilの使い方

React

2022.10.05 2022.09.26

Recoil最低限 Next編（2021年9月） - Qiita

NextでRecoilおよびPersist使ってみる。Create-React-App編はこちらをどうぞ。やりたいこと・作るものページを移動しても値が維持（共有）され、ページをリロードしても値…

まずはインストール
statesディレクトリを作成し、stateを定義
使いたい場所をRecoilRootで囲む
RecoilのStateを使う

まずはインストール

npm i recoil @types/recoil

statesディレクトリを作成し、stateを定義

import { atom } from 'recoil'

export const inputTaskState = atom<string>({
  key: 'inputTaskState', //一意の値
  default: '', //初期値
})

使いたい場所をRecoilRootで囲む

import React from 'react'
import { RecoilRoot } from 'recoil'
import styled from '@emotion/styled'
import InputArea from '../molucules/InputArea'
import Tasks from '../molucules/Tasks'

const TodoList: React.FC = () => {
  return (
    <RecoilRoot>
      <Sdiv >
        <InputArea />
        <Tasks />
      </Sdiv>
    </RecoilRoot>
  )
}

export default TodoList

RecoilのStateを使う

useRecoilValueで「値」のみ取得

import { useRecoilValue } from 'recoil'
import { inputTaskTextState } from '../../states/inpuTaskState'

const inputTaskText = useRecoilValue<string>(inputTaskTextState)

useRecoilStateで「値」と「更新関数」を取得

import { useRecoilState } from 'recoil'
import { inputTaskTextState } from '../../states/inpuTaskState'

const [inputTaskText, setInputTaskText] = useRecoilState<string>(inputTaskTextState)

useSetRecoilStateで「更新関数」のみ取得

import { useSetRecoilState } from 'recoil'
import { inputTaskTextState } from '../../states/inpuTaskState'

const setInputTaskText = useSetRecoilState<string>(inputTaskTextState)