rx-js

name	rx-js
description	Guidance for Redux Toolkit and RxJS middleware patterns. Use when changing slices, selectors, epics, websocket action flows, async orchestration, frontend data flow, retries, polling, or middleware-driven API workflows.

RxJS And RTK Skill

Use this skill when changing Redux slices, selectors, epics, websocket flows, or frontend data orchestration.

Data Flow

• Use the repo data flow: component -> intent action -> middleware/API -> RTK -> selectors -> component.
• Components should not orchestrate API calls, websocket sends, retries, polling, timers, or chained actions.
• Use middleware/epics for async coordination, websocket transport, debouncing, retries, polling, timers, and action fan-out.
• Keep reducers focused on state updates and compute-pattern derived state.
• Normalize incoming API and Valkey responses before components consume them.

Selectors

• Components should consume named selectors instead of anonymous useSelector((state) => ...) functions.
• Put single-slice selectors near their slice.
• Put cross-slice selectors in a domain selector file. Create a shared/global selector file only when the selector does not belong to one domain.
• Use selectors to expose prepared data for render. Avoid repeated component-local transforms.
• Derived values may live in Redux when intentionally computed for render speed, consistency, or shared use.

Hooks

• Hooks are for reusable component-local behavior, browser/DOM integration, and small UI interaction state.
• Do not use hooks as hidden service layers for API orchestration, Redux-derived state, websocket flows, retries, polling, or action chaining.
• For external stores and subscription-based runtime state, prefer useSyncExternalStore.
• Avoid useEffect + setState subscriptions unless the source cannot fit a subscribe/getSnapshot model.
• Avoid useEffect for app data flow.
• Do not add useMemo or useCallback by default. Prefer selectors, compute steps, stable component boundaries, and React Compiler.

RxJS Practices

• Keep epics small and named by workflow.
• Use typed action creators and select(...) helpers where available.
• Put error handling at the workflow boundary that decides retry, toast, logging, or fallback behavior.
• Prefer explicit cancellation semantics for long-running streams.
• Avoid nested subscriptions. Compose streams with RxJS operators.

Error Handling

• Represent expected API/domain failures as error objects or rejected workflow actions.
• Pattern-match error shapes before deciding UI, retry, or logging behavior.
• Redact secrets from logs and websocket payload diagnostics.