0
# Redux
1

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

4
## Package Information
5

6
- **Package Name**: redux
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install redux`
10

11
## Core Imports
12

13
```typescript
14
import { createStore, combineReducers, applyMiddleware, compose } from "redux";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { createStore, combineReducers, applyMiddleware, compose } = require("redux");
21
```
22

23
Legacy non-deprecated store creation:
24

25
```typescript
26
import { legacy_createStore as createStore } from "redux";
27
```
28

29
## Basic Usage
30

31
```typescript
32
import { legacy_createStore as createStore, combineReducers } from "redux";
33

34
// Define action types
35
const INCREMENT = "INCREMENT";
36
const DECREMENT = "DECREMENT";
37

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

42
// Reducer
43
const counterReducer = (state = 0, action) => {
44
  switch (action.type) {
45
    case INCREMENT:
46
      return state + 1;
47
    case DECREMENT:
48
      return state - 1;
49
    default:
50
      return state;
51
  }
52
};
53

54
// Create store
55
const store = createStore(counterReducer);
56

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

62
// Dispatch actions
63
store.dispatch(increment()); // logs: Current state: 1
64
store.dispatch(increment()); // logs: Current state: 2
65
store.dispatch(decrement()); // logs: Current state: 1
66

67
// Unsubscribe
68
unsubscribe();
69
```
70

71
## Architecture
72

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

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

83
## Capabilities
84

85
### Store Management
86

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

89
```typescript { .api }
90
function createStore<S, A extends Action, Ext extends {} = {}, StateExt extends {} = {}>(
91
  reducer: Reducer<S, A>,
92
  enhancer?: StoreEnhancer<Ext, StateExt>
93
): Store<S, A, UnknownIfNonSpecific<StateExt>> & Ext;
94

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

100
interface Store<S = any, A extends Action = UnknownAction, StateExt extends unknown = unknown> {
101
  dispatch: Dispatch<A>;
102
  getState(): S & StateExt;
103
  subscribe(listener: ListenerCallback): Unsubscribe;
104
  replaceReducer(nextReducer: Reducer<S, A>): void;
105
  [Symbol.observable](): Observable<S & StateExt>;
106
}
107
```
108

109
[Store Management](./store-management.md)
110

111
### Reducer Composition
112

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

115
```typescript { .api }
116
function combineReducers<M>(
117
  reducers: M
118
): Reducer<StateFromReducersMapObject<M>, ActionFromReducersMapObject<M>, Partial<PreloadedStateShapeFromReducersMapObject<M>>>;
119

120
type Reducer<S = any, A extends Action = UnknownAction, PreloadedState = S> = (
121
  state: S | PreloadedState | undefined,
122
  action: A
123
) => S;
124
```
125

126
[Reducer Composition](./reducer-composition.md)
127

128
### Action Management
129

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

132
```typescript { .api }
133
function bindActionCreators<A, C extends ActionCreator<A>>(
134
  actionCreator: C,
135
  dispatch: Dispatch
136
): C;
137

138
function bindActionCreators<A, M extends ActionCreatorsMapObject<A>>(
139
  actionCreators: M,
140
  dispatch: Dispatch
141
): M;
142

143
interface ActionCreator<A, P extends any[] = any[]> {
144
  (...args: P): A;
145
}
146
```
147

148
[Action Management](./actions.md)
149

150
### Middleware and Enhancement
151

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

154
```typescript { .api }
155
function applyMiddleware(...middlewares: Middleware[]): StoreEnhancer<any>;
156

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

159
interface Middleware<_DispatchExt = {}, S = any, D extends Dispatch = Dispatch> {
160
  (api: MiddlewareAPI<D, S>): (
161
    next: (action: unknown) => unknown
162
  ) => (action: unknown) => unknown;
163
}
164
```
165

166
[Middleware and Enhancement](./middleware.md)
167

168
### Utilities
169

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

172
```typescript { .api }
173
function isAction(action: unknown): action is Action<string>;
174
function isPlainObject(obj: any): obj is object;
175

176
const __DO_NOT_USE__ActionTypes: {
177
  readonly INIT: string;
178
  readonly REPLACE: string;
179
  readonly PROBE_UNKNOWN_ACTION: () => string;
180
};
181
```
182

183
[Utilities](./utilities.md)
184

185
## Core Types
186

187
```typescript { .api }
188
type Action<T extends string = string> = {
189
  type: T;
190
};
191

192
interface UnknownAction extends Action {
193
  [extraProps: string]: unknown;
194
}
195

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

200
interface Unsubscribe {
201
  (): void;
202
}
203

204
type ListenerCallback = () => void;
205

206
type StoreEnhancer<Ext extends {} = {}, StateExt extends {} = {}> = <
207
  NextExt extends {},
208
  NextStateExt extends {}
209
>(
210
  next: StoreEnhancerStoreCreator<NextExt, NextStateExt>
211
) => StoreEnhancerStoreCreator<NextExt & Ext, NextStateExt & StateExt>;
212

213
interface MiddlewareAPI<D extends Dispatch = Dispatch, S = any> {
214
  dispatch: D;
215
  getState(): S;
216
}
217

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

223
interface Observer<T> {
224
  next?(value: T): void;
225
}
226
```