'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?

[phryneas]

Don't really like to break the code of conduct slightly_smiling_face

You really should not have a code of conduct that disallows the as keyword. It should not be overused, but there will always be edge cases where the programmer knows something the compiler does not and in those cases it is perfectly fine to use it. Pretty much every TypeScript teacher/book author I know agrees on this.

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?

Because you can just as well extend from an empty object - that base object has no value or meaning.

You will be thrilled about #2604 though - it is available in our 1.9 alphas.

[Emiya0306]

@tsarapke You can resolve the problem by this workaround. Enjoy it.

import { AsyncThunk, AsyncThunkPayloadCreator, Dispatch } from '@reduxjs/toolkit';

import { RootState } from './store';

declare module '@reduxjs/toolkit' {
  // https://stackoverflow.com/questions/64793504/cannot-set-getstate-type-to-rootstate-in-createasyncthunk
  type AsyncThunkConfig = {
    state?: unknown;
    dispatch?: Dispatch;
    extra?: unknown;
    rejectValue?: unknown;
    serializedErrorType?: unknown;
  };

  function createAsyncThunk<
    Returned,
    ThunkArg = void,
    ThunkApiConfig extends AsyncThunkConfig = {
      state: RootState;
    },
  >(
    typePrefix: string,
    payloadCreator: AsyncThunkPayloadCreator<
    Returned,
    ThunkArg,
    ThunkApiConfig
    >,
    options?: any
  ): AsyncThunk<Returned, ThunkArg, ThunkApiConfig>;
}

[tsarapke]

@Emiya0306 Many thanks! I would prefer yours one. Looks more reasonable than continuous type-casting. Love it.

Probably one note. Maybe it would be better to describe options property too? Like:

options?: AsyncThunkOptions<ThunkArg, ThunkApiConfig>

[yegor-klymenchuk]

@tsarapke Hi, I just try to make same implementation , but any way I have getState: () => unknown. What I made wrong ?

[tsarapke]

Hi @EgorKlimenchuk. What version of toolkit do you use?
BTW, I think you didn't make anything wrong. It just because that workaround is doesn't work for toolkit > 1.8.6.

In 1.8.6 they was export creator like this:

But in 1.9.0 in was changed. "creator" is generated in IIEF (Immediately Invoked Function Expression)

So it does not allows to overload module type export correctly.

[yegor-klymenchuk]

I have updated redux/toolkit to 1.9.0 , and unfortunally it did't help me((

[tsarapke]

@EgorKlimenchuk it doesn't work for 1.9+. Only for 1.8.6 or below

[yegor-klymenchuk]

@tsarapke aaa okey, but before update I was on 1.8.5

[tsarapke]

@EgorKlimenchuk if you are using 1.8.6 or below, it depends on env. But you should check if your typescript takes into account your custom.d.ts file

[yegor-klymenchuk]

@tsarapke Yes if I declare the type in custom.d.ts , I can see difference. For example I can directly change AsyncThunkConfig . But anyway getState return unknown

[phryneas]

createAsyncThunk.withTypes has shipped by now, maybe it would be better to use that instead of trying to overwrite our internal types.

[yegor-klymenchuk]

@phryneas Can I wrap createAsyncThunk or do I have to use withTypes every time?

[yegor-klymenchuk]

@phryneas when I use createAsyncThunk.withTypes and import RootState into slice I have this circular error

[phryneas]

Can I wrap createAsyncThunk or do I have to use withTypes every time?

You do that once per project.

This is not about importing it into the same file, it is because you create an actual type circle of calls. Usually, that happens because you are omitting the {} of an extraReducers function, but it's impossible to tell without access to your code. I'd suggest you try to boil it down to a minimal reproduction that you can show.

[yegor-klymenchuk]

@phryneas
The first of my problem, I have this error

I found one solution in tsconfig.json add "declaration": false. But honestly I don't want to do it, cause I might create another problem

[yegor-klymenchuk]

@phryneas
The second problem even I enable "declaration": false and try to use the CreateAppAsyncThunk I have 2 problems:

1. RootSate has circularly references itself .
2. CreateAppAsyncThunk return any, but I think it happens because of 1 point

I have tried to split into different files RootState and setupStore, but it was the same problem

store/index.ts

store/reducers/EditorDataSliceReducer.ts

[phryneas]

Comment out all of your reducers.
Comment in reducers until the problem comes up.
Boil it down to a minimal reproduction.
Show it here.

Please don't give incomplete screenshots - nobody can help you with that.
I have yet to see a single car mechanic that could tell you what's wrong on the inside of the motor when showing them a photo of the left back corner of a car.