JotaiJotai

状態
Primitive and flexible state management for React

Using store outside React

Jotai's state resides in React, but sometimes it would be nice to interact with the world outside React.

createStore

createStore provides a store interface that can be used to store your atoms. Using the store, you can access and mutate the state of your stored atoms from outside React.

import { atom, useAtomValue, createStore, Provider } from 'jotai'
const timeAtom = atom(0)
const store = createStore()
store.set(timeAtom, (prev) => prev + 1) // Update atom's value
store.get(timeAtom) // Read atom's value
function Component() {
const time = useAtomValue(timeAtom) // Inside React
return (
<div className="App">
<h1>{time}</h1>
</div>
)
}
export default function App() {
return (
<Provider store={store}>
<Component />
</Provider>
)
}

Examples