Global Dialogs Slice Pattern

Global Dialogs Slice Pattern

Centralized Redux state for global dialog open/close, avoiding one slice per dialog.

When to use

Use this pattern for dialogs that are:

• Mounted at the app root (e.g. in Default.tsx)
• Triggered from distant parts of the component tree (e.g. a settings button opening a dialog rendered at root level)

Do NOT use this for dialogs that are local to a single component or screen -- prefer a simple useState instead.

Architecture

• One shared slice: renderer/reducers/dialogs.ts manages all global dialog states via a Record<DialogId, boolean>
• Single source of truth: DIALOG_IDS runtime array defines all IDs; DialogId type is derived from it via (typeof DIALOG_IDS)[number]
• Feature wrappers: Each feature creates a thin *Dialog.ts file that re-exports typed helpers bound to its ID
• Single mount point: mvvm/features/GlobalDialogs/index.tsx renders all global dialog components at the app root

Adding a new global dialog

Step 1: Register the dialog ID

Add the new ID to the DIALOG_IDS array in renderer/reducers/dialogs.ts. The DialogId type updates automatically:

export const DIALOG_IDS = ["RELEASE_NOTES", "MY_NEW_DIALOG"] as const;
// DialogId is now "RELEASE_NOTES" | "MY_NEW_DIALOG"

Step 2: Create the feature dialog file

Create myFeature/myNewDialog.ts in the feature folder:

import {
  openDialog,
  closeDialog,
  selectIsDialogOpen,