I use a redux state inside the firebase auth onAuthStateChanged callback like this
...
const authUser = useSelector(state => state.authUser)
console.log(authUser.status)
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, () => {
console.log(authUser.status)
if (authUser.status === 'loading') {
dispatch(updateStatus('loaded'))
}
return () => unsubscribe()
}, []);
...
First it logged
loading
loading
then after I signed in the auth state changed and it logged
loaded
loading
The initial state of status is loading. Every time the auth state changes it will call the callback function. The value of status inside the callback is always loading even that its value in the store has changed to loaded. Why doesn't its value in the callback change?
After reading this explanation from Dan I knew that states, props will never change inside a closure. To achieve the logic I wanted, just rewrite the update logic inside createSlice
...
updateStatus: (state, action) => {
if (state.auth.status === 'loading') {
state.auth.status = 'loaded'
}
}
...