angualr ngrx/store

1.类与行为

lsy.action.ts
export const chifan="吃饭";
export const shuijiao="睡觉";
export const xiedaima="写代码";

lsy.model.ts
export class lsy{
    constructor(
        public shou:string,
        public zui:string,
        public tou:string
    ){}
}
export const initLsy:lsy={
    shou:"力霸山兮气盖世的",
    zui:"可以吃山珍海味的",
    tou:"比爱因斯坦还聪明的"
};

2.状态转发

lsy.reducer.ts
import { Action } from '@ngrx/store';
import { lsy, initLsy } from './lsy.model';
import { chifan, shuijiao, xiedaima } from './lsy.action';

export function lsyReducer(state: lsy = initLsy, action: Action) {
  switch (action.type) {
    case chifan:
      return Object.assign({}, state, {
        zui: action['gaoshiqing']
      });
    case shuijiao:
      return Object.assign({}, state, {
        tou: action['gaoshiqing']
      });
    case xiedaima:
      return Object.assign({}, state, {
        shou: action['gaoshiqing']
      });
    default:
      return state;
  }
}

3.组件交互

lsy.component.html
<app-lsy-child title="lsy的儿子"></app-lsy-child>
<div>嘴：{{lsy.zui}}</div>
<div>头：{{lsy.tou}}</div>
<div>手：{{lsy.shou}}</div>

lsy.component.ts
import { Component, OnInit } from '@angular/core';
import { lsy } from '../lsy.model';
import { Store } from '@ngrx/store';
import { Observable, Subscription } from 'rxjs';
@Component({
  selector: 'app-lsy',
  templateUrl: './lsy.component.html',
  styleUrls: ['./lsy.component.css']
})
export class LsyComponent implements OnInit {
  tagState$: Observable<lsy>;
  private tagStateSubscription: Subscription;
  lsy: lsy;
  constructor(private store: Store<lsy>) {
    this.tagState$ = store.select('lsy');
  }
  ngOnInit() {
    this.tagStateSubscription = this.tagState$.subscribe((state) => {
      this.lsy=state;
    });
  }
}

lsy-child.component.html
<div>{{title}}</div>
嘴:<input [(ngModel)]="value1" (change)="changezui(value1)">
头:<input [(ngModel)]="value2" (change)="changeshou(value2)">
手:<input [(ngModel)]="value3" (change)="changetou(value3)">

lsy-child.component.ts
import { Component, OnInit,Input } from '@angular/core';
import { Store } from '@ngrx/store';
import { chifan, shuijiao, xiedaima } from '../../lsy.action';
import { lsy,initLsy } from '../../lsy.model';
import { observable, Observable, Subscription } from 'rxjs';

@Component({
  selector: 'app-lsy-child',
  templateUrl: './lsy-child.component.html',
  styleUrls: ['./lsy-child.component.css']
})
export class LsyChildComponent implements OnInit {
  @Input('title') title:string;
  value1="";
  value2="";
  value3="";
  tagState$: Observable<lsy>;
  private tagStateSubscription: Subscription;
  constructor(private store: Store<lsy>) { 
    this.tagState$ = store.select('lsy');
  }
  ngOnInit() {
  }
  changezui(val){
    this.store.dispatch({
      type: chifan,
      gaoshiqing:val
    });
  }
  changeshou(val){
    this.store.dispatch({
      type: shuijiao,
      gaoshiqing:val
    });
  }
  changetou(val){
    this.store.dispatch({
      type: xiedaima,
      gaoshiqing:val
    });
  }
}

4.其他配置

路由
port { LsyComponent } from '../person/lsy/lsy.component';
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'lsy',
        component: LsyComponent
      },
      {
        path: '**',
        redirectTo: '',
        pathMatch: 'full'
      }
    ])
  ],
  providers: [],
  exports: [
    RouterModule
  ]
})

app.module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './core/app.component';
import { AppRoutingModule } from './core/app-routing.module';
import { StoreModule } from '@ngrx/store';
import { FormsModule } from "@angular/forms";
import { LsyComponent } from './person/lsy/lsy.component';
import { LsyChildComponent } from './person/lsy/lsy-child/lsy-child.component';
import { lsyReducer } from './person/lsy.reducer';

@NgModule({
  declarations: [
    AppComponent,
    LsyComponent,
    LsyChildComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,    
    StoreModule.forRoot({ lsy :lsyReducer})
  ],
  providers: [],
  bootstrap: [AppComponent]
})

5.效果

1527835696050.gif