he-ngrx-article-snippets

app.module-2.ts

EffectsModule.forRoot([])

counter.actions.ts

import { createAction, props } from '@ngrx/store';
 
export const increment = createAction(
 '[Counter] Increment',
 props<{ payload: number }>()
);
 
export const decrement = createAction(
 '[Counter] Decrement',
 props<{ payload: number }>()
);

counter.component-2.ts

constructor(private store: Store) {
  // Vorher   
  this.count = this.store.pipe(
     select((state: any) => state.counter.count)
   );
  // Nachher
  this.count = this.store.pipe(select(count));
}

counter.component.ts

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { decrement, increment } from './store/counter.actions';
 
@Component({
 selector: 'app-counter',
 template: `
   <strong>{{ count | async }}</strong>
   <button (click)="increment(1)">Increment</button>
   <button (click)="decrement(1)">Decrement</button>
 `
})
export class CounterComponent {
 count: Observable<number>;
 
 constructor(private store: Store) {
   this.count = this.store.pipe(
     select((state: any) => state.counter.count)
   );
 }
 
 increment(payload: number) {
   this.store.dispatch(increment({ payload }));
 }
 decrement(payload: number) {
   this.store.dispatch(decrement({ payload }));
 }
}

counter.effects.ts

@Injectable()
export class CounterEffects {
 randomAdd = createEffect(() =>
   this.actions.pipe(
     ofType(randomAdd),
     concatMap(() =>
       randomizedNumber().pipe(
         map(value => add({ payload: { value } })),
         catchError(message => of(logInfo(message)))
       )
     )
   )
 );
 
 constructor(private actions: Actions) {}
}

counter.module-2.ts

EffectsModule.forFeature([CounterEffects])

counter.module.ts

import { StoreModule } from '@ngrx/store';
import * as fromCounter from './store/counter.reducer';
 
// … @NgModule Definition
 
StoreModule.forFeature(
  fromCounter.counterFeatureKey,
  fromCounter.reducer
)

counter.reducer.ts

import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './counter.actions';
 
export const initialState: State = {
 count: 0
};
 
export const reducer = createReducer(
 initialState,
 
 on(increment, (state, { payload }) => ({
   ...state,
   count: state.count + payload
 })),
 
 on(decrement, (state, { payload }) => ({
   ...state,
   count: state.count - payload
 }))
);

counter.selectors.ts

import { createFeatureSelector, createSelector } from '@ngrx/store';
import * as fromCounter from './counter.reducer';
 
export const counterState = createFeatureSelector<fromCounter.State> (
  fromCounter.counterFeatureKey
);
 
export const count = createSelector(
  counterState,
  state => state.count
);

daten-aus-dem-store-lesen.ts

this.store.subscribe(state => {
  console.log('Counter', state.counter.count);
  console.log('Log Messages', state.log.infos);
});

effect-das-versenden-einer-action-deaktivieren.ts

 randomAdd = createEffect(() =>
   this.actions.pipe(...),
   { dispatch: false }
 );

einsatz-des-entity-adapters.ts

import { createEntityAdapter, ... } from '@ngrx/store';
 
export const adapter = createEntityAdapter<Message>();
 
export const loggerReducer = createReducer(
 adapter.getInitialState(),
 on(logInfo, (state, { payload }) => adapter.addOne(payload, state))
);

entity-adapter-vorbereitete-selektorenb-bereit-zum-einsatz.ts

import { adapter } from './logger.reducer';
 
export const loggerFeatureKey = 'logger';
 
const featureLogger = createFeatureSelector<LoggerState>(loggerFeatureKey);
 
export const {
 selectAll,
 selectTotal,
 selectEntities,
 selectIds
} = adapter.getSelectors(featureLogger);

ngrx-building-blocks-in-einem-feature-module.ascii

counter/
┣ store/
┃ ┣ counter.actions.spec.ts
┃ ┣ counter.actions.ts
┃ ┣ counter.effects.spec.ts
┃ ┣ counter.effects.ts
┃ ┣ counter.reducer.spec.ts
┃ ┣ counter.reducer.ts
┃ ┣ counter.selectors.spec.ts
┃ ┗ counter.selectors.ts
┣ counter.component.ts
┗ counter.module.ts

reducer-funktion-initial-state.ts

const initialState: State = { count: 0 };
 
function counterReducer(
  state = initialState, 
  action: Action
): State {
  // switch-case action.type ...
}

reducer-funktion.ts

function counterReducer(state: State, action: Action): State {
 switch (action.type) {
   case '[Counter] Add':
       return { 
         ...state,
         count: state.count + action.payload 
       };
   default: return state;
 }
}

reducer-funktionen-registrieren.ts

StoreModule.forRoot({ 
  counter: counterReducer,
  log: logReducer
})

redux-dev-tools-registrierung-in-app.module.ts

!environment.production 
   ? StoreDevtoolsModule.instrument() 
   : []

redux.action.ts

const action = {
  type: '[Counter] Add',
  payload: 3
}

service-composition-in-der-component.ts

@Component({/*... */})
export class ListComponent {
 constructor(
   private route: ActivatedRoute,
   private userService: UserService,
   private shoppingService: ShoppingService,
   private invoiceService: InvoiceService,
 ) {}
}

setup-des-ngrx-stores-im-app-module.ts

StoreModule.forRoot(reducers, {
   metaReducers,
   runtimeChecks: {
     strictStateImmutability: true,
     strictActionImmutability: true,
   }
 })

state-mithilfe-von-entity-state<T>-definieren.ts

import { EntityState } from '@ngrx/entity';
 
export interface Message {
   id: string;
   text: string;
 }
 
export interface LoggerState extends EntityState<Message> {}

State-object-einfaches-beispiel.ts

{
  counter: {
    count: 0
  },
  log: {
    infos: []
  }
}

state-object-verwendung-von-features.ts

{
  featureA: { ... },
  featureB: { ... }
}

stream-zur-verarbeitung-eines-seiteneffekts

storeActions.pipe(
  filter(action => action.type === 'Initiate'),
  switchMap(action => apiCall.execute(action.payload)),
  map(result => store.dispatch({
    type: 'Success', payload: result
  })),
  catchError(err => store.dispatch({
    type: 'ERROR', payload: err.message
  }))
)

versand-einer-redux-action.ts

@Component({ /* ... */ })
export class CounterComponent {
   constructor(private store: Store<State>) {}
 
   add(count: number) {
       this.store.dispatch({
           type: '[Counter] Add',
           payload: count
       })
   }
}