Reactjs 在分派后进行API调用

我正在使用React with Redux工具包。假设我需要获取一些数据（让它成为一个数字数组），然后在页面上以列表的形式显示这些数字，然后立即循环该数组，并使用每个数字作为参数发出API请求。这应该通过点击按钮来实现。 因此，按钮组件如下所示：

export const Button: React.FunctionComponent = () => {
  const dispatch = useDispatch()
  const onClickButton = () => {
    dispatch(fetchNumbers())
  }

  return (
    <Button onClick={onClickButton}>
      <Icon />
      <Text>Run</Text>
    </Button>
  )
}

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

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

但不幸的是，快讯没有回复我的承诺，所以我不能在事后回复。

---

我知道这是一些基本的操作，但我发现自己不知道如何使用Redux toolkit执行它。

事实上，

dispatch（fetchNumbers（））

确实返回了一个承诺-购买您的类型并不反映这一点

您需要正确键入

dispatch

类型，如下所示

从'@reduxjs/toolkit'导入{configureStore}
从“react redux”导入{useDispatch}
从“./rootReducer”导入rootReducer
常量存储=配置存储({
还原剂：根还原剂
})
导出类型AppDispatch=存储区类型.dispatch
export const useAppDispatch=（）=>useDispatch（）//导出一个可以重用以解析类型的钩子

谢谢！我在文档中遗漏了这一部分。

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

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