CODEWITHSUNDEEP
reactjstypescriptreduxreact-redux
LosProgramer
LosProgramer

Reputation: 127

Can't use Redux connect() correctly with TypeScript

I'm using Redux with Typescript, and I can't pass data between Components.

EmpList.tsx

function mapStateToProps(){//mapping here}
.... //body of a Component
export default connect(mapStateToProps)(EmpList)

Tool.tsx

import EmpList from './EmpList'
....
private empListTemp: RefObject<EmpList> = createRef()

The problem is that I get an error in the Tool.tsx 'EmpList refers to a value but is being used as a type here'. Now, If I remove connect(mapStateToProps) from export, or put export{mapStateToProps, EmpList} in the EmpList.tsx, I don't have that error anymore, but obviously Redux won't work then.

Upvotes: 0

Views: 221

Answers (2)

moshfiqrony
moshfiqrony

Reputation: 4733

Use useSelector and useDispatch hook

Upvotes: 0

phry
phry

Reputation: 44344

You need to add forwardRef: boolean to the options of connect for the ref to have any significant effect - and then you use the type of your unconnected component, since you want to "ref" the "inner component", not the function component wrapper created by connect. You would still use the connected component itself though.

Upvotes: 1

Related Questions