Redux状态无法实时更新：注册成功后无法跳转至登录页

你遇到的核心问题是：在signup函数内无法获取更新后的Redux status状态，导致无法触发登录页跳转。原因是组件内的status是闭包捕获的旧值——dispatch触发Redux状态更新后，组件需要重新渲染才能拿到新状态，而当前函数执行时，组件还没完成重渲染，所以打印的是渲染时的旧值。

先修正代码里的几个明显错误：

1. 切片命名不匹配：你的切片定义为productsSlice，但组件里通过useSelector取的是state.auth，需将切片名改为authSlice，并在store中正确注册为auth reducer。
2. 初始状态错误：切片initialState里的status初始值设成了STATUSES对象，应改为具体的状态字符串，建议新增IDLE状态表示初始未操作：

const STATUSES = {
  IDLE: 'idle',
  SUCCESS: 'success',
  LOADING: 'loading',
  FAIL: 'fail'
}

// 修正后的initialState
initialState: {
  data: [],
  status: STATUSES.IDLE,
  loading: false,
}

3. 异步请求返回值丢失：signupUser中axios.post的then回调没有返回数据，导致最终payload为空，修正后：

export const signupUser = createAsyncThunk('user/signup', async (user) => {
  try {
    const res = await axios.post('http://localhost:5000/api/signup', user)
    console.log(res.data);
    return res.data
  } catch (err) {
    toast.error(err.response.data.message)
    throw new Error(err.response.data.message)
  }
})

解决方案一：通过useEffect监听status变化 #

在组件中添加useEffect，监听status的变化，当状态变为success时触发跳转：

import { STATUSES } from './path-to-auth-slice'

// 组件内添加
useEffect(() => {
  if (status === STATUSES.SUCCESS) {
    navigate('/')
    // 重置status为初始状态，避免组件重渲染时重复跳转
    dispatch(resetStatus())
  }
}, [status, navigate, dispatch])

同时在切片中添加重置状态的action：

const authSlice = createSlice({
  name: 'auth',
  initialState: { /* ... */ },
  reducers: {
    resetStatus: (state) => {
      state.status = STATUSES.IDLE
    }
  },
  extraReducers: (builder) => { /* ... */ }
})

export const { resetStatus } = authSlice.actions

解决方案二：直接利用dispatch的返回值判断 #

createAsyncThunk的dispatch调用会返回Promise，可通过unwrapResult直接获取成功结果或捕获错误，无需等待组件重渲染：

import { unwrapResult } from '@reduxjs/toolkit'

const signup = async (e) => {
  e.preventDefault()

  const user = { name, email, phone, password }

  try {
    const resultAction = await dispatch(signupUser(user))
    unwrapResult(resultAction) // 成功则继续，失败则抛出错误
    // 注册成功，直接跳转
    navigate('/')
  } catch (err) {
    // 这里可以处理失败逻辑，你已经在thunk中做了toast提示，可省略额外操作
    console.log('注册失败:', err)
  }
}

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