React-Redux Toolkit无法更新状态：Firebase onAuthStateChanged传递reducer无效

问题概述 #

首次使用React-Redux Toolkit，尝试通过Firebase的onAuthStateChanged方法根据用户登录/登出状态更新Redux中的用户状态，但Redux DevTools中状态始终为null，无报错信息。

错误点分析及修正方案 #

1. Reducer状态更新逻辑错误

RTK的createSlice中，当初始状态是基本类型（如null、字符串、数字）时，直接给state赋值不会触发状态更新，因为基本类型是值传递，需要返回新的状态值。

修正后的Reducer代码：

import { createSlice } from "@reduxjs/toolkit";

export const userSlice = createSlice({
    name: 'user',
    initialState: null,
    reducers: {
        setUser: (state, action) => {
            // 基本类型状态需返回新值，而非直接赋值
            return action.payload;
        }
    }
})

export const { setUser } = userSlice.actions;
export default userSlice.reducer;

2. Dispatch传递方式错误

原代码中传递给setCurrentUser的是() => dispatch(setUser)，调用时相当于执行了dispatch(setUser)，但setUser是action创建函数，需要传入currentUser作为payload才能生成正确的action对象。

3. onAuthStateChanged误用async/await

onAuthStateChanged是订阅监听函数，返回的是取消订阅的函数，并非Promise，不需要用async/await包裹。

优化后的完整代码 #

Firebase监听函数调整

直接接收dispatch，内部处理状态更新逻辑：

import { setUser } from './utils/userReducer'; // 根据实际路径调整
import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();

export const setupAuthListener = (dispatch) => {
    // 返回取消订阅函数，用于组件卸载时清理
    return onAuthStateChanged(auth, (currentUser) => {
        dispatch(setUser(currentUser));
    });
};

组件中的使用方式

在组件挂载时设置监听，无需在登录函数中手动调用：

import { useDispatch, useEffect } from 'react-redux'
import { setupAuthListener } from '../utils/firebase'
import { logInWithEmail } from '../utils/firebase'

const LoginComponent = () => {
  const dispatch = useDispatch()

  // 组件挂载时设置auth状态监听
  useEffect(() => {
    const unsubscribe = setupAuthListener(dispatch);
    // 组件卸载时取消订阅，避免内存泄漏
    return () => unsubscribe();
  }, [dispatch])

  const handleLogin = async (e) => {
    e.preventDefault()
    // 登录操作后，onAuthStateChanged会自动触发状态更新
    await logInWithEmail(email, password)
  }

  return (
    // 登录表单代码
  )
}

关键总结 #

• 基本类型状态的Reducer需返回新值，不能直接赋值
• 利用onAuthStateChanged的自动监听特性，无需在登录/登出函数中手动更新状态
• 组件挂载时设置监听，卸载时取消订阅，避免内存泄漏

内容的提问来源于stack exchange，提问作者rey2197