Typescript types for unsubscribe from firestore and Redux-Thunk

Question

I have a Thunk Action that looks like:

export const doTestCall = (teamId:string): ThunkAction<()=>void, RootState, null, MoodAction> => {
    return dispatch => {
      const unsubscribe = db.doc("id").onSnapshot(doc =>{
        //whatever
      });
      return unsubscribe;
    }
  }

In my react component I have the following hook:

useEffect(() => {
        const unsubscribe = dispatch(doSomething()) as ()=>void;
        return () => unsubscribe();
}, []);

This code actually works. Question I have, how can I remove forcing the

as ()=>void

If I do, code complains in the "return line" with:

const unsubscribe: (dispatch: ThunkDispatch<RootState, null, MoodAction>, getState: () => RootState, extraArgument: null) => void
Expected 3 arguments, but got 0.ts(2554)
index.d.ts(9, 3): An argument for 'dispatch' was not provided.

Thanks,

score 1 · Accepted Answer · answered Apr 11 '21 at 16:12

It seems that ThunkAction<()=>void, RootState, null, MoodAction> does not match the definition of your middleware.

I would assume that something like

ThunkAction<()=>void, RootState, unknown, AnyAction>
//or
ThunkAction<()=>void, RootState, any, AnyAction>

would work better, assuming your dispatch typings include the types for the thunk middleware at all.

If you are using the officially recommended redux toolkit, setting up the correct dispatch type is documented here: https://redux-toolkit.js.org/tutorials/typescript

Typescript types for unsubscribe from firestore and Redux-Thunk

1 Answers1