设置 React Redux 调度的正确类型答案

【问题标题】：Set correct typing of React Redux' dispatch设置 React Redux 调度的正确类型
【发布时间】：2020-10-28 13:42:41
【问题描述】：

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

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({ 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
}

【问题讨论】：

dispatch 是为了发送动作而不是为了制作效果。为什么你要做调度。只需使用 fetchData ，您应该在 useEffect 中执行此操作，如果您还想调度一些操作，但在获取之后执行它
@MaciejSikora fetchData 实际上是一个动作 - 我承认这样命名它是不幸的。请查看我的最新编辑
@user0101，你使用类似 redux-thunk 的东西吗？如果是这样，那应该在您的问题和标签中明确。 Redux 不支持原生调度异步函数。 github.com/reduxjs/redux-thunk
@geon 是的，我愿意
@user0101, redux.js.org/recipes/…

标签： reactjs typescript react-redux redux-thunk redux-toolkit

【解决方案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>;
}

【讨论】：

您好，感谢您的意见。请查看我的编辑和我对 Maciej 评论的回复