reactjs - creactAsyncThunk 中的 action.payload 未定义

Question

我正在尝试使用带有 的 axios 从 api 获取用户数据createAsyncThunk ，并希望用户数据由 调度的已完成操作存储在状态中createAsyncThunk .
如 docs 中所述

if the promise resolved successfully, dispatch the fulfilled action with the promise value as action.payload.

但是在 中未定义的 action.payload完成的 Action 创建者 .
这是我的代码。

/// Create Async Thunk
export const fetchUserData = createAsyncThunk(
  'user/fetchUserData',
  (payload, { dispatch }) => {
    axios
      .get('/user')
      .then(res => {
        console.log(res.data);
        //Used this as a work around for storing data
        dispatch(setUser(res.data));

        return res.data;
       })
      .catch(err => {
        console.error(err);
        return err;
      });
  }
);

/// On Fulfilled
const userSlice = createSlice({
...
  extraReducers:{
  ...
  [fetchUserData.fulfilled]: (state, action) => {
        // Payload is undefined
        state.data = action.payload
      },
  }
}

Answer 1

createAsyncThunk接受两个参数:

type

payloadCreator

哪里payloadCreator是一个回调函数，应该返回 promise (包含一些异步逻辑的结果)或 值 (同步)。
所以，你可以写:

export const fetchUserData = createAsyncThunk(
  'user/fetchUserData',
  (payload, { dispatch }) => {
    return axios.get('/user'); // Return a promise
  }
);

或者

export const fetchUserData = createAsyncThunk(
  'user/fetchUserData',
  async (payload, { dispatch, rejectWithValue }) => {
    try {
      const response = await axios.get('/user')
      return response // Return a value synchronously using Async-await
    } catch (err) {
      if (!err.response) {
        throw err
      }
      return rejectWithValue(err.response)
    }
  }
);