0
# Store Management
1

2
Core store creation and management functionality for maintaining application state. The Redux store serves as the single source of truth for your application state and provides methods to read state, dispatch actions, and subscribe to changes.
3

4
## Capabilities
5

6
### Store Creation
7

8
Creates a Redux store that holds the state tree.
9

10
```typescript { .api }
11
/**
12
 * Creates a Redux store that holds the state tree.
13
 * @deprecated Use configureStore from @reduxjs/toolkit instead
14
 * @param reducer - Function that returns the next state tree
15
 * @param enhancer - Store enhancer for middleware, time travel, etc.
16
 * @returns Redux store instance
17
 */
18
function createStore<S, A extends Action, Ext extends {} = {}, StateExt extends {} = {}>(
19
  reducer: Reducer<S, A>,
20
  enhancer?: StoreEnhancer<Ext, StateExt>
21
): Store<S, A, UnknownIfNonSpecific<StateExt>> & Ext;
22

23
/**
24
 * Creates a Redux store with preloaded state
25
 * @deprecated Use configureStore from @reduxjs/toolkit instead
26
 * @param reducer - Function that returns the next state tree
27
 * @param preloadedState - Initial state
28
 * @param enhancer - Store enhancer for middleware, time travel, etc.
29
 * @returns Redux store instance
30
 */
31
function createStore<S, A extends Action, Ext extends {} = {}, StateExt extends {} = {}, PreloadedState = S>(
32
  reducer: Reducer<S, A, PreloadedState>,
33
  preloadedState?: PreloadedState | undefined,
34
  enhancer?: StoreEnhancer<Ext, StateExt>
35
): Store<S, A, UnknownIfNonSpecific<StateExt>> & Ext;
36

37
/**
38
 * Creates a Redux store with flexible parameter handling
39
 * @deprecated Use configureStore from @reduxjs/toolkit instead
40
 * @param reducer - Function that returns the next state tree
41
 * @param preloadedState - Initial state or store enhancer
42
 * @param enhancer - Store enhancer for middleware, time travel, etc.
43
 * @returns Redux store instance
44
 */
45
function createStore<S, A extends Action, Ext extends {} = {}, StateExt extends {} = {}, PreloadedState = S>(
46
  reducer: Reducer<S, A, PreloadedState>,
47
  preloadedState?: PreloadedState | StoreEnhancer<Ext, StateExt> | undefined,
48
  enhancer?: StoreEnhancer<Ext, StateExt>
49
): Store<S, A, UnknownIfNonSpecific<StateExt>> & Ext;
50
```
51

52
### Legacy Store Creation
53

54
Non-deprecated store creation function for use when not migrating to Redux Toolkit.
55

56
```typescript { .api }
57
/**
58
 * Creates a Redux store that holds the state tree (non-deprecated version)
59
 * @param reducer - Function that returns the next state tree  
60
 * @param enhancer - Store enhancer for middleware, time travel, etc.
61
 * @returns Redux store instance
62
 */
63
function legacy_createStore<S, A extends Action, Ext extends {} = {}, StateExt extends {} = {}>(
64
  reducer: Reducer<S, A>,
65
  enhancer?: StoreEnhancer<Ext, StateExt>
66
): Store<S, A, UnknownIfNonSpecific<StateExt>> & Ext;
67

68
/**
69
 * Creates a Redux store with preloaded state (non-deprecated version)
70
 * @param reducer - Function that returns the next state tree
71
 * @param preloadedState - Initial state
72
 * @param enhancer - Store enhancer for middleware, time travel, etc.
73
 * @returns Redux store instance
74
 */
75
function legacy_createStore<S, A extends Action, Ext extends {} = {}, StateExt extends {} = {}, PreloadedState = S>(
76
  reducer: Reducer<S, A, PreloadedState>,
77
  preloadedState?: PreloadedState | undefined,
78
  enhancer?: StoreEnhancer<Ext, StateExt>
79
): Store<S, A, UnknownIfNonSpecific<StateExt>> & Ext;
80

81
/**
82
 * Creates a Redux store with flexible parameter handling (non-deprecated version)
83
 * @param reducer - Function that returns the next state tree
84
 * @param preloadedState - Initial state or store enhancer
85
 * @param enhancer - Store enhancer for middleware, time travel, etc.
86
 * @returns Redux store instance
87
 */
88
function legacy_createStore<S, A extends Action, Ext extends {} = {}, StateExt extends {} = {}, PreloadedState = S>(
89
  reducer: Reducer<S, A>,
90
  preloadedState?: PreloadedState | StoreEnhancer<Ext, StateExt> | undefined,
91
  enhancer?: StoreEnhancer<Ext, StateExt>
92
): Store<S, A, UnknownIfNonSpecific<StateExt>> & Ext;
93
```
94

95
**Usage Examples:**
96

97
```typescript
98
import { legacy_createStore as createStore } from "redux";
99

100
// Basic store creation
101
const store = createStore(rootReducer);
102

103
// Store with preloaded state
104
const initialState = { count: 5 };
105
const store = createStore(rootReducer, initialState);
106

107
// Store with enhancer (middleware)
108
const store = createStore(rootReducer, applyMiddleware(thunk, logger));
109

110
// Store with preloaded state and enhancer
111
const store = createStore(rootReducer, initialState, applyMiddleware(thunk));
112
```
113

114
### Store Interface
115

116
The Store interface defines the core methods available on Redux store instances.
117

118
```typescript { .api }
119
interface Store<S = any, A extends Action = UnknownAction, StateExt extends unknown = unknown> {
120
  /** Dispatches an action to trigger state changes */
121
  dispatch: Dispatch<A>;
122
  /** Returns the current state tree */
123
  getState(): S & StateExt;
124
  /** Adds a change listener that gets called on every dispatch */
125
  subscribe(listener: ListenerCallback): Unsubscribe;
126
  /** Replaces the reducer currently used by the store */
127
  replaceReducer(nextReducer: Reducer<S, A>): void;
128
  /** Observable/reactive libraries interoperability point */
129
  [Symbol.observable](): Observable<S & StateExt>;
130
}
131
```
132

133
### Dispatch Method
134

135
Dispatches actions to trigger state changes. This is the only way to trigger a state change in Redux.
136

137
```typescript { .api }
138
interface Dispatch<A extends Action = UnknownAction> {
139
  <T extends A>(action: T, ...extraArgs: any[]): T;
140
}
141
```
142

143
**Usage Examples:**
144

145
```typescript
146
// Basic action dispatch
147
store.dispatch({ type: "INCREMENT" });
148

149
// Action with payload
150
store.dispatch({ type: "ADD_TODO", payload: { text: "Learn Redux" } });
151

152
// Using action creator
153
const increment = () => ({ type: "INCREMENT" });
154
store.dispatch(increment());
155
```
156

157
### State Reading
158

159
Get the current state tree from the store.
160

161
```typescript { .api }
162
/**
163
 * Reads the current state tree managed by the store
164
 * @returns The current state tree of your application
165
 */
166
getState(): S & StateExt;
167
```
168

169
**Usage Examples:**
170

171
```typescript
172
// Get current state
173
const currentState = store.getState();
174
console.log(currentState);
175

176
// Use in component
177
const mapStateToProps = (state) => ({
178
  count: state.counter,
179
  todos: state.todos
180
});
181
```
182

183
### Subscription Management
184

185
Subscribe to store changes and manage listeners.
186

187
```typescript { .api }
188
/**
189
 * Adds a change listener called on every dispatch
190
 * @param listener - Callback to be invoked on every dispatch
191
 * @returns Function to remove this change listener
192
 */
193
subscribe(listener: ListenerCallback): Unsubscribe;
194

195
type ListenerCallback = () => void;
196

197
interface Unsubscribe {
198
  (): void;
199
}
200
```
201

202
**Usage Examples:**
203

204
```typescript
205
// Subscribe to store changes
206
const unsubscribe = store.subscribe(() => {
207
  console.log("State changed:", store.getState());
208
});
209

210
// Unsubscribe when no longer needed
211
unsubscribe();
212

213
// Multiple subscribers
214
const unsubscribe1 = store.subscribe(() => updateUI());
215
const unsubscribe2 = store.subscribe(() => logChanges());
216
```
217

218
### Reducer Replacement
219

220
Replace the reducer currently used by the store, useful for code splitting and hot reloading.
221

222
```typescript { .api }
223
/**
224
 * Replaces the reducer currently used by the store to calculate the state
225
 * @param nextReducer - The reducer for the store to use instead
226
 */
227
replaceReducer(nextReducer: Reducer<S, A>): void;
228
```
229

230
**Usage Examples:**
231

232
```typescript
233
// Hot module replacement
234
if (module.hot) {
235
  module.hot.accept("./reducers", () => {
236
    const nextRootReducer = require("./reducers").default;
237
    store.replaceReducer(nextRootReducer);
238
  });
239
}
240

241
// Dynamic reducer loading
242
const loadNewReducer = async () => {
243
  const newReducer = await import("./newReducer");
244
  store.replaceReducer(newReducer.default);
245
};
246
```
247

248
### Observable Support
249

250
Redux stores implement the Observable pattern for reactive programming integration.
251

252
```typescript { .api }
253
/**
254
 * Interoperability point for observable/reactive libraries
255
 * @returns A minimal observable of state changes
256
 */
257
[Symbol.observable](): Observable<S & StateExt>;
258

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

264
interface Observer<T> {
265
  next?(value: T): void;
266
}
267
```
268

269
**Usage Examples:**
270

271
```typescript
272
import { from } from "rxjs";
273

274
// Convert store to observable
275
const store$ = from(store);
276

277
// Subscribe to state changes with RxJS
278
store$.subscribe(state => {
279
  console.log("New state:", state);
280
});
281
```
282

283
## Store Types
284

285
```typescript { .api }
286
type UnknownIfNonSpecific<T> = {} extends T ? unknown : T;
287

288
type StoreCreator = {
289
  <S, A extends Action, Ext extends {} = {}, StateExt extends {} = {}>(
290
    reducer: Reducer<S, A>,
291
    enhancer?: StoreEnhancer<Ext, StateExt>
292
  ): Store<S, A, UnknownIfNonSpecific<StateExt>> & Ext;
293
  
294
  <S, A extends Action, Ext extends {} = {}, StateExt extends {} = {}, PreloadedState = S>(
295
    reducer: Reducer<S, A, PreloadedState>,
296
    preloadedState?: PreloadedState | undefined,
297
    enhancer?: StoreEnhancer<Ext>
298
  ): Store<S, A, UnknownIfNonSpecific<StateExt>> & Ext;
299
};
300

301
type StoreEnhancer<Ext extends {} = {}, StateExt extends {} = {}> = <
302
  NextExt extends {},
303
  NextStateExt extends {}
304
>(
305
  next: StoreEnhancerStoreCreator<NextExt, NextStateExt>
306
) => StoreEnhancerStoreCreator<NextExt & Ext, NextStateExt & StateExt>;
307

308
type StoreEnhancerStoreCreator<Ext extends {} = {}, StateExt extends {} = {}> = <
309
  S,
310
  A extends Action,
311
  PreloadedState
312
>(
313
  reducer: Reducer<S, A, PreloadedState>,
314
  preloadedState?: PreloadedState | undefined
315
) => Store<S, A, StateExt> & Ext;
316
```