调度后进行API调用

Question

我正在使用带有Redux工具包的React。比方说，我需要获取一些数据(假设它是一个数字数组(，然后将这些数字作为列表显示在页面上，然后立即循环该数组并使用每个数字作为参数发出API请求。这应该通过点击按钮来实现。因此，按钮组件看起来像这样：

export const Button: React.FunctionComponent = () => {
const dispatch = useDispatch()
const onClickButton = () => {
dispatch(fetchNumbers())
}
return (
<Button onClick={onClickButton}>
<Icon />
<Text>Run</Text>
</Button>
)
}

这是额外的减速器：

export const fetchNumbers = createAsyncThunk(
'data/numbers',
async () => {
return await someAPICall()
}
)
export const fetchItem = createAsyncThunk(
'data/item',
async (number: number) => {
return await someAnotherAPICall(number)
}
)

理想情况下，我希望我的逻辑是：

const onClickButton = () => {
dispatch(fetchNumbers())
.then(numbers => {
numbers.forEach(num => fetchItem(num))
})
}

但不幸的是，派遣并没有回报承诺，所以我不能在那之后。我知道这是一些基本的操作，但我发现自己不知道如何使用Redux工具包来执行它。

Answer 1

实际上，dispatch(fetchNumbers())确实返回了一个promise-购买您的类型并不能反映这一点。

您需要正确键入dispatch类型，如文档中所示

import { configureStore } from '@reduxjs/toolkit'
import { useDispatch } from 'react-redux'
import rootReducer from './rootReducer'
const store = configureStore({
reducer: rootReducer
})
export type AppDispatch = typeof store.dispatch
export const useAppDispatch = () => useDispatch<AppDispatch>() // Export a hook that can be reused to resolve types