reactjs - 设置 React Redux 调度的正确类型

Question

有如下代码（不是实际的工作代码，只是给你一个想法）：

import { useDispatch } from 'react-redux'

const dispatch = useDispatch()

interface IProp {
  prop: number
}

const [data, setData] = useState<number[]>([])

async ({ prop }: IProp) => {
  const data = await dispatch<any>(
    fetchData({
      prop
    })
  )

  setData(data)
}

fetchData 类型

fetchData({ prop }: IProp): (dispatch, getState) => Promise<number[]>

如何设置dispatch最终返回数字数组的类型？Any是临时解决方法

编辑：

fetchData实际上是一个动作。我不会在这里详细介绍，但让我们假设它看起来像这样：

export const fetchData = ({
  prop
}) => async (dispatch, getState) => {
  // do something store-related like dispatching other actions or getting values from store
  // get `extra`

  const { data } = await actualFetch({
    prop,
    extra
  })

  return data
}

Answer 1

dispatch只返回您作为参数传入的操作。https://github.com/reduxjs/redux/blob/master/src/createStore.ts#L257

没有理由等待它，它不会包含获取的数据。

正如 Maciej Sikora 提到的，您根本不需要 redux。如果您出于某种原因仍想将数据传递到 redux，请在获取并处理后进行。

interface Props {
    prop: number
}

function SomeComponent (props: Props) {
    const [data, setData] = useState<number[]>([]);

    const onClick = async () => {
        const data = await fetchData(props);
        setData(data);
    };

    return <div>
        {data}
        <button onClick={onClick}>Fetch!</button>
    </div>;
}