Redux表单提交时State异常清空跳转登录页问题求助

核心问题 #

你在Redux Toolkit的authSlice里，把registerUser定义成了异步reducer函数——这完全违反了Redux的核心规则：reducers必须是纯同步函数，不能包含任何异步操作（比如await axios.post）。

解决方案 #

Redux Toolkit专门提供了createAsyncThunk来处理异步逻辑，你需要把注册的异步逻辑从reducers中剥离，用thunk来实现，再通过extraReducers处理异步请求的不同状态。

步骤1：定义异步Thunk #

把原来的注册异步逻辑移到createAsyncThunk中：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// 定义注册用户的异步thunk
export const registerUser = createAsyncThunk(
  'auth/registerUser',
  async (userData, { rejectWithValue }) => {
    try {
      const config = {
        headers: {
          'Content-Type': 'application/json'
        }
      };
      const response = await axios.post(`${backendURL}/api/user`, userData, config);
      return response.data;
    } catch (err) {
      // 捕获错误并返回，方便后续处理
      return rejectWithValue(err.response?.data || '注册失败');
    }
  }
);

步骤2：修改authSlice的结构 #

用extraReducers处理thunk的三种状态（pending/fulfilled/rejected），保持reducers只处理同步状态更新：

const initialState = {
  userData: {},
  userToken: null,
  isAuthenticated: false,
  error: null,
  loading: false // 新增loading状态，用于标记异步请求状态
};

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setUser: (state, action) => {
      state.loading = false;
      state.isAuthenticated = true;
      state.userData = action.payload.user;
      state.userToken = action.payload.token;
    },
    clearError: (state) => {
      state.error = null;
    }
  },
  extraReducers: (builder) => {
    builder
      // 注册请求发送中
      .addCase(registerUser.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      // 注册成功
      .addCase(registerUser.fulfilled, (state, action) => {
        state.loading = false;
        // 注意：当前是登录用户创建新用户，不需要修改当前用户的认证状态
        console.log('新用户注册成功:', action.payload);
      })
      // 注册失败
      .addCase(registerUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
        console.log('注册失败:', action.payload);
      });
  }
});

export const { setUser, clearError } = authSlice.actions;
export default authSlice.reducer;

步骤3：保持原有handleSubmit不变 #

你的handleSubmit逻辑不需要修改，dispatch这个thunk即可：

const handleSubmit = (event) => {
  event.preventDefault();

  const userData = {
    name,
    email,
    password,
    confirmPassword,
    userType,
    userDevices
  };
  dispatch(registerUser(userData));
};

为什么原来的写法会导致状态清空？ #

1. 异步函数（async标记）会返回一个Promise对象，而不是修改后的state。
2. Redux会把这个Promise当作auth slice的新状态，导致原来的userData、isAuthenticated等字段全部丢失，整个auth状态变成了Promise。
3. 你的应用里应该有路由守卫/认证检查逻辑，当读取state.auth.isAuthenticated时，发现该字段不存在（因为状态变成了Promise），就判定用户未登录，自动跳转到登录页。
4. 刷新页面后，localStorage里的JWT被重新读取，调用setUser恢复了正常状态，所以登录状态又回来了。

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