Redux Toolkit中.then()异步回调无法更新state的问题求解

问题根因 #

Redux Toolkit 的 reducer 内部接收的 state 是 Immer 库生成的临时代理对象，普通 reducer 必须是纯同步函数，当 reducer 的同步代码执行完成后，这个临时代理会被立即销毁。你在 axios 的异步回调里访问 state 时，代理已经被撤销，所以会抛出 revoked proxy 错误。而同步位置的赋值是在 reducer 执行过程中操作，代理还未销毁，因此可以正常生效。

修复方案 #

你需要用 Redux Toolkit 提供的 createAsyncThunk 来处理异步逻辑，再通过 extraReducers 监听异步执行结果来更新 state，步骤如下：

• 第一步：单独定义异步请求的 thunk 函数
• 第二步：在 slice 中通过 extraReducers 处理异步成功的回调，更新 state

修正后的 authSlice.ts 示例代码 #

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

// 定义异步获取用户信息的thunk
export const fetchUser = createAsyncThunk(
  'auth/fetchUser',
  async () => {
    const token = localStorage.getItem('token')
    const res = await axios.get(`http://localhost:8000/users/user/${token}`)
    return res.data
  }
)

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: null
    // 其他初始状态可自行补充
  },
  reducers: {
    // 其他同步reducer写在这里
  },
  // 处理异步thunk的返回状态
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.fulfilled, (state, action) => {
        // 此处state为有效代理对象，可直接修改
        state.user = action.payload
      })
      .addCase(fetchUser.rejected, (_, action) => {
        console.log('获取用户信息失败', action.error)
      })
  }
})

export default authSlice.reducer

调用方式 #

在需要触发用户信息获取的组件/逻辑中，dispatch 该 thunk 即可：

import { useDispatch } from 'react-redux'
import { fetchUser } from './authSlice'

// 组件内调用示例
const dispatch = useDispatch()
dispatch(fetchUser())

注意事项 #

不要在普通 reducer 函数中编写任何异步逻辑，所有异步操作都需要放在 createAsyncThunk 或者其他 Redux 异步中间件中处理，不能直接在 reducer 的异步回调里修改 state。

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