Redux Toolkit中reducer/action触发后slice状态未更新问题求助

问题根因 #

你直接调用了action creator但没有派发action到Redux store，因此reducer不会执行，状态自然不会更新。同时你的useEffect存在重复执行的问题，可能引发内存泄漏。

具体问题点 #

• 调用setUser/setNoUser这类action creator仅会返回标准action对象，必须通过dispatch方法提交给store才会触发reducer执行更新状态
• useEffect未传入依赖数组，每次组件渲染都会重新注册auth监听，会导致内存泄漏和重复执行逻辑

修复方案 #

1. 调整App组件代码 #

引入useDispatch钩子获取dispatch实例，用dispatch包裹action调用，同时补全useEffect的依赖和清理逻辑：

import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { AppDispatch } from "./store"; // 替换为你实际的store文件路径
...
import { setUser, setNoUser } from "./features/user/user-slice";

function App() {
  const [loading, setLoading] = useState<boolean>(true);
  // 获取带类型定义的dispatch实例
  const dispatch = useDispatch<AppDispatch>();

  useEffect(() => {
    // onAuthStateChanged返回取消监听的函数
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if (user) {
        console.log("useEffect");
        console.log(user);
        // 派发action到store
        dispatch(setUser(user));
      } else {
        dispatch(setNoUser());
        console.log("useEffect, no user");
      }
      setLoading(false);
    });
    // 组件卸载时执行清理，取消监听
    return unsubscribe;
  }, [dispatch]); // 仅在组件挂载时执行一次

  if (loading) return <Spinner animation="border" color="dark" />;
  return <App/>;
}

export default App;

2. 确认根组件已配置Provider #

确保项目入口文件（通常是index.tsx）已经用Provider包裹App组件并传入store：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

修改完成后重新运行项目，Redux DevTools即可正常捕获到action并显示状态更新。

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