Is it possible to use RootState to type thunkAPI.getState without circular reference?

[ZYinMD]

#1126 is a similar issue, and @phryneas already provided a solution, but I wasn't able to understand how that solution worked.

Basically I wish to use RootState to help type thunkApi.getState, something like this:

import { RootState } from '..../store.ts';
...
const { foo, bar } = thunkApi.getState() as RootState;

And here's the circular reference:
createAsyncThunk exports thunk to createSlice, createSlice exports reducer to store, store exports RootState to createAsyncThunk.

Is there an easy way to break it? Thanks!

[phryneas]

when exporting your createSlice reducer, export mySlice.reducer as Reducer<typeof initialState>.

[ZYinMD]

Hi phryneas, thanks for your help. After more digging, I found my circular reference wasn't caused by importing RootState into createAsyncThunk.

The circular reference chain in the OP, though looking absolutely circular, doesn't actually cause circular reference. Maybe because RootState is just some typing info, which doesn't emit any js code.

Since the problem in the OP isn't really my problem, I'll close this one. However, I still don't understand your fix: you're still exporting the reducer from the createSlice file, which means the createSlice code still needs to go before the configureStore code when bundling, which shouldn't solve any problem. (If there's a problem to begin with, that is.) Anyway, I'll not go down the rabbit hole.

[phryneas]

@ZYinMD since the circular reference you were describing here is only a potential type circle (RootState has no runtime equivalent), you also just have to break the type circle - which is what my suggestion would do.