Use react-redux useSelector with typescript

Question

When trying to use the new useSelector hook (see below example) of react-redux typescript gives an error that the function does not exist:

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

Example:

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} />
  )
}

Used versions: "react-redux": "^7.1.0-alpha.5" "@types/react-redux": "^7.0.9"

Typescript has not updated yet. You're using @types/react-redux which has 7.0.9 version. These hooks were added in 7.1.0. — ugh StackExchange
Since it's currently the latest version of the types, is there any workaround to import the function and avoid the error? — Martin Fahl
Apparently a temporary fix can be done by adding the module definition yourself: github.com/DefinitelyTyped/DefinitelyTyped/pull/… — Martin Fahl

TalOrlanczyk TalOrlanczyk · Accepted Answer · 2020-11-11T12:37:30

the code below took from redux doc itself about typescript
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)

as it says before the hooks been added later but you better write Selector like this if you use the hooks

Use react-redux useSelector with typescript

1 Answers