调度后进行 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))
    })
  }

但不幸的是 dispatch 没有 return 承诺，所以我不能再追求它。我知道这是一些基本操作，但我发现自己不知道如何使用 Redux-toolkit 执行它。

Answer 1

实际上，dispatch(fetchNumbers()) 确实 return 一个承诺 - 购买您的类型并不能反映这一点。

您需要正确输入 dispatch 类型，如下所示 in the documentation

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

调度后进行 API 调用

Making an API call after dispatch

reactjs

redux

redux-thunk

redux-toolkit