使用createAsyncThunk创建新用户时始终返回undefined，无它则正常

1. createAsyncThunk 参数处理错误 #

你把createAsyncThunk的异步函数参数搞反了：第一个参数是调用时传入的payload数据，第二个才是包含rejectWithValue的thunkAPI对象。你的代码直接解构{ rejectWithValue }作为第一个参数，导致根本没拿到要发送的用户数据；同时axios.post未传递请求体，后端自然返回undefined。

修正后的registerNewUser代码：

const initialState = {
  user: null, // 单个用户用null/空对象更合理，数组适合列表场景
  isLoading: false,
  error: false,
  errMsg: '' // 新增错误信息字段，方便组件展示
}

export const registerNewUser = createAsyncThunk('register/registerNewUser', 
  async(userData, { rejectWithValue }) => { // 第一个参数是payload，第二个是thunkAPI
    try {
      const resp = await axios.post('http://localhost:4000/register', userData) // 传入用户表单数据
      return resp.data
    } catch (error) {
      return rejectWithValue(error.response.data)       
    }
  }
)

2. 组件中 dispatch 参数与异步逻辑错误 #

你在signupBtn里调用dispatch(registerNewUser(newUser))，但newUser是slice里的reducer函数，不是组件收集的表单数据。另外dispatch是异步操作，直接在其后跳转页面会导致请求未完成就跳走，需要用unwrap()处理异步结果，确保请求成功后再跳转。

修正后的组件signupBtn代码：

const signupBtn = async (e) => { // 改为async函数
  e.preventDefault()

  // 先校验输入完整性
  if(!name || !username || !email || !password) {
    setErrMsg('请填写所有必填字段')
    errRef.current.focus()
    return
  }

  try {
    // 组装用户表单数据
    const userData = { name, username, email, password, id }
    // 用unwrap()获取异步请求结果，捕获错误
    await dispatch(registerNewUser(userData)).unwrap()
    navigate('/login') // 请求成功后再跳转
  } catch (error) {
    setErrMsg(error?.message || '注册失败，请重试')
    errRef.current.focus()
  }
}

3. Slice 错误处理优化 #

原rejected case未保存错误信息，建议把后端返回的错误信息存入state，方便组件展示：

const registerSlice = createSlice({
  name: 'register', // 与store中注册的reducer名称保持一致，避免混淆
  initialState,
  reducers: {
    newUser: {
      reducer(state, action) {
        state.user = action.payload
      }
    }
  },
  extraReducers(builder) {
    builder    
      .addCase(registerNewUser.pending, (state) => {
        state.isLoading = true;
        state.error = false;
        state.errMsg = '';
      })    
      .addCase(registerNewUser.fulfilled, (state, action) => {
        state.isLoading = false;
        state.error = false;
        state.user = action.payload;
      })
      .addCase(registerNewUser.rejected, (state, action) => {
        state.isLoading = false;
        state.error = true;
        state.errMsg = action.payload?.message || '注册失败'; // 保存错误信息
      })
  }
})

以上修正完成后，createAsyncThunk就能正确接收并发送用户数据，后端返回的结果也能正常存入Redux状态，不会再出现返回undefined的问题。

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