,可以通过使用中间件来实现。中间件是redux中的一个概念,它可以在action被发起之后,到达reducer之前进行一些额外的处理。
在redux-toolkit中,可以使用createAsyncThunk函数来创建异步的action。createAsyncThunk函数接受两个参数:一个字符串类型的action类型,和一个返回Promise的回调函数。在回调函数中,可以执行异步操作,并返回一个Promise对象。
当使用createAsyncThunk创建的异步action被触发时,redux-toolkit会自动派发三个不同的action:pending、fulfilled和rejected。我们可以在切片中定义对应的reducer来处理这些action。
下面是一个示例:
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
// 创建异步action
export const fetchData = createAsyncThunk(
'data/fetchData',
async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
);
// 创建切片
const dataSlice = createSlice({
name: 'data',
initialState: {
loading: false,
error: null,
data: null
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchData.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchData.fulfilled, (state, action) => {
state.loading = false;
state.data = action.payload;
})
.addCase(fetchData.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message;
});
}
});
// 导出reducer和异步action
export const { reducer } = dataSlice;
export { fetchData };
// 使用示例
// store.dispatch(fetchData());
在上面的示例中,我们首先使用createAsyncThunk创建了一个名为fetchData的异步action。在回调函数中,我们执行了一个异步操作,获取数据并返回。当这个异步action被触发时,redux-toolkit会自动派发pending、fulfilled和rejected三个action。
然后,我们使用createSlice创建了一个名为data的切片。在extraReducers中,我们定义了对应的reducer来处理这三个action。在pending的情况下,我们将loading设置为true,error设置为null;在fulfilled的情况下,我们将loading设置为false,并将数据存储在state中;在rejected的情况下,我们将loading设置为false,并将错误信息存储在error中。
最后,我们导出了reducer和fetchData异步action,可以在应用中使用store.dispatch(fetchData())来触发异步操作。
推荐的腾讯云相关产品:云函数SCF(Serverless Cloud Function)和云开发(CloudBase)。
以上是关于在redux-toolkit切片中捕获所有挂起或拒绝的操作的完善且全面的答案。
领取专属 10元无门槛券
手把手带您无忧上云