Skip to content

Commit

Permalink
Document the feature
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexandrHoroshih committed Mar 7, 2024
1 parent 88938b7 commit 9eecf7c
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 3 deletions.
32 changes: 31 additions & 1 deletion apps/website/docs/magazine/migration_from_redux.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand All @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions apps/website/docs/redux/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down

0 comments on commit 9eecf7c

Please sign in to comment.