How to properly type useSelector and useDispatch from react-redux?

Hi everyone, I’m new to typescript and I’m using easy-peasy with react-redux. I don’t know what is the best way to type useSelector and useDispatch. As far as I know, I can manually define the RootState interface and pass it to useSelector. Something like the code below

interface RootState {
  count: number;
}

const {number} = useSelector((state: RootState) => state)

It works but then I have to change the interface every time I change the models. Is there a way to auto generate RootState interface from the model interface?

Another thing is the useDispatch, how can I make auto-complete work for the following code?

// auto-complete for someAction, someThunk
const {someAction, someThunk} = useDispatch()

I would appreciate it if someone could help me. Thanks!

[ctrlplusb]

You can most certainly achieve this. I am away from my keyboard for most of the day, but will try answer as soon as possible.

[ctrlplusb]

Hey @dpyzo0o

Better late than never. 😅

Here is a CodeSandbox that shows how to create and use typed versions of the react-redux hooks.

I’ll make sure we add this to the recipes. 👍