首先自然是安装相关包

yarn add @ngrx/store

定义statu.ts

export interface TaskList {id: number;text: string;completed: boolean;
}//初始状态
export const initCount = 0;   //state export const TASKSAll: TaskList[] = [{ id: 1, text: 'C#', completed: false },{ id: 2, text: '.net', completed: false }
]export interface AppState {count: number;todos: TaskList;
}

定义reducer.ts

import { Action } from '@ngrx/store';import { TASKSAll, initCount } from './state';// reducer定义了action被派发时state的具体改变方式
export function counterReducer(state: number = initCount, action: Action) {switch (action.type) {case 'INCREMENT':return state + 1;case 'DECREMENT':return state - 1;case 'RESET':return 0;default:return state;}
}// reducer定义了action被派发时state的具体改变方式export const todoReducer = (state = TASKSAll, action) => {switch (action.type) {case 'ADD_TODO':const { id, text } = action.payload;return [...state, {id,text,completed: false}];case 'TOGGLE_TODO':return state.map(todo =>(todo.id === action.payload.id)? { ...todo, completed: !todo.completed }: todo)default:return state;}
}

在app.module.ts导入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { StoreModule } from '@ngrx/store';
import {counterReducer,todoReducer} from './store/reducer';
import {FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {UserModule} from './module/user/user.module';
@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule,UserModule,FormsModule,StoreModule.forRoot({count:counterReducer,todos:todoReducer})//注册store],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

在组件中使用

import { Component, OnInit } from '@angular/core';
import { select, Store } from '@ngrx/store';// interface AppState {
//   count:number
// }import { AppState } from '../../store/state';
@Component({selector: 'app-article',templateUrl: './article.component.html',styleUrls: ['./article.component.less']
})export class ArticleComponent implements OnInit {count: any;todolist: any;mytask: string = 'oppp';constructor(private store: Store<AppState>) {var stream = store.pipe(select('count'));var streamto = store.pipe(select('todos'));stream.subscribe((res) => {console.log(res)this.count = res;})streamto.subscribe((res) => {this.todolist = res;})}  //注入storengOnInit(): void {}increment() {this.store.dispatch({type: 'INCREMENT',payload: {test: 4}})}decrement() {this.store.dispatch({type: 'DECREMENT',payload: {test: 1}})}reset() {this.store.dispatch({type: 'RESET',payload: {test: 1}})}addTask() {this.store.dispatch({type: 'ADD_TODO',payload: { id: 10, text: 'vue', completed: false }})}
}

<div class="state"><button type="button" (click)='increment()'>增加count</button><div>current count: <!-- {{count | async}} -->{{count}}</div><button type="button" (click)='decrement()'>减少count</button>
</div>todolist:
{{todolist | json}}<ul><li *ngFor="let item of todolist">{{item.text}}</li>
</ul>新增：
<input type="text" [(ngModel)]="mytask">
<button type="button" (click)='addTask()'>新增任务</button>