0
# Store Setup
1

2
NgRx store initialization schematic that sets up the foundational NgRx store configuration in your Angular application. It handles both root store setup and feature store configuration with proper module imports and development tools integration.
3

4
## Capabilities
5

6
### Store Schematic
7

8
Creates the initial NgRx store setup with configurable options for root or feature stores.
9

10
```bash
11
# Root store setup (application-wide)
12
ng generate @ngrx/schematics:store AppState --root
13

14
# Feature store setup
15
ng generate @ngrx/schematics:feature-store UserState --module=user
16
```
17

18
```typescript { .api }
19
/**
20
 * Store schematic configuration interface
21
 */
22
interface StoreSchema {
23
  /** Name of the state (optional for root store) */
24
  name?: string;
25
  /** Path where store files should be generated */
26
  path?: string;
27
  /** Angular project to target */
28
  project?: string;
29
  /** Generate files without creating a folder */
30
  flat?: boolean;
31
  /** When true, does not create test files */
32
  skipTests?: boolean;
33
  /** Module file to import the store into */
34
  module?: string;
35
  /** Path to the state files relative to module */
36
  statePath?: string;
37
  /** Whether this is a root store setup */
38
  root?: boolean;
39
  /** Name of the state interface (defaults to 'State') */
40
  stateInterface?: string;
41
  /** Generate minimal store setup without boilerplate */
42
  minimal?: boolean;
43
}
44
```
45

46
### Root Store Configuration
47

48
Sets up the application-wide store with StoreModule.forRoot() and optional development tools.
49

50
```typescript
51
// Generated root store module registration
52
import { StoreModule } from '@ngrx/store';
53
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
54
import { isDevMode } from '@angular/core';
55
import { reducers, metaReducers } from './state';
56

57
@NgModule({
58
  imports: [
59
    StoreModule.forRoot(reducers, { metaReducers }),
60
    isDevMode() ? StoreDevtoolsModule.instrument() : []
61
  ]
62
})
63
export class AppModule {}
64
```
65

66
**Usage Examples:**
67

68
```bash
69
# Basic root store setup
70
ng generate @ngrx/schematics:store --root --name=AppState
71

72
# Minimal root store (no boilerplate files)
73
ng generate @ngrx/schematics:store --root --minimal
74

75
# Root store with custom state interface name
76
ng generate @ngrx/schematics:store --root --stateInterface=GlobalState
77
```
78

79
### Feature Store Configuration
80

81
Sets up feature-specific stores with StoreModule.forFeature() for modular state management.
82

83
```typescript
84
// Generated feature store module registration
85
import { StoreModule } from '@ngrx/store';
86
import * as fromUser from './state';
87

88
@NgModule({
89
  imports: [
90
    StoreModule.forFeature(
91
      fromUser.userFeatureKey,
92
      fromUser.reducers,
93
      { metaReducers: fromUser.metaReducers }
94
    )
95
  ]
96
})
97
export class UserModule {}
98
```
99

100
**Usage Examples:**
101

102
```bash
103
# Feature store setup
104
ng generate @ngrx/schematics:store User --module=user/user.module.ts
105

106
# Feature store with custom path
107
ng generate @ngrx/schematics:store Product --path=src/app/catalog --module=catalog.module.ts
108
```
109

110
### Generated File Structure
111

112
The store schematic generates the following file structure:
113

114
**Root Store (--root):**
115
```
116
src/app/state/
117
├── index.ts              # Barrel exports
118
├── app.state.ts          # Root state interface
119
├── app.reducer.ts        # Root reducer map
120
└── app.effects.ts        # Root effects array
121
```
122

123
**Feature Store:**
124
```
125
src/app/feature-name/state/
126
├── index.ts              # Barrel exports
127
├── feature.state.ts      # Feature state interface
128
├── feature.reducer.ts    # Feature reducer
129
├── feature.actions.ts    # Feature actions
130
├── feature.effects.ts    # Feature effects
131
└── feature.selectors.ts  # Feature selectors
132
```
133

134
### Module Integration
135

136
The schematic automatically updates the specified module file to include the necessary imports:
137

138
```typescript { .api }
139
/**
140
 * Adds StoreModule import to the specified NgModule
141
 * @param modulePath - Path to the module file to update
142
 * @param storeConfig - Store configuration (forRoot or forFeature)
143
 * @param imports - Additional imports to add
144
 */
145
function addStoreToModule(
146
  modulePath: string,
147
  storeConfig: string,
148
  imports: string[]
149
): void;
150
```
151

152
### State Interface Generation
153

154
Creates TypeScript interfaces for type-safe state management:
155

156
```typescript
157
// Root state interface
158
export interface AppState {
159
  // Feature states will be added here
160
}
161

162
// Feature state interface
163
export interface UserState {
164
  users: User[];
165
  loading: boolean;
166
  error: string | null;
167
}
168

169
// Feature key for store registration
170
export const userFeatureKey = 'user';
171
```
172

173
### Development Tools Integration
174

175
When generating a root store, the schematic automatically includes NgRx DevTools configuration:
176

177
```typescript
178
// Generated development tools setup
179
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
180
import { isDevMode } from '@angular/core';
181

182
@NgModule({
183
  imports: [
184
    // Other imports...
185
    isDevMode() ? StoreDevtoolsModule.instrument({
186
      maxAge: 25, // Retains last 25 states
187
      logOnly: !isDevMode(), // Restrict extension to log-only mode
188
      autoPause: true, // Pauses recording actions and state changes when the extension window is not open
189
    }) : []
190
  ]
191
})
192
export class AppModule {}
193
```
194

195
### Meta Reducers Support
196

197
The schematic includes meta reducer configuration for cross-cutting concerns:
198

199
```typescript
200
// Generated meta reducers
201
import { MetaReducer } from '@ngrx/store';
202

203
export const metaReducers: MetaReducer<AppState>[] = isDevMode() ? [] : [];
204
```
205

206
### Error Handling
207

208
The store schematic includes proper error handling and validation:
209

210
- Validates that the specified module file exists
211
- Ensures proper TypeScript syntax in generated files
212
- Handles both Angular module and standalone application setups
213
- Provides helpful error messages for configuration issues