'RootState' circularly references itself

[tsarapke]

Hello there!

We are migrating our applications to use @reduxjs/toolkit and faced with issue of RootState circularly references itself, and store implicitly has type any when we are trying to specify state type of createAsyncThunk<Blob, { height: number, width: number }, { state: RootState }>.

Reproduction

Screenshot:

We've already read some of existing topics here, like:
#2462
#2237
#1126
#324

But don't found any solution to handle it.

In addition, it would be nice to have exposing of AsyncThunkConfig from @reduxjs/toolkit, as for now there is no way infer that type in slice/reducer custom factory (only by specifying any)

[markerikson]

The main fallback option for this sort of issue is to infer the RootState type from the root reducer separately, instead of from store.getState:

const rootReducer = combineReducers({
  a: sliceA.reducer
})

type RootState = ReturnType<typeof rootReducer>;

Does that help?

[tsarapke]

@markerikson Unfortunately no, it doesn't.
It solves the issue with type of const store, so it doesn't of any type anymore.
But RootState still circularly references itself.

[phryneas]

One of your slices references RootState. In that case, you have to type that slice reducer on export.

So

export default slice.reducer

becomes

export default (slice.reducer as Reducer<typeof initialState>)

[tsarapke]

@phryneas
It also doesn't help. At reproduction link, I've already specify return type of slice.

V1:

V2

[phryneas]

Well, it is one of your slices that causes it - you might have gone with the wrong one here. Comment them out until the message disappears, then you know which one to do this on. All I can say is that that reducer somewhere references RootState while being part of it. And then you need that assertion I showed.

[tsarapke]

@phryneas
There are only 2 slices, created by the same creator

Slice at row 6 is fine.
Slice at row 7 is not.
But they are created by the same generator. It trows an error, until you will remove { state: RootState } from createAsyncThunk generic type. But because of we want to know getState, we can't remove it.

[phryneas]

Do fetchImage2 or ImageState rely on the type of RootState?

[tsarapke]

fetchImage2 rely on RootState. fetchImage2 is async thunk where we want to use getState.

ImageState doesn't rely on RootState. ImageState is a part of RootState.

[phryneas]

Well, there you have your circular type reference.

Honestly, I can't do much with screenshots. If you give me a TypeScript playground that is complete enough to replicate your problem I can take a quick look and give a recommendation on how to solve it in your case.

[tsarapke]

@phryneas, actually I left link to playground at the topic-starting message (here is duplicate)

If passing state to generic type of async thunk makes circular reference, why do we need it at all? From another side, how we will know about type returned by getState? Don't you find it strange?

[phryneas]

I'll take a look later, missed that part. Thanks.

Generally: something like this is usually not a problem if you just write normal logic. But if you add wrapping logic like you are doing here, it gets problematic. That's just TS being TS. (without the createImageSlice you would not have any problem)

[phryneas]

So, after taking a look, you can interrupt that circle by doing something like

const image1Slice = createImageSlice("image1", fetchImage1) as Reducer<ImageState, AnyAction>;
const image2Slice = createImageSlice("image2", fetchImage2) as Reducer<ImageState, AnyAction>;

The problem is really that the fetchImage2 needs the type of RootState, which depends on rootReducer, which depends on imageReducer, which depends on image2Slice - which then depends on fetchImage2 - a circle. And you have to break the circle at one point.

Generally, if I may ask:

• why are you writing this by hand instead of using RTK Query, which would do that job for you? You are essentially recreating that here.
• are you really really sure you want to store images in the Redux store? Those should usually not be in JavaScript memory at all.

[tsarapke]

Answering questions:

• we are doing smooth migration step-by-step. We can't do it at one time. It very long process that must be done carefully. We have some middlewares that rely on current api wrapper. So we can't use RTK for now (but have plans in future). We have micro frontend, about 8 apps with huge business logic. So.... yeah.
• we don't store images in Redux store, it would be a really bad idea. These reducers stores requestId, but not the images themselfs. In our app it also could store some meta-info (object) along to requestId.

Regarding to recursion. It's sad that we forced to use type casting (not real fan of it). BTW, createImageSlice already returns Reducer<ImageState, AnyAction>. Why it doesn't help?

It seems to me like the issue is not in asyncAction usage by the slice, but in arguments types of factory. When you will remove generic type and make asyncAction to be any - it starts work fine. But usage of any is not safe though.

[phryneas]

Regarding to recursion. It's sad that we forced to use type casting (not real fan of it). BTW, createImageSlice already returns Reducer<ImageState, AnyAction>. Why it doesn't help?

Honestly, I do not know. This is a TypeScript quirk - we cannot do a lot about it.

And yes, changing your factory function in some way could also do that, but as you noticed it's not the best idea either.

In the next TS version, it will be possible to do

const image1Slice = createImageSlice("image1", fetchImage1) satisfies Reducer<ImageState, AnyAction> as Reducer<ImageState, AnyAction>;
const image2Slice = createImageSlice("image2", fetchImage2) satisfies Reducer<ImageState, AnyAction> as Reducer<ImageState, AnyAction>;

which is also not more beautiful but will at least be typesafe despite being a cast.

[tsarapke]

Yeah.
Anyway, for now we decided to use type casting as temp workaround until we get close to RTK. Good thing there aren't many places like this. Don't really like to break the code of conduct 🙂

Another question - why do you not expose AsyncThunkConfig from @reduxjs/toolkit, so it may help to create some predefined configs types by extending this one?