Redux DevTools不显示初始状态，注册后状态及操作消失求助

问题现象 #

• 前端认证功能中注册功能可正常运行，但Redux DevTools显示null(pin):undefined
• 最初创建initialState时能正常查看状态，新增注册函数、reducer等代码后出现问题
• 清除浏览器缓存后，"登出"前状态显示正常；进入注册页后DevTools中的状态信息消失，注册后也无法查看，之前的操作记录也丢失

相关代码 #

authSlice.js #

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import authService from "./authService";
//Get user from localStorage
const user = JSON.parse(localStorage.getItem("user"));

const initialState = {
  user: user ? user : null,
  isError: false,
  isSuccess: false,
  isLoading: false,
  message: "",
};

// Register user

export const register = createAsyncThunk(
  "auth/register",
  async (user, thunkAPI) => {
    try {
        return await authService.register(user)
    } catch (error) {
        const message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString()
        return thunkAPI.rejectWithValue(message)
    }
  }
);

export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    reset: (state) => {
      state.isLoading = false;
      state.isSuccess = false;
      state.isError = false;
      state.message = "";
    },
  },
  extraReducers: (builder) => {
     builder
       .addCase(register.pending, (state) => {
         state.isLoading = true;
       })
       .addCase(register.fulfilled, (state, action) => {
         state.isLoading = false;
         state.isSuccess = true;
         state.user = action.payload;
       })
       .addCase(register.rejected, (state, action) => {
         state.isLoading = false;
         state.isError = true;
         state.message = action.payload;
         state.user = null;
       });
  },
});
export const { reset } = authSlice.actions;
export default authSlice.reducer;

index.js #

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

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

注册组件SignUp.js #

export default function SignUp() {
  const [formData, setFormData] = useState({
    username: "",
    email: "",
    password: "",
    password2: "",
  });
  const { username, email, password, password2 } = formData;

  const navigate = useNavigate();
  const dispatch = useDispatch();

  const { user, isLoading, isError, isSuccess, message } = useSelector(
    (state) => state.auth
  );

  useEffect(() => {
    if (isError) {
      toast.error(message);
    }

    if (isSuccess || user) {
      navigate("/");
    }

    dispatch(reset());
  }, [user, isError, isSuccess, message, navigate, dispatch]);

  const onChange = (e) => {
    setFormData((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
    }));
  };

  const onSubmit = (e) => {
    e.preventDefault();
    if (password !== password2) {
      toast.error("Passwords do not match");
    } else {
      const userData = {
        username,
        email,
        password,
      };
      dispatch(register(userData));
    }
  };

问题分析与解决方案 #

1. useEffect中dispatch(reset())的执行时机问题 #

注册组件的useEffect依赖数组包含user、isSuccess等状态，且每次都会执行dispatch(reset())，导致：

• 进入注册页时，组件挂载就触发状态重置，干扰DevTools的状态追踪
• 注册成功后，跳转的同时执行重置，状态被立即清空，DevTools无法捕获有效状态

修复方案：
调整useEffect逻辑，仅在特定条件下执行重置：

useEffect(() => {
  if (isError) {
    toast.error(message);
    // 仅在错误发生后重置状态
    dispatch(reset());
  }

  if (isSuccess || user) {
    navigate("/");
    // 跳转完成后再重置状态，或在目标页面处理重置逻辑
    dispatch(reset());
  }
}, [user, isError, isSuccess, message, navigate, dispatch]);

2. React StrictMode的重复执行干扰 #

开发环境下React.StrictMode会重复执行组件挂载、副作用等操作，可能导致Redux DevTools捕获到重复的状态更新，引发异常显示。

修复方案：
开发阶段暂时移除React.StrictMode测试：

// index.js
root.render(
    <Provider store={store}>
      <App />
    </Provider>
);

若问题消失，后续需针对严格模式调整副作用逻辑，确保状态操作的幂等性。

3. 异步Thunk中的变量命名冲突 #

register异步Thunk的参数名user与外层读取localStorage的user变量重名，虽不会直接报错，但可能导致逻辑混淆，影响状态追踪的可读性。

修复方案：
修改Thunk参数名避免冲突：

export const register = createAsyncThunk(
  "auth/register",
  async (userData, thunkAPI) => {
    try {
        return await authService.register(userData)
    } catch (error) {
        const message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString()
        return thunkAPI.rejectWithValue(message)
    }
  }
);

4. 检查Store配置 #

确认Redux Store正确启用DevTools，Redux Toolkit的configureStore默认在开发环境开启，但需确保无自定义配置覆盖：

// app/store.js
import { configureStore } from '@reduxjs/toolkit';
import authReducer from '../features/auth/authSlice';

export const store = configureStore({
  reducer: {
    auth: authReducer,
  },
  devTools: process.env.NODE_ENV !== 'production',
});

验证步骤 #

1. 优先调整useEffect中的重置逻辑，避免不必要的状态清空
2. 测试DevTools是否能正常显示状态
3. 若问题仍存在，移除React.StrictMode再次验证
4. 检查变量命名冲突和Store配置

内容的提问来源于stack exchange，提问作者Süleyman Eminbəyli