Tuesday, December 11, 2018

Set up all of the boilerplate code for Redux with Angular 7.

Per this I ran the following command line commands against an Angular 7 app.

ng add @ngrx/store
ng add @ngrx/effects
npm install @ngrx/schematics --save-dev
npm install @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/router-store --save
ng config cli.defaultCollection @ngrx/schematics
ng generate store State --root --statePath store/reducers --module app.module.ts
ng generate effect store/App --group --root --spec false --module app.module

 
 

After all that, the imports in app.module, the first-point-of-entry God module, both had some dupes and a path that was bad. I cleaned them up to this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { reducers, metaReducers } from './reducers';
import { EffectsModule } from '@ngrx/effects';
import { AppEffects } from './app.effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';

 
 

Next, I installed the Redux plugin for Google Chrome Developer Tools from here and to my dismay I saw...

No store found. Make sure to follow the instructions.

 
 

...as an error there. Per this I ran the following command to fix that:

npm install @angular-redux/store@^9

No comments:

Post a Comment