creactAsyncThunk 中的 action.payload 未定义

Question

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

如文档中所述

如果承诺成功解决，则使用承诺值作为 action.payload 发送已完成的操作。

但是 action.payload 在已完成的动作创建者中未定义。

这是我的代码。

/// 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接受两个参数：

1. type
2. payloadCreator

其中payloadCreator回调函数应该返回一个承诺（包含某些异步逻辑的结果）或一个值（同步）。

所以，你可以写：

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)
    }
  }
);