为什么我的redux动作会触发两次，我该如何修复

Question

我是redux的初学者，我正在尝试创建一个discord克隆。我正在尝试使用firebase的谷歌身份验证创建登录功能，并使用redux来保存状态。然而，每当我登录或注销时，该操作都会被触发两次，我不知道为什么。这就是react dev工具中显示的内容：

redux devtools跟踪1

redux devtools跟踪2

这是我的商店.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;

这就是我调用退出功能的地方

<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

Answer 1

您很可能订阅了两次auth.onAuthStateChange()。此函数返回一个取消订阅函数，该函数应被调用以清除(https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#returns-firebase.unsubscribe_1(.useEffect可以将函数作为返回值，该函数将在再次运行或完成之前被调用。

更改useEffect()以捕获返回的取消订阅功能，然后返回：

useEffect(() => { //listens for change in user and reloads accordingly
const unsubscribe = 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())
}
})
return unsubscribe
}, [dispatch])