將 react-redux useSelector 與 typescript 一起使用

Question

當嘗試使用 react-redux 打字稿的新 useSelector 鈎子（見下面的例子）時，會出現該函數不存在的錯誤：

Module '"../../../node_modules/@types/react-redux"' has no exported member 'useSelector'.  TS2305

示例：

import * as React from "react"
import { useSelector } from "react-redux"
import { Message } from "./Message"

export const MessageContainer = () => {
  const searchValue = useSelector((state) => state.search)
  return (
    <Message searchValue={searchValue} />
  )
}

使用的版本： “react-redux”：“^7.1.0-alpha.5”“@types/react-redux”：“^7.0.9”

Answer 1

下面的代碼取自 redux doc 本身關於打字稿
打字稿redux官方

interface RootState {
      isOn: boolean
    }

// TS infers type: (state: RootState) => boolean
const selectIsOn = (state: RootState) => state.isOn

// TS infers `isOn` is boolean
const isOn = useSelector(selectIsOn)

正如它在稍后添加鈎子之前所說的那樣，但是如果您使用鈎子，則最好這樣編寫 Selector