我是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