Cyclic dependency in authentication example

[joekrall]

I discovered Redux Toolkit and RTK Query last week, and have been trying read up and experiment. I have a question about one of the CodeSandbox examples for RTK Query.

In line 2 of src/app/services/auth.ts, RootState is called to get a JWT if it exists in the store. We also import { api } into the store in line 2 of src/app/store.ts, making eslint(import/no-cycle) unhappy.

Recognizing that the docs explicitly say to not base an application on these examples, I'm curious as to how one would avoid this, or one would allow this in production. I've been working with both React and Redux less than a year, so this question is as much about my own uncertainty about what belongs in production code and current best practices with React/Redux (particularly with regard to auth and session management).

[markerikson]

RootState is a TS type, not a runtime value. It's safe to have circular imports of TS types - they all get resolved statically.

It's runtime imports that can cause issues.

The lint rule might be happier if the import was changed to explicitly be import type, possibly - I've seen other people mention it complaining about imports that are actually types as well.

[joekrall]

Thank you! I have even less experience with TypeScript, so this is helpful on multiple levels.