React Redux

React Redux is the official React binding for the Redux state container, maintained by the Redux team. It lets your React components read data from a Redux store and dispatch actions to update it, without manually subscribing to the store or threading state through props.

Built around a small hooks API (useSelector, useDispatch, useStore) plus a Provider component, it handles subscription management, memoized selectors, and batched re-renders internally so that only the components whose data actually changed are re-rendered. It supports React 18+ concurrent rendering via use-sync-external-store and remains fully compatible with the legacy connect() higher-order component.

What You Get

• A Provider component that makes a Redux store available to the entire component tree via React context.
• The useSelector, useDispatch, and useStore hooks for reading state and dispatching actions from function components.
• The classic connect() higher-order component with mapStateToProps/mapDispatchToProps for existing and class-based codebases.
• Automatic subscription management and memoized, referentially-stable re-renders so only affected components update.
• First-class TypeScript types and React 18/19 concurrent-rendering support via use-sync-external-store.

Common Use Cases

• Managing global application state (auth, cart, UI flags) shared across many unrelated components.
• Migrating class-based connect() codebases to modern hook-based Redux usage incrementally.
• Pairing with Redux Toolkit and RTK Query for a full data and state-management layer in large React apps.
• Building predictable, testable state flows with a single source of truth and time-travel debugging.

Under The Hood

Architecture — The public surface in src/exports.ts is deliberately thin: a Provider (src/components/Provider.tsx) writes a ReactReduxContextValue (store plus a Subscription) into ReactReduxContext (src/components/Context.ts), and the hooks in src/hooks/ read it back. useSelector (src/hooks/useSelector.ts) delegates to useSyncExternalStoreWithSelector from use-sync-external-store, so selector evaluation and equality checks drive re-renders rather than raw store subscriptions. src/utils/Subscription.ts builds a nested tree of subscriptions so a parent connected component notifies its connected children in order, avoiding stale props and zombie-child bugs. The legacy connect() path (src/connect/) composes the same primitives through selectorFactory and mapStateToProps/mapDispatchToProps/mergeProps wrappers.

Tech Stack — Written in TypeScript (94% of the repo), built with tsup into CJS, ESM, and an RSC entry, with API surface pinned via @microsoft/api-extractor. The only runtime dependency is use-sync-external-store; React, Redux, and @types/react are peer dependencies (Redux and the React types optional), targeting React 18+/19 and Redux 5. Internals shim React access through src/utils/react.ts and use useIsomorphicLayoutEffect for SSR safety.

Code Quality — The codebase is small, cohesive, and heavily commented with JSDoc and @since tags on public options. It ships an extensive Vitest suite under test/ (component, hook, integration, and dedicated typetests/ for type-level assertions run with --typecheck), plus ESLint and Prettier gating. Naming is consistent and utilities are single-purpose (shallowEqual, hoistStatics, verifySubselectors), and development-mode stability/identity checks warn on common selector mistakes.

API Design — The hooks API is minimal and ergonomic: wrap the app once in <Provider store={store}> then call useSelector/useDispatch anywhere, with almost no boilerplate. TypeScript inference is strong, and the docs recommend typed useAppSelector/useAppDispatch wrappers. The retained connect() HOC keeps older codebases first-class, and per-selector dev-mode checks make correct usage discoverable. Learning curve is moderate — the hooks are simple, but understanding selectors, memoization, and the Redux data flow takes some ramp-up.