creactAsyncThunk中的action.payload未定义

Question

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

如文件中所述

如果promise成功解析，则将promise值为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)
}
}
);

Answer 2

@Ajeet Shah答案的补充：

根据文件，被拒绝的承诺必须返回

• 错误实例，如在new Error(<your message>)中
• 诸如描述性字符串之类的普通值
• 或者thunkAPI.rejectWithValue()返回RejectWithValue

对于前两个选项，我还没有测试最后一个选项，有效载荷也将通过undefined，但会给出一个error参数，其中包含您拒绝的消息。

参见此示例：

const loginAction = createAsyncThunk(
"user/login",
(payload, { getState }) => {
const { logged_in, currentRequestId, lastRequestId } = getState().login;
// Do not login if user is already logged in
if (logged_in) {
return Promise.reject(new Error(Cause.LoggedIn));
}
// Do not login if there is a pending login request
else if (lastRequestId != null && lastRequestId !== currentRequestId) {
return Promise.reject(new Error(Cause.Concurrent));
}
// May as well try logging in now...
return AccountManager.login(payload.email, payload.password);
}
);