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
```