0
# React Redux
1
2
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.
3
4
## Package Information
5
6
- **Package Name**: react-redux
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-redux`
10
11
## Core Imports
12
13
```typescript
14
import { Provider, useSelector, useDispatch, useStore } from "react-redux";
15
```
16
17
For CommonJS:
18
19
```javascript
20
const { Provider, useSelector, useDispatch, useStore } = require("react-redux");
21
```
22
23
## Basic Usage
24
25
```typescript
26
import React from "react";
27
import { Provider, useSelector, useDispatch } from "react-redux";
28
import { createStore } from "redux";
29
30
// Setup Provider at app root
31
function App() {
32
return (
33
<Provider store={store}>
34
<TodoApp />
35
</Provider>
36
);
37
}
38
39
// Use hooks in components
40
function TodoApp() {
41
const todos = useSelector((state: RootState) => state.todos);
42
const dispatch = useDispatch();
43
44
const addTodo = (text: string) => {
45
dispatch({ type: "ADD_TODO", payload: text });
46
};
47
48
return (
49
<div>
50
{todos.map((todo) => (
51
<div key={todo.id}>{todo.text}</div>
52
))}
53
<button onClick={() => addTodo("New todo")}>Add Todo</button>
54
</div>
55
);
56
}
57
```
58
59
## Architecture
60
61
React Redux is built around several key components:
62
63
- **Provider Component**: Provides Redux store to React component tree via Context
64
- **Hook System**: Modern React hooks (useSelector, useDispatch, useStore) for accessing store
65
- **Subscription Engine**: Efficient subscription management to prevent unnecessary re-renders
66
- **TypeScript Integration**: Full type safety with .withTypes() methods for pre-typed hooks
67
- **Connect HOC**: Legacy higher-order component API for class components and complex scenarios
68
- **Performance Optimizations**: Shallow equality checks and selective subscription patterns
69
70
## Capabilities
71
72
### Provider & Context
73
74
Store provider and context system for making Redux store available throughout React component tree.
75
76
```typescript { .api }
77
interface ProviderProps<A extends Action<string> = UnknownAction, S = unknown> {
78
store: Store<S, A>;
79
serverState?: S;
80
context?: Context<ReactReduxContextValue<S, A> | null>;
81
stabilityCheck?: DevModeCheckFrequency;
82
identityFunctionCheck?: DevModeCheckFrequency;
83
children: ReactNode;
84
}
85
86
function Provider<A extends Action<string> = UnknownAction, S = unknown>(
87
props: ProviderProps<A, S>
88
): JSX.Element;
89
90
const ReactReduxContext: Context<ReactReduxContextValue | null>;
91
```
92
93
### State Selection Hook
94
95
Hook for extracting data from Redux store state with automatic re-rendering when selected data changes.
96
97
```typescript { .api }
98
interface UseSelector<StateType = unknown> {
99
<TState extends StateType = StateType, Selected = unknown>(
100
selector: (state: TState) => Selected,
101
equalityFnOrOptions?: EqualityFn<Selected> | UseSelectorOptions<Selected>
102
): Selected;
103
104
withTypes: <OverrideStateType extends StateType>() => UseSelector<OverrideStateType>;
105
}
106
107
const useSelector: UseSelector;
108
109
interface UseSelectorOptions<Selected = unknown> {
110
equalityFn?: EqualityFn<Selected>;
111
devModeChecks?: Partial<DevModeChecks>;
112
}
113
```
114
115
[Hooks](./hooks.md)
116
117
### Action Dispatch Hook
118
119
Hook for accessing the Redux store's dispatch function to trigger actions.
120
121
```typescript { .api }
122
interface UseDispatch<DispatchType extends Dispatch<UnknownAction> = Dispatch<UnknownAction>> {
123
<AppDispatch extends DispatchType = DispatchType>(): AppDispatch;
124
withTypes: <OverrideDispatchType extends DispatchType>() => UseDispatch<OverrideDispatchType>;
125
}
126
127
const useDispatch: UseDispatch;
128
```
129
130
[Hooks](./hooks.md)
131
132
### Store Access Hook
133
134
Hook for accessing the Redux store instance directly.
135
136
```typescript { .api }
137
interface UseStore<StoreType extends Store> {
138
(): StoreType;
139
<StateType extends ReturnType<StoreType['getState']> = ReturnType<StoreType['getState']>,
140
ActionType extends Action = ExtractStoreActionType<Store>>(): Store<StateType, ActionType>;
141
withTypes: <OverrideStoreType extends StoreType>() => UseStore<OverrideStoreType>;
142
}
143
144
const useStore: UseStore<Store>;
145
```
146
147
[Hooks](./hooks.md)
148
149
### Higher-Order Component
150
151
Legacy API for connecting React components to Redux store using higher-order component pattern.
152
153
```typescript { .api }
154
function connect<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}, State = unknown>(
155
mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps, State>,
156
mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
157
mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
158
options?: ConnectOptions<State, TStateProps, TOwnProps, TMergedProps>
159
): InferableComponentEnhancer<TInjectedProps>;
160
```
161
162
[Connect HOC](./connect.md)
163
164
### TypeScript Integration
165
166
Pre-typed hooks and comprehensive type definitions for full TypeScript support.
167
168
```typescript { .api }
169
// Pre-typed hook creation
170
const useAppSelector = useSelector.withTypes<RootState>();
171
const useAppDispatch = useDispatch.withTypes<AppDispatch>();
172
const useAppStore = useStore.withTypes<AppStore>();
173
174
// Factory functions for custom contexts
175
function createSelectorHook<StateType = unknown>(
176
context?: Context<ReactReduxContextValue<StateType> | null>
177
): UseSelector<StateType>;
178
179
function createDispatchHook<StateType = unknown, ActionType extends Action = UnknownAction>(
180
context?: Context<ReactReduxContextValue<StateType, ActionType> | null>
181
): UseDispatch<Dispatch<ActionType>>;
182
183
function createStoreHook<StateType = unknown, ActionType extends Action = Action>(
184
context?: Context<ReactReduxContextValue<StateType, ActionType> | null>
185
): UseStore<Store<StateType, ActionType>>;
186
```
187
188
[TypeScript Integration](./typescript.md)
189
190
### Utility Functions
191
192
Helper functions for common React Redux patterns and performance optimizations.
193
194
```typescript { .api }
195
function shallowEqual(objA: any, objB: any): boolean;
196
197
// Deprecated in React 18+ - now a no-op that immediately runs callback
198
function batch(callback: () => void): void;
199
```
200
201
## Core Types
202
203
```typescript { .api }
204
type EqualityFn<T> = (a: T, b: T) => boolean;
205
206
type DevModeCheckFrequency = 'never' | 'once' | 'always';
207
208
interface DevModeChecks {
209
stabilityCheck: DevModeCheckFrequency;
210
identityFunctionCheck: DevModeCheckFrequency;
211
}
212
213
interface ReactReduxContextValue<SS = any, A extends Action<string> = UnknownAction> {
214
store: Store<SS, A>;
215
subscription: Subscription;
216
getServerState?: () => SS;
217
stabilityCheck?: DevModeCheckFrequency;
218
identityFunctionCheck?: DevModeCheckFrequency;
219
}
220
221
interface DispatchProp<A extends Action<string> = UnknownAction> {
222
dispatch: Dispatch<A>;
223
}
224
225
interface Subscription {
226
addNestedSub: (listener: () => void) => () => void;
227
notifyNestedSubs: () => void;
228
handleChangeWrapper: () => void;
229
isSubscribed: () => boolean;
230
onStateChange?: (() => void) | null;
231
trySubscribe: () => void;
232
tryUnsubscribe: () => void;
233
getListeners: () => any;
234
}
235
236
type ExtractStoreActionType<StoreType extends Store> =
237
StoreType extends Store<any, infer ActionType> ? ActionType : never;
238
```