Cannot set getState type to RootState in createAsyncThunk

Question

I cannot set the return type of getState() to RootState. I'm using typescript and VSCode. I have to set the type to any, which stops IntelliSense on that object. Below is the code that has the problem:

export const unsubscribeMeta = createAsyncThunk(
  'meta/unsubscribe',
  async (_, { getState }) => {
    const { meta } = getState() as any;
    const res = await client.post<apiUnsubscribeResponse>(
      `/meta/unsubscribe/${meta.subscriptionId}`
    );
    return res.data.data;
  }
);

If I try to use RootState instead of any, many errors are flagged in the module by VSCode. I believe it is due to a circular dependency with the store and this slice. I am using RootState in many places further down in the module for selectors, with no problem. Is there a way around this?

Answer 1

The createAsyncThunk can have the types defined on the generics:

export const unsubscribeMeta = createAsyncThunk<apiUnsubscribeResponse, void, {state: RootState }>(
  'meta/unsubscribe',
  async (_, { getState }) => {
    const { meta } = getState();
    const res = await client.post<apiUnsubscribeResponse>(
      `/meta/unsubscribe/${meta.subscriptionId}`
    );
    return res.data.data;
  }
);

Defining the state will automatically make the getState be aware of the application state.