From 9eecf7c3c10c9434826f43edc92dceb7421a254f Mon Sep 17 00:00:00 2001
From: AlexandrHoroshih <xad71rus@gmail.com>
Date: Thu, 7 Mar 2024 23:24:52 +0700
Subject: [PATCH] Document the feature

---
 .../docs/magazine/migration_from_redux.md     | 32 ++++++++++++++++++-
 apps/website/docs/redux/index.md              |  4 +--
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/apps/website/docs/magazine/migration_from_redux.md b/apps/website/docs/magazine/migration_from_redux.md
index 38c2a7b3..c14db87e 100644
--- a/apps/website/docs/magazine/migration_from_redux.md
+++ b/apps/website/docs/magazine/migration_from_redux.md
@@ -46,7 +46,36 @@ export const reduxInterop = createReduxIntegration({
 });
 ```
 
-☝️ Notice, how explicit `setup` event is required to initialize the interoperability. Usually it would be an `appStarted` event or any other "app's lifecycle" event.
+#### Avoiding ependency cycles
+
+Note, that overload of the `createReduxIntegration` with explicit `reduxStore` allows for better Typescript type inference, but also might result in cyclic dependencies.
+
+In case if you encountered this issue, you can use "async" setup of the `reduxInterop` object, but will lead to `null`-checks later, because in that case there is a possibility, that Redux Store is not initialized yet, while `reduxInterop` object is already in use.
+
+See [the package documentation](/redux/) for more details.
+
+```ts
+// src/shared/redux-interop
+export const startReduxInterop = createEvent<ReduxStore>();
+export const reduxInterop = createReduxIntegration({
+  setup: startReduxInterop,
+});
+
+// src/entrypoint.ts
+import { startReduxInterop } from 'shared/redux-interop';
+
+const myReduxStore = configureStore({
+  // ...
+});
+
+startReduxInterop(myReduxStore);
+```
+
+☝️ This would allow you to access `reduxInterop` object and avoid possible dependency cycles, if `reduxInterop` is being imported somewhere along with some reducers or middlewares.
+
+#### Explicit `setup`
+
+Notice, how explicit `setup` event is required to initialize the interoperability. Usually it would be an `appStarted` event or any other "app's lifecycle" event.
 
 You can read more about this best-practice [in the "Explicit start of the app" article](/magazine/explicit_start).
 
@@ -62,6 +91,7 @@ export const appStarted = createEvent();
 And then call this event in the point, which corresponds to "start of the app" - usually this is somewhere near the render.
 
 ```tsx
+// src/entrypoint.ts
 import { appStarted } from 'root/shared/app-lifecycle';
 
 appStarted();
diff --git a/apps/website/docs/redux/index.md b/apps/website/docs/redux/index.md
index 9b71fd1f..da63c223 100644
--- a/apps/website/docs/redux/index.md
+++ b/apps/website/docs/redux/index.md
@@ -52,9 +52,9 @@ Explicit `setup` event is required to initialize the interoperability. Usually i
 
 You can read more about this practice [in the "Explicit start of the app" article](/magazine/explicit_start).
 
-#### Async initialization
+#### Async setup
 
-You can also defer interop object initialization and Redux Store creation in time.
+You can also defer interop object initialization and Redux Store creation.
 
 The `createReduxIntegration` overload without explicit `reduxStore` allows you to pass the Store via `setup` event later.