tessl/npm-react-redux

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

React Redux

Name: tessl/npm-react-redux
Author: tessl

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;