我是redux的初学者,我正在尝试创建一个discord克隆。我正在尝试创建登录功能,使用firebase的google认证,并使用redux来保存状态。然而,每当我登录或注销时,该操作被触发了两次,我不清楚为什么。这是react dev工具中显示的内容:
redux devtools trace 1
redux devtools trace 2
这是我的store.js代码
import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../components/Reducers/userSlice';
import appReducer from '../components/Reducers/appSlice';
import { composeWithDevTools } from 'redux-devtools-extension';
const composeEnhancers = composeWithDevTools({trace: true});
export const store = configureStore({
reducer: {
user: userReducer,
app: appReducer,
},
});
这是我的userSlice.js代码:
import { createSlice } from '@reduxjs/toolkit';
export const userSlice = createSlice({
name: 'user',
initialState: {
user: null,
},
reducers: {
login: (state, action ) => {
state.user = action.payload;
},
logout: (state) => {
state.user = null;
}
},
});
export const { login, logout } = userSlice.actions;
export const selectUser = (state) => state.user.user;
export default userSlice.reducer;
这些是app.js中的相关代码行
import { login, logout, selectUser } from './components/Reducers/userSlice'
import Login from './components/Login/Login';
import { auth } from './firebase';
function App() {
//allows us to shoot things into the datalayer
const dispatch = useDispatch()
//selects user from the data layer
const user = useSelector(selectUser)
useEffect(() => { //listens for change in user and reloads accordingly
auth.onAuthStateChanged((authUser) => {
if (authUser){
//user log in
dispatch(
login({
uid: authUser.uid,
photo: authUser.photoURL,
email: authUser.email,
displayName: authUser.displayName
}))
} else {
//user log out
dispatch(logout())
}
})
}, [dispatch])
return (
<div className="app">
{user ? (
<>
<Sidebar/>
<Chat />
</>
) : (
<Login />
)}
</div>
);
}
export default App;
这就是我调用logout函数的地方
<div className="sidebar__profile">
<Avatar onClick={() => auth.signOut()} src={user.photo} />
<div className="sidebar__profileInfo">
<h3>{user.displayName}</h3>
<p>#{user.uid.substring(0, 5)}</p>
</div>
<div className="sidebar__profileIcons">
<MicIcon />
<SettingsIcon />
<HeadsetIcon />
</div>
</div>
这是我登录地方
import { Button } from '@mui/material'
import React from 'react'
import { auth, provider, signInWithPopup } from '../../firebase'
import './Login.css'
function Login() {
const signIn = () => {
//google authentication stuff
signInWithPopup(auth, provider)
.catch((error) => {
alert(error.message)
})
}
return (
<div className='login'>
<div className="login__logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Discord_white_D.svg/91px-Discord_white_D.svg.png?20180117191712" alt="Disclone logo" />
</div>
<Button onClick={signIn}>Sign In</Button>
</div>
)
}
export default Login
1条答案
按热度按时间ki1q1bka1#
您很可能订阅了
auth.onAuthStateChange()
两次。此函数返回一个取消订阅函数,应该调用该函数进行清理(https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#returns-firebase.unsubscribe_1)。useEffect可以将函数作为返回值,在再次运行或完成之前调用该函数。更改您的
useEffect()
以捕获返回的unsubcribe函数,然后将其返回: