dialogs-slice

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,
  type DialogId,
} from "~/renderer/reducers/dialogs";
import type { State } from "~/renderer/reducers";

const DIALOG_ID: DialogId = "MY_NEW_DIALOG";

export const openMyNewDialog = () => openDialog(DIALOG_ID);
export const closeMyNewDialog = () => closeDialog(DIALOG_ID);
export const selectIsMyNewDialogOpen = (state: State) => selectIsDialogOpen(state, DIALOG_ID);

Step 3: Use in the view model

import { selectIsMyNewDialogOpen, closeMyNewDialog } from "../myNewDialog";

const useMyNewDialogViewModel = () => {
  const isOpen = useSelector(selectIsMyNewDialogOpen);
  const dispatch = useDispatch();
  const onClose = useCallback(() => dispatch(closeMyNewDialog()), [dispatch]);
  return { isOpen, onClose };
};