是一个promise,它表示异步action创建函数(AsyncThunk)的返回值。在Redux Toolkit中,CreateAsyncThunk是一个用于创建异步thunk action的工具函数。
CreateAsyncThunk函数接受两个参数:第一个参数是一个字符串,表示该异步action的类型;第二个参数是一个回调函数,它接受两个参数:第一个参数是一个payload,表示传递给异步action的参数;第二个参数是一个thunkAPI对象,可以用来触发其他action、获取state等。
CreateAsyncThunk函数返回一个函数,该函数会在调用时执行异步操作,并在异步操作完成后自动分发action。异步操作的结果会作为返回值被包装在promise中返回。
例如,以下是一个使用CreateAsyncThunk创建异步action的示例:
import { createAsyncThunk } from '@reduxjs/toolkit';
// 创建异步action
export const fetchUser = createAsyncThunk('user/fetchUser', async (userId, thunkAPI) => {
try {
const response = await fetch(`/api/users/${userId}`);
const user = await response.json();
return user;
} catch (error) {
// 异常处理,可以使用thunkAPI触发其他action
thunkAPI.dispatch(someErrorAction(error.message));
throw error;
}
});
// 在reducers中处理异步action的结果
const userSlice = createSlice({
name: 'user',
initialState: {
user: null,
loading: false,
error: null
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchUser.pending, (state) => {
state.loading = true;
})
.addCase(fetchUser.fulfilled, (state, action) => {
state.loading = false;
state.user = action.payload;
})
.addCase(fetchUser.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message;
});
}
});
在上述示例中,fetchUser是一个使用CreateAsyncThunk创建的异步action,它会发送HTTP请求并在请求成功后将返回的用户数据作为payload分发到相应的action中。我们可以在reducers中使用fetchUser.pending、fetchUser.fulfilled、fetchUser.rejected来处理异步action的不同阶段(pending、fulfilled、rejected)的状态更新。
推荐的腾讯云相关产品:腾讯云函数(云开发Serverless托管)- https://cloud.tencent.com/product/scf
领取专属 10元无门槛券
手把手带您无忧上云