为什么我的 redux 动作会触发两次，我该如何解决？

Question

我是 redux 的完整初学者，我正在尝试创建 discord 克隆。 我正在尝试使用带有 firebase 的谷歌身份验证并使用 redux 来保存 state 来创建登录功能。 但是，每当我登录或注销时，该操作都会触发两次，我不确定为什么。 这是反应开发工具中显示的内容：

redux 开发工具跟踪 1

redux 开发工具跟踪 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;

这就是我称之为注销 function 的地方

<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() 。 This function returns an unsubscribe function which should be called to clean up ( https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#returns-firebase.unsubscribe_1 ). useEffect 可以将 function 作为返回值，在它再次运行或完成之前将被调用。

更改您的useEffect()以捕获返回的取消订阅 function 然后返回：

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])