将类型安全操作(createAsycAction)代码段转换为reduxjs/toolkit(createAsyncTh

Question

我正在将我的react存储从typesafe操作转换为@reduxjs/toolkit。我需要一些关于如何转换以下代码片段的指导：

export const fetchAllCollectiblesAsync = createAsyncAction(
'collectibles/ALL_COLLECTIBLES_fetch_request',
'collectibles/ALL_COLLECTIBLES_fetch_success',
'collectibles/ALL_COLLECTIBLES_fetch_failure',
)<
void,
{
collectibles: Collectible[];
},
Error
>();

我只是在寻找这个的createAsyncThunk版本。干杯，Dave

Answer 1

查看createAsyncThunk和createSlice函数的extraReducers参数的文档，我认为这正是您所需要的：

/* action to fetch */
const fetchAllCollectiblesAsync = createAsyncThunk(
'collectibles/ALL_COLLECTIBLES',
async (collectibles: Collectible[]) => {
/* ... */
}
)
/* the part of slice */
const slice = createSlice({
extraReducers: (builder) => {
builder.addCase(fetchAllCollectiblesAsync.pending, () => {
/* handler for request */
})
.addCase(fetchAllCollectiblesAsync.fulfilled, () => {
/* handler for success */
})
.addCase(fetchAllCollectiblesAsync.rejected, () => {
/* handler for error */
})
}
})