本篇文章跟大家介紹一下Angular ngrx/store狀態管理的使用。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
相關教學推薦：《angular教學》
Angular中使用ngrx做狀態管理
簡介
ngrx/store的靈感來自Redux，是一款整合RxJS的Angular狀態管理庫，由Angular的佈道者Rob Wormald開發。它和Redux的核心思想相同，但使用RxJS實現觀察者模式。它遵循Redux核心原則，但專門為Angular而設計。
Angular中的狀態管理大部分可以被service接管,那麼在一些中大型的專案中,這樣做的弊端就會顯露出來,其中之一就是狀態流混亂,不利於後期維護,後來便藉鑒了redux的狀態管理模式並配上rxjs串流程式設計的特點形成了@ngrx/store這麼一個作用於Angular的狀態管理工具.
StoreModule:
StoreModule是@ngrx/store API中的一個模組，它被用來在應用程式模組中配置reducer。
Action:
Action是狀態的改變。它描述了某個事件的發生，但是沒有指定應用的狀態如何改變。
Store:
它提供了Store.select()和Store.dispatch()來與reducer協同工作。 Store.select()用來選擇一個selector，
Store.dispatch(
{
type:'add',
payload:{name:'111'}
}
)
用來向reducer分發action的類型。
@NgRx/Store 狀態管理的三個原則
首先，@NgRx/Store 同樣遵守Redux 的三個基本原則：
這個原則是整個單頁應用的狀態透過object tree（物件樹）的形式儲存在store 裡面。
這個定義十分抽像其實就是把所有需要共享的資料透過javascript 物件的形式儲存下來
state =
{
application:'angular app',
shoppingList:['apple', 'pear']
}#這個ngrx/store 核心之一就是使用者不能直接修改狀態內容。舉個例子，如果我們需要儲存了登入頁面狀態，狀態資訊需要記錄登入使用者的名字。當登入名字改變，我們不能直接修改狀態保存的使用者名字
state={'username':'kat'},
//用户重新登录别的账户为tom
state.username = 'tom' //在ngrx store 这个行为是绝对不允许的由於不能直接需改狀態，ngrx/store 同時引進了一個叫做reducer（聚合器）的概念。透過reducer 來修改狀態。
function reducer(state = 'SHOW_ALL', action) {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return Object.assign({}, state ,newObj);
default:
return state
}
}ngrx/store使用實例
#1.安裝@ngrx/store
##yarn add @ngrx/store2. 建立state, action, reducer
state 狀態： app\store\state.ts
//下面是使用接口的情况， 更规范
export interface TaskList {
id: number;
text: string;
complete: boolean;
}
export const TASKSAll: TaskList[] = [
{id: 1, text: 'Java Article 1', complete: false},
{id: 2, text: 'Java Article 2', complete: false}
]
export interface AppState {
count: number;
todos: TaskList;
// 如果要管理多个状态,在这个接口中添加即可
}
//这个是不用接口的情况
// export interface AppState {
// count: number;
// todos: any;
// // 如果要管理多个状态,在这个接口中添加即可
// }reducer app\store\reducer.ts
// reducer.ts,一般需要将state,action,reducer进行文件拆分
import { Action } from '@ngrx/store';
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';
const initialState = 0;
// reducer定义了action被派发时state的具体改变方式
export function counterReducer(state: number = initialState, action: Action) {
switch (action.type) {
case INCREMENT:
return state + 1;
case DECREMENT:
return state - 1;
case RESET:
return 0;
default:
return state;
}
}actions##如果需要把action 單獨提取出來， 參考後面的
5 如果想把action分離出來如何處理？根模組：
app/app.module.tsimport { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
// StoreModule: StoreModule是@ngrx/storeAPI中的一个模块，
// 它被用来在应用模块中配置reducer。
import {counterReducer} from './store/reducer';
@NgModule({
imports: [
StoreModule.forRoot({ count: counterReducer }), // 注册store
],
})
export class AppModule {}在元件或服務中註入store進行使用
以app\module\article\article.component.ts 元件為例:
// 组件级别
import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { INCREMENT, DECREMENT, RESET} from '../../store/reducer';
interface AppState {
count: number;
}
@Component({
selector: 'app-article',
templateUrl: './article.component.html',
styleUrls: ['./article.component.css']
})
export class ArticleComponent {
count: Observable<number>;
constructor(private store: Store<AppState>) { // 注入store
this.count = store.pipe(select('count'));
// 从app.module.ts中获取count状态流
}
increment() {
this.store.dispatch({ type: INCREMENT });
}
decrement() {
this.store.dispatch({ type: DECREMENT });
}
reset() {
this.store.dispatch({ type: RESET });
}
}範本頁面：
app\module\article\article.component.html<div class="state-count">
<button (click)="increment()">增加Increment</button>
<div>Current Count: {{ count | async }}</div>
<button (click)="decrement()">减少Decrement</button>
<button (click)="reset()">Reset Counter</button>
</div>修改如下：
count: Observable<number>;
constructor(private store: Store<AppState>) { // 注入store
var stream = store.pipe(select('count'));
// 从app.module.ts中获取count状态流
stream.subscribe((res)=>{
this.count = res;
})
}5 如果想把action分離出來如何處理？
新建\app\store\actions.ts 檔案
import { Injectable } from '@angular/core';
import { INCREMENT, DECREMENT, RESET } from './types';
@Injectable()
export class CounterAction{
// Add=function(){}
Add(){
return { type: INCREMENT }
}
}
// 就只这样导出是不行的
// export function Add1(){
// return { type: INCREMENT }
// }import {CounterAction} from './store/actions';
...
providers: [CounterAction],import {CounterAction} from '../../store/actions';
export class ArticleComponent implements OnInit {
constructor(
private action: CounterAction //注入CounterAction
) { }
increment() {
// this.store.dispatch({ type: INCREMENT });
//把 actions分离出去
this.store.dispatch(this.action.Add());
}
}以上是Angular使用ngrx/store做狀態管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
