ngrx学习笔记
什么是ngrx
ngrx是Angular基于Rxjs的狀態管理，保存了Redux的核心概念，并使用RxJs擴展的Redux實現。使用Observable來簡化監聽事件和訂閱等操作。
在看這篇文章之前，已經假設你已了解rxjs和redux。
有條件的話請查看官方文檔進行學習理解。
所需包
ng add方式，會自動生成所需文件并在app.module.ts中導入，直接啟動項目即可，不報錯
?
Angular的流程
compone.ts定義變量a
改變a
(沒有數據請求的) this.a = '';
(有數據請求的) this.a = this.services.search()類似的寫法
用ngrx后的Angular的基本流程
寫action.ts：為要改變數據的操作定義不同action
寫effects.ts（有數據請求的）：通過判斷action.type，來發起service
寫reducer.ts：判斷action.type，返回新的store數據
component.ts：從store取數據
最后，告訴應用程序，你寫了這玩意
項目簡介
本項目的兩個demo，都掛在example模塊中
計數器-沒有數據請求 app/example/container/counter.component.ts
1、先寫action（減和重置的action在代碼里面，可自行查看）
?
2、寫reducer（由于加不需要發送網絡請求，就不寫effect）
// app/example/reducer/counter.reducer.ts import * as counter from '../actions/counter.actions'; // 定義接口，后續counter頁面如果有其他數據要保存，可以在這個State里面繼續添加，不要忘記在initialState也要加 export interface State {counter: number; } // 定義初始化數據 const initialState: State = {counter: 0 }; // 定義reducer 根據action type來處理狀態，改變對應數據 export function reducer(state = initialState, action: counter.Actions): State {switch (action.type) {case counter.INCREMENT: return {counter: state.counter + 1};default:return { ...state };} }export const getCounter = (state: State) => state.counter; // app/example/reducer/index.ts import {createFeatureSelector, createSelector} from '@ngrx/store';// 第二步 導入我們的reducer文件 import * as fromCounter from './counter.reducer';export interface State {counter: fromCounter.State; } export const reducers = {counter: fromCounter.reducer };// 將模塊example的所有數據掛在store上，命名為example，里面保存example模塊里面所有頁面的數據 export const getExampleState = createFeatureSelector<State>('example');// 計數器頁面 export const getCounterState = createSelector(getExampleState, (state: State) => state.counter); export const getCounterCounter = createSelector(getCounterState, fromCounter.getCounter);3、在模塊中導入reduecer，這樣就可以運行
// app/example/example.module.tsimport {StoreModule} from '@ngrx/store'; import {reducers} from './reducer'; @NgModule({imports: [StoreModule.forFeature('example', reducers) // 這個才是關鍵哦] }) export class ExampleModule { }4、到這一步了，我們的頁面就來操作并且取數據，增加啦
// src/example/container/counter.component.tsimport * as fromExample from '../../reducer'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs'; import * as counterAction from '../../actions/counter.actions';export class CounterComponent {counter$: Observable<number>;constructor(private store: Store<fromExample.State>) {this.counter$ = store.select(fromExample.getCounterCounter);}increment() {this.store.dispatch(new counterAction.IncrementAction());} }頁面
// app/example/container/counter.component.html <div class="container"><p class="title">計數器 沒有數據請求的ngrx demo</p><div class="btn-group"><button nz-button nzType="primary" (click)="increment()">加</button><span style="font-size: 18px;font-weight: bold">當前數：{{counter$ | async}}</span></div> </div>npm run start看一下頁面效果吧
搜索圖書-有數據請求的 src/app/example/containers/book-manage/book-manage.component.ts
1、寫action （src/app/example/actions/book-manage.actions.ts）看注釋
2、寫reducer（src/app/example/reducer/book-manage.reducer.ts）
import * as bookManage from '../actions/book-manage.actions'; import {Book} from '../model/book'; // book-manage頁面我們暫時定義一個list變量，用了存搜索圖書的結果，后續如果有其他變量，繼續在里面加 export interface State {list: Book[]; } // 默認一開始搜索數據為空數組[] const initialState: State = {list: [] }; // 當搜索成功后，更新state里面的list值 export function reducer(state = initialState, action: bookManage.Actions): State {switch (action.type) {case bookManage.SEARCH_COMPLETE:return {...state,list: action.payload};default:return { ...state };} }export const getList = (state: State) => state.list;3、更新reducer （src/app/example/reducer/index.ts）
import {createFeatureSelector, createSelector} from '@ngrx/store'; import * as fromCounter from './counter.reducer'; // 導入寫好的book-manage.reducer.ts import * as fromBookManage from './book-manage.reducer'; export interface State {counter: fromCounter.State;bookManage: fromBookManage.State; } export const reducers = {counter: fromCounter.reducer,bookManage: fromBookManage.reducer }; export const getExampleState = createFeatureSelector<State>('example'); // 計數器 export const getCounterState = createSelector(getExampleState, (state: State) => state.counter); export const getCounterCounter = createSelector(getCounterState, fromCounter.getCounter); // 圖書管理 export const getBookManageState = createSelector(getExampleState, (state: State) => state.bookManage); export const getBookManageList = createSelector(getBookManageState, fromBookManage.getList);4、寫effect，檢測action類型，如果是search圖書行為，就發送網絡請求查結果（src/app/example/effects/book-manage.effect.ts）
import {Injectable} from '@angular/core'; import {Actions, Effect, ofType} from '@ngrx/effects'; import {Observable, of} from 'rxjs'; import {Action} from '@ngrx/store';import * as bookManage from '../actions/book-manage.actions'; import {BookManageService} from '../services/book-manage.service'; import {catchError, debounceTime, map, mergeMap, skip, takeUntil} from 'rxjs/operators'; import {BookResult} from '../model/book';@Injectable() export class BookManageEffects {@Effect()searchBook$: Observable<Action> = this.actions$.pipe(ofType(bookManage.SEARCH), // 判斷是不是搜索圖書的行為debounceTime(300), // 做延遲，節省網絡請求mergeMap((action: bookManage.SearchAction) => {const nextSearch$ = this.actions$.pipe(ofType(bookManage.SEARCH), skip(1));return this.service.searchBooks(action.payload).pipe(takeUntil(nextSearch$),// 如果搜索成功，發送成功action并且帶入搜索結果map((data: BookResult) => ({type: bookManage.SEARCH_COMPLETE, payload: data.items})),// 如果搜索失敗404之類的原因，發送成功action，以及空數組更新結果catchError(() => of({type: bookManage.SEARCH_COMPLETE, payload: []})));}));constructor(private actions$: Actions, private service: BookManageService) {} }5、component獲取搜索結果和綁定搜索事件（src/app/example/containers/book-manage/book-manage.component.ts）
import { Component, OnInit } from '@angular/core'; import {Store} from '@ngrx/store'; import * as fromExample from '../../reducer'; import * as bookManageAction from '../../actions/book-manage.actions'; import {Observable} from 'rxjs'; import {Book} from '../../model/book'; @Component({selector: 'app-book-manage',templateUrl: './book-manage.component.html',styleUrls: ['./book-manage.component.css'] }) export class BookManageComponent implements OnInit {searchResult$: Observable<Book[]>; // 搜索到的圖書列表constructor(private store: Store<fromExample.State>) {// 從store中選取圖書搜索結果this.searchResult$ = this.store.select(fromExample.getBookManageList);}ngOnInit() {}// 發送搜索行為search(bookName) {this.store.dispatch(new bookManageAction.SearchAction(bookName));}}頁面（src/app/example/containers/book-manage/book-manage.component.html）
<div class="container"><app-search-input (search)="search($event)"></app-search-input><app-book-list [bookList]="searchResult$ | async"></app-book-list> </div>6、導入effect，否則會不起作用哦 （src/app/example/example.module.ts）
... import {BookManageEffects} from './effects/book-manage.effect'; import {EffectsModule} from '@ngrx/effects';@NgModule({...imports: [EffectsModule.forFeature([BookManageEffects]),],ngrx 入門_霞霞的博客的博客-CSDN博客_ngrx文檔
總結
