Can't use Redux connect() correctly with TypeScript

Question

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.

phry · Accepted Answer · 2021-06-05 11:39:44Z

1

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.

answered Jun 5, 2021 at 11:39

phry

44.9k7 gold badges96 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LosProgramer Over a year ago

I think I didn't understan where to use "typeof".. like this?: private empListTemp: RefObject<typeof EmpList> = createRef() sry, I'm new to all of this, and Redux just got my limited knowledge of React and Ts get even more limited

phry Over a year ago

No typeof. The unconnected component. So not what you are at the moment exporting as the default eport (that is your store-connected component - your original component that you want to access the ref to is actually "wrapped inside another component here"). Do export { EmpList as UnconnectedEmpList }, import that and use this as the generic for the ref.

LosProgramer Over a year ago

Oh man, you can't imagine how much you've helped me. Thanks a lot!

moshfiqrony · Accepted Answer · 2021-06-05 13:08:09Z

0

Use useSelector and useDispatch hook

answered Jun 5, 2021 at 13:08

moshfiqrony

4,7833 gold badges23 silver badges32 bronze badges

Collectives™ on Stack Overflow

Can't use Redux connect() correctly with TypeScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related