or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

connect.mdhooks.mdindex.mdtypescript.md
tile.json

tessl/npm-react-redux

Official React bindings for Redux state management with hooks and higher-order components

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-redux@9.2.x

To install, run

npx @tessl/cli install tessl/npm-react-redux@9.2.0

index.mddocs/

React Redux

React Redux provides official React bindings for Redux state management, offering performant and flexible integration through hooks (useSelector, useDispatch) and higher-order components (connect). The library enables React components to access Redux store state and dispatch actions while maintaining optimal rendering performance through selective subscriptions and automatic re-rendering when relevant state changes.

Package Information

  • Package Name: react-redux
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-redux

Core Imports

import { Provider, useSelector, useDispatch, useStore } from "react-redux";

For CommonJS:

const { Provider, useSelector, useDispatch, useStore } = require("react-redux");

Basic Usage

import React from "react";
import { Provider, useSelector, useDispatch } from "react-redux";
import { createStore } from "redux";

// Setup Provider at app root
function App() {
  return (
    <Provider store={store}>
      <TodoApp />
    </Provider>
  );
}

// Use hooks in components
function TodoApp() {
  const todos = useSelector((state: RootState) => state.todos);
  const dispatch = useDispatch();

  const addTodo = (text: string) => {
    dispatch({ type: "ADD_TODO", payload: text });
  };

  return (
    <div>
      {todos.map((todo) => (
        <div key={todo.id}>{todo.text}</div>
      ))}
      <button onClick={() => addTodo("New todo")}>Add Todo</button>
    </div>
  );
}

Architecture

React Redux is built around several key components:

  • Provider Component: Provides Redux store to React component tree via Context
  • Hook System: Modern React hooks (useSelector, useDispatch, useStore) for accessing store
  • Subscription Engine: Efficient subscription management to prevent unnecessary re-renders
  • TypeScript Integration: Full type safety with .withTypes() methods for pre-typed hooks
  • Connect HOC: Legacy higher-order component API for class components and complex scenarios
  • Performance Optimizations: Shallow equality checks and selective subscription patterns

Capabilities

Provider & Context

Store provider and context system for making Redux store available throughout React component tree.

interface ProviderProps<A extends Action<string> = UnknownAction, S = unknown> {
  store: Store<S, A>;
  serverState?: S;
  context?: Context<ReactReduxContextValue<S, A> | null>;
  stabilityCheck?: DevModeCheckFrequency;
  identityFunctionCheck?: DevModeCheckFrequency;
  children: ReactNode;
}

function Provider<A extends Action<string> = UnknownAction, S = unknown>(
  props: ProviderProps<A, S>
): JSX.Element;

const ReactReduxContext: Context<ReactReduxContextValue | null>;

State Selection Hook

Hook for extracting data from Redux store state with automatic re-rendering when selected data changes.

interface UseSelector<StateType = unknown> {
  <TState extends StateType = StateType, Selected = unknown>(
    selector: (state: TState) => Selected,
    equalityFnOrOptions?: EqualityFn<Selected> | UseSelectorOptions<Selected>
  ): Selected;
  
  withTypes: <OverrideStateType extends StateType>() => UseSelector<OverrideStateType>;
}

const useSelector: UseSelector;

interface UseSelectorOptions<Selected = unknown> {
  equalityFn?: EqualityFn<Selected>;
  devModeChecks?: Partial<DevModeChecks>;
}

Hooks

Action Dispatch Hook

Hook for accessing the Redux store's dispatch function to trigger actions.

interface UseDispatch<DispatchType extends Dispatch<UnknownAction> = Dispatch<UnknownAction>> {
  <AppDispatch extends DispatchType = DispatchType>(): AppDispatch;
  withTypes: <OverrideDispatchType extends DispatchType>() => UseDispatch<OverrideDispatchType>;
}

const useDispatch: UseDispatch;

Hooks

Store Access Hook

Hook for accessing the Redux store instance directly.

interface UseStore<StoreType extends Store> {
  (): StoreType;
  <StateType extends ReturnType<StoreType['getState']> = ReturnType<StoreType['getState']>, 
   ActionType extends Action = ExtractStoreActionType<Store>>(): Store<StateType, ActionType>;
  withTypes: <OverrideStoreType extends StoreType>() => UseStore<OverrideStoreType>;
}

const useStore: UseStore<Store>;

Hooks

Higher-Order Component

Legacy API for connecting React components to Redux store using higher-order component pattern.

function connect<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}, State = unknown>(
  mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps, State>,
  mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
  mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
  options?: ConnectOptions<State, TStateProps, TOwnProps, TMergedProps>
): InferableComponentEnhancer<TInjectedProps>;

Connect HOC

TypeScript Integration

Pre-typed hooks and comprehensive type definitions for full TypeScript support.

// Pre-typed hook creation
const useAppSelector = useSelector.withTypes<RootState>();
const useAppDispatch = useDispatch.withTypes<AppDispatch>();
const useAppStore = useStore.withTypes<AppStore>();

// Factory functions for custom contexts
function createSelectorHook<StateType = unknown>(
  context?: Context<ReactReduxContextValue<StateType> | null>
): UseSelector<StateType>;

function createDispatchHook<StateType = unknown, ActionType extends Action = UnknownAction>(
  context?: Context<ReactReduxContextValue<StateType, ActionType> | null>
): UseDispatch<Dispatch<ActionType>>;

function createStoreHook<StateType = unknown, ActionType extends Action = Action>(
  context?: Context<ReactReduxContextValue<StateType, ActionType> | null>
): UseStore<Store<StateType, ActionType>>;

TypeScript Integration

Utility Functions

Helper functions for common React Redux patterns and performance optimizations.

function shallowEqual(objA: any, objB: any): boolean;

// Deprecated in React 18+ - now a no-op that immediately runs callback
function batch(callback: () => void): void;

Core Types

type EqualityFn<T> = (a: T, b: T) => boolean;

type DevModeCheckFrequency = 'never' | 'once' | 'always';

interface DevModeChecks {
  stabilityCheck: DevModeCheckFrequency;
  identityFunctionCheck: DevModeCheckFrequency;
}

interface ReactReduxContextValue<SS = any, A extends Action<string> = UnknownAction> {
  store: Store<SS, A>;
  subscription: Subscription;
  getServerState?: () => SS;
  stabilityCheck?: DevModeCheckFrequency;
  identityFunctionCheck?: DevModeCheckFrequency;
}

interface DispatchProp<A extends Action<string> = UnknownAction> {
  dispatch: Dispatch<A>;
}

interface Subscription {
  addNestedSub: (listener: () => void) => () => void;
  notifyNestedSubs: () => void;
  handleChangeWrapper: () => void;
  isSubscribed: () => boolean;
  onStateChange?: (() => void) | null;
  trySubscribe: () => void;
  tryUnsubscribe: () => void;
  getListeners: () => any;
}

type ExtractStoreActionType<StoreType extends Store> = 
  StoreType extends Store<any, infer ActionType> ? ActionType : never;