---
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.