or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

actions.mdindex.mdmiddleware.mdreducer-composition.mdstore-management.mdutilities.md
tile.json

tessl/npm-redux

Predictable state container for JavaScript apps

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

To install, run

npx @tessl/cli install tessl/npm-redux@5.0.0

index.mddocs/

Redux

Redux is a predictable state container for JavaScript applications that provides a centralized store for application state with a strict unidirectional data flow pattern. It enables predictable state management through pure reducer functions, action dispatching, and middleware support for extending functionality.

Package Information

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

Core Imports

import { createStore, combineReducers, applyMiddleware, compose } from "redux";

For CommonJS:

const { createStore, combineReducers, applyMiddleware, compose } = require("redux");

Legacy non-deprecated store creation:

import { legacy_createStore as createStore } from "redux";

Basic Usage

import { legacy_createStore as createStore, combineReducers } from "redux";

// Define action types
const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

// Action creators
const increment = () => ({ type: INCREMENT });
const decrement = () => ({ type: DECREMENT });

// Reducer
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
};

// Create store
const store = createStore(counterReducer);

// Subscribe to changes
const unsubscribe = store.subscribe(() => {
  console.log("Current state:", store.getState());
});

// Dispatch actions
store.dispatch(increment()); // logs: Current state: 1
store.dispatch(increment()); // logs: Current state: 2
store.dispatch(decrement()); // logs: Current state: 1

// Unsubscribe
unsubscribe();

Architecture

Redux follows a strict unidirectional data flow pattern built around several key concepts:

  • Store: Single source of truth holding the application state tree
  • Actions: Plain objects describing state changes with a required type property
  • Reducers: Pure functions that take current state and action, return new state
  • Dispatch: The only way to trigger state changes by sending actions to the store
  • Subscribers: Functions that get called whenever the state changes
  • Middleware: Higher-order functions that extend the store's dispatch capabilities
  • Enhancers: Functions that enhance the store with additional capabilities

Capabilities

Store Management

Core store creation and management functionality for maintaining application state. The store provides methods to read state, dispatch actions, and subscribe to changes.

function createStore<S, A extends Action, Ext extends {} = {}, StateExt extends {} = {}>(
  reducer: Reducer<S, A>,
  enhancer?: StoreEnhancer<Ext, StateExt>
): Store<S, A, UnknownIfNonSpecific<StateExt>> & Ext;

function legacy_createStore<S, A extends Action, Ext extends {} = {}, StateExt extends {} = {}>(
  reducer: Reducer<S, A>,
  enhancer?: StoreEnhancer<Ext, StateExt>
): Store<S, A, UnknownIfNonSpecific<StateExt>> & Ext;

interface Store<S = any, A extends Action = UnknownAction, StateExt extends unknown = unknown> {
  dispatch: Dispatch<A>;
  getState(): S & StateExt;
  subscribe(listener: ListenerCallback): Unsubscribe;
  replaceReducer(nextReducer: Reducer<S, A>): void;
  [Symbol.observable](): Observable<S & StateExt>;
}

Store Management

Reducer Composition

Utilities for combining multiple reducer functions into a single root reducer. Essential for organizing state management in larger applications with multiple state slices.

function combineReducers<M>(
  reducers: M
): Reducer<StateFromReducersMapObject<M>, ActionFromReducersMapObject<M>, Partial<PreloadedStateShapeFromReducersMapObject<M>>>;

type Reducer<S = any, A extends Action = UnknownAction, PreloadedState = S> = (
  state: S | PreloadedState | undefined,
  action: A
) => S;

Reducer Composition

Action Management

Action creators and binding utilities for managing action dispatch. Provides convenience functions for working with action creator functions and automatic dispatch binding.

function bindActionCreators<A, C extends ActionCreator<A>>(
  actionCreator: C,
  dispatch: Dispatch
): C;

function bindActionCreators<A, M extends ActionCreatorsMapObject<A>>(
  actionCreators: M,
  dispatch: Dispatch
): M;

interface ActionCreator<A, P extends any[] = any[]> {
  (...args: P): A;
}

Action Management

Middleware and Enhancement

Store enhancement system for adding middleware and extending store capabilities. Middleware enables async action handling, logging, and other cross-cutting concerns.

function applyMiddleware(...middlewares: Middleware[]): StoreEnhancer<any>;

function compose<R>(...funcs: Function[]): (...args: any[]) => R;

interface Middleware<_DispatchExt = {}, S = any, D extends Dispatch = Dispatch> {
  (api: MiddlewareAPI<D, S>): (
    next: (action: unknown) => unknown
  ) => (action: unknown) => unknown;
}

Middleware and Enhancement

Utilities

Utility functions for type checking and validation within the Redux ecosystem.

function isAction(action: unknown): action is Action<string>;
function isPlainObject(obj: any): obj is object;

const __DO_NOT_USE__ActionTypes: {
  readonly INIT: string;
  readonly REPLACE: string;
  readonly PROBE_UNKNOWN_ACTION: () => string;
};

Utilities

Core Types

type Action<T extends string = string> = {
  type: T;
};

interface UnknownAction extends Action {
  [extraProps: string]: unknown;
}

interface Dispatch<A extends Action = UnknownAction> {
  <T extends A>(action: T, ...extraArgs: any[]): T;
}

interface Unsubscribe {
  (): void;
}

type ListenerCallback = () => void;

type StoreEnhancer<Ext extends {} = {}, StateExt extends {} = {}> = <
  NextExt extends {},
  NextStateExt extends {}
>(
  next: StoreEnhancerStoreCreator<NextExt, NextStateExt>
) => StoreEnhancerStoreCreator<NextExt & Ext, NextStateExt & StateExt>;

interface MiddlewareAPI<D extends Dispatch = Dispatch, S = any> {
  dispatch: D;
  getState(): S;
}

interface Observable<T> {
  subscribe: (observer: Observer<T>) => { unsubscribe: Unsubscribe };
  [Symbol.observable](): Observable<T>;
}

interface Observer<T> {
  next?(value: T): void;
}