ライブラリ
- react@18.2.0
- next@14.0.3
- @mui/material@5.14.12
- jotai@2.4.3
CreateStoreを使う
JotaiのStoreの説明はこちら。
https://jotai.org/docs/core/store
appRouterを使ってるので、Provider用にコンポーネントを切り分けます。
@/components/Atom/Provider.tsxを作成します。
'use client'
import { Provider as JotaiProvider, createStore } from 'jotai';
import { ReactNode } from 'react';
type Props = {
children: ReactNode
}
export const store = createStore()
export default function Provider ({ children }: Props) {
return <JotaiProvider store={store}>{children}</JotaiProvider>
}layout.tsxに適用します。これで、storeを使ってアプリ内のどこからでもアクセスできるようになる。
<html lang="ja">
<body>
<Provider>
{children}
</Provider>
</body>
</html>コンポーネント外からアクセス
あとは、公式ドキュメントにあった通りget set sub 関数を使って取得したり更新したり…。
import { store } from '@/components/Atom/Provider'
store.get(somethingAtom)
store.set(somethingAtom, value)
store.sub(somethingAtom, () => {console.log(store.get(somethingAtom))})