我尝试使用react redux工具包和pass setter函数来设置firebase的'onAuthStateChanged'的新状态。计划是将用户的状态(object或null)传递给reducer,这取决于用户是登录还是注销。这是我第一次使用redux,所以我不明白为什么我的代码不工作。没有错误,但在redux devtools中,state总是等于null。
配置存储:
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux';
import userReducer from './utils/userReducer';
const store = configureStore({
reducer: {
user: userReducer,
}
})
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
我的减速器:
import { createSlice } from "@reduxjs/toolkit";
export const userSlice = createSlice({
name: 'user',
initialState: null,
reducers: {
setUser: (state, action) => {
state = action.payload;
}
}
})
export const {setUser} = userSlice.actions;
export default userSlice.reducer;
发送地点:
import { setUser } from '../utils/userReducer'
import { useDispatch } from 'react-redux'
const dispatch = useDispatch()
const handleLogin = async (e) => {
e.preventDefault()
const { user } = await logInWithEmail(email, password)
await setCurrentUser(() => dispatch(setUser))
}
Firebase函数,我在这里尝试使用reducer:
export const setCurrentUser = async (setUser) => {
await onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser)
})
}
我明白,使用useContext会容易得多,但我试图通过暗示来学习redux。
1条答案
按热度按时间qrjkbowd1#
这样试试看:
理由:
你的
setCurrentUser
函数propsetUser
只是函数() => dispatch(setUser)
,但是这个函数不接收任何prop,并且dispatch(setUser)
不做任何事情。你需要将值(payload
)传递给reducer函数。此外,尝试将
dispatch
本身作为prop传递,并在onAuthStateChanged
内分派。如果
handleLogin
和setCurrentUser
函数分别在不同的文件中,则导入setUser
reducer函数。