将 react-redux useSelector 与打字稿一起使用

Posted 2023-02-19

【中文标题】将 react-redux useSelector 与打字稿一起使用

【英文标题】：Use react-redux useSelector with typescript

【发布时间】：2019-10-06 23:22:00

【问题描述】：

当尝试使用 react-redux typescript 的新的 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"

【问题讨论】：

Typescript 尚未更新。您正在使用具有 7.0.9 版本的 @types/react-redux。这些钩子是在 7.1.0 中添加的。

目前是最新版本的类型，有没有什么办法可以导入函数避免报错？

显然可以通过自己添加模块定义来临时修复：github.com/DefinitelyTyped/DefinitelyTyped/pull/…

【参考方案1】：

以下代码取自关于 typescript 的 redux 文档本身typescript redux offical

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