Best way of using firebase with jotai? #754
Replies: 1 comment 2 replies
-
Let me drop some examples in general and hope you can get some ideas. useEffect with useAtom is fairly goodI would still say it's one of jotai practices. If you have useState+useEffect code like this: const Component = () => {
const [data, setData] = useState({})
useEffect(() => {
const callback = (nextData) => setData(nextData)
const unsubscribe = subscribe(store, callback)
return unsubscribe
}, [])
return <>...</>
} You can simply replace useState with useAtom: const dataAtom = atom({})
const Component = () => {
const [data, setData] = useAtom(dataAtom)
useEffect(() => {
const callback = (nextData) => setData(nextData)
const unsubscribe = subscribe(store, callback)
return unsubscribe
}, [])
return <>...</>
} onMount replaces useEffect(..., [])Compared to useEffect, const dataAtom = atom({})
dataAtom.onMount = (setAtom) => {
const callback = (nextData) => setData(nextData)
const unsubscribe = subscribe(store, callback)
return unsubscribe
} That's very simplistic. In reality, we would need another atom. const dataAtom = atom({})
const initDataAtom = atom(
null,
(get, set, init) => ...
)
initDataAtom.onMount = (initData) => {
...
} But, it's a bit tricky, because we need to "use" initDataAtom to fire onMount. What if we need an input to init atomLike your const dataAtom = atom({})
const inputAtom = atom(null)
const initDataAtom = atom(
null,
(get, set, init) => {
const input = get(inputAtom)
...
}
)
initDataAtom.onMount = (initData) => {
...
} But, this requires we need to make sure So, subscription in useEffect is easier if it depends on component props. splitAtom usageIf you need to update an atom of split atoms, you need to pass a writable atom to const boardAtom = atom(
get => get(storeAtom).board,
(get, set, nextBoard) => set(storeAtom, prev => ({ ...prev, board: nextBoard }))
})
const cellsAtom = splitAtom(boardAtom) Or, I don't think this this fully answers your questions. |
Beta Was this translation helpful? Give feedback.
-
I'm trying to convert my current react useState project to use jotai to keep my local state in sync with a firebase realtime database. Some difficulties/troubles revolve around the fact that the database document (it's based on date in the url) will not be known immediately and could even be swapped mid app usage, someone can choose to work on a different date.
I'd like to explain my current process and then maybe adapt it to jotai. First I'd need to create the "default" shape of the object if it doesn't already exist on first render. Something like this is what I have now
Once the initial database store is setup, I listen to my database like so:
Then for any state updates, I have an update function to handle the object.
The (sort of) tricky part also comes from the fact that this is a typing game, so I have a global keyboard listener on the app. There would be individual grid of cells that I could type into but a global listener that keeps track of the player's cursor and updates the cell based on the cursor position and not some individual, cell-specific event handler.
My initial thoughts are: splitAtom sounds great for the board, each individual grid cell can be an atom. I can create an update atom that takes the cell and updates the board based on the id, similar to what I did before.
There are a few problems I can't wrap my head around and if you could (maybe just a fresh perspective could help) give me the recommended jotai approach to something like this, that'd help a bunch. I've seen the
onMount
function but I'm not sure how I'd use it in this case since I don't know the date immediately. In my attempts, I felt like I started writing a bunch of atoms (with a lot of update logic) that all resided outside of React, it just kind of felt "wrong".So things I'm looking for:
and to answer my own questions in my basic understanding:
atom({})
to start with. I could then even update the atom in the same useEffect/naive approach as before for the initial valuesuseEffect()
s and update them like this, i'm looking for each atom to kind of handle this itself thoughi had an issue however that one update caused multiple updates to the database/state in some weird loop.
4) no idea, i just feel like i'm doing everything above incorrectly. i've been storing/creating all of my atoms outside of any react component and in a global
store.js
file, but maybe I need to create the initial atom and do the onMount later on? I'd then maybe need to store the atom in a ref or something?5) i think I can piecemeal everything together in a very bad way but honestly i think your work is great and i'd like to hear what the "correct" way to sync a database with my use case here. my biggest gripe with my approach is that is doesn't seem to utilize jotai functions or methodology very well and i'm looking to learn the jotai approach
Any help/feedback would be appreciated. Sorry if this isn't supposed to be a support forum but right now certain aspects of jotai examples are missing from the internet and I'm a bit lost
Beta Was this translation helpful? Give feedback.
All reactions