Action:
Action是狀態(tài)的改變。它描述了某個事件的發(fā)生，但是沒有指定應(yīng)用的狀態(tài)如何改變。

Store:
它提供了Store.select()和Store.dispatch()來與reducer協(xié)同工作。Store.select()用于選擇一個selector，
Store.dispatch(
{
type:‘a(chǎn)dd’,
payload:{name:‘111’}
}
)
用于向reducer分發(fā)action的類型。

@NgRx/Store 狀態(tài)管理的三個原則

首先，@NgRx/Store 同樣遵守 Redux 的三個基本原則：

單一數(shù)據(jù)源

這個原則是整個單頁應(yīng)用的狀態(tài)通過object tree（對象樹）的形式存儲在store 里面。
這個定義十分抽象其實就是把所有需要共享的數(shù)據(jù)通過javascript 對象的形式存儲下來

state ={
    application:'angular app',
    shoppingList:['apple', 'pear']
}

state is read-only(狀態(tài)只能是只讀形式)

這個 ngrx/store 核心之一就是用戶不能直接修改狀態(tài)內(nèi)容。 舉個例子，如果我們需要保存了登錄頁面狀態(tài)，狀態(tài)信息需要記錄登錄用戶的名字。 當?shù)卿浢指淖?，我們不能直接修改狀態(tài)保存的用戶名字

state={'username':'kat'},
//用戶重新登錄別的賬戶為tom
state.username = 'tom'  //在ngrx store 這個行為是絕對不允許的

changes are made with pure functions（只能通過調(diào)用函數(shù)來改變狀態(tài)）

由于不能直接需改狀態(tài)，ngrx/store 同時引入了一個叫做reducer（聚合器）的概念。通過reducer 來修改狀態(tài)。

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/store

2. 創(chuàng)建 state, action, reducer

state 狀態(tài)：
app\\\\store\\\\state.ts

//下面是使用接口的情況， 更規(guī)范
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;
  // 如果要管理多個狀態(tài),在這個接口中添加即可
}

//這個是不用接口的情況
// export interface AppState {
//     count: number;
//     todos: any;
//     // 如果要管理多個狀態(tài),在這個接口中添加即可
//   }

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被派發(fā)時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分離出來如何處理？

3. 注冊store

根模塊：
app/app.module.ts

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
// StoreModule: StoreModule是@ngrx/storeAPI中的一個模塊，
// 它被用來在應(yīng)用模塊中配置reducer。

import {counterReducer} from './store/reducer';

@NgModule({
  imports: [
  	StoreModule.forRoot({ count: counterReducer }), // 注冊store
  ],
})
export class AppModule {}

4. 使用store

在組件或服務(wù)中注入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狀態(tài)流
  }

  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>

這里使用了 管道符 async, 在子模塊里直接使用快報錯 ， 如果在子模塊要實現(xiàn) 數(shù)據(jù)的雙向綁定也會報錯，具體原因參照 課件說明的 問題： The pipe ‘a(chǎn)sync’ could not be found？

如何做到在模板頁面中不使用管道 來渲染頁面 ？

修改如下：

count: Observable<number>;

constructor(private store: Store<AppState>) { // 注入store
    var stream = store.pipe(select('count')); 
    // 從app.module.ts中獲取count狀態(tài)流
    stream.subscribe((res)=>{
          this.count = res;
      })
  }

為了管理方便， 一般會把 type , state, actions,reducers 分開來管理

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 }
    }
}

// 就只這樣導(dǎo)出是不行的
// export function Add1(){
//     return { type: INCREMENT }
// }

在根模塊 app.module.ts 注冊

import {CounterAction} from './store/actions';

... 

providers: [CounterAction],

在組件中使用 – article.component.ts

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()); 
    
  }
}

更多編程相關(guān)知識，可訪問：編程入門?。?/p>

更多關(guān)于云服務(wù)器，域名注冊，虛擬主機的問題，請訪問西部數(shù)碼官網(wǎng)：m.youyuetrip.com





猜你還會喜歡下面的內(nèi)容

• 做一個獨立站需要多少錢
• 西部數(shù)碼怎樣搶注域名
• B2C 電子商務(wù)網(wǎng)站如何做推廣和優(yōu)化
• 網(wǎng)站推廣增加外鏈最好的方法
• 新手站長淺談：如何在線提升產(chǎn)品轉(zhuǎn)化率
• 網(wǎng)站策劃：九大思維理念助你策劃能力提升
• 如何高效輸出移動app產(chǎn)品原型？
• 為什么說產(chǎn)品思考是進行用戶體驗設(shè)計時所不可或缺的？
• 六套 App：構(gòu)建我的產(chǎn)品設(shè)計工作流
• 如果Vine模式重來，大概就是Biu這個樣子
• 新手入門：如何做需求分析
• 產(chǎn)品狗的日常：如何更好的去分解功能點
• 簡單明了丨如何寫出好的PRD
• 產(chǎn)品必修課——輕松搞定UML
• 如果你是個苦逼的App測試人員，這款產(chǎn)品或許能拯救你
• 手把手教你制作實用美觀的交互設(shè)計文檔

熱門標簽

其他問題云服務(wù)器問題域名及賬戶問題企業(yè)郵局市場咨詢云服務(wù)器云建站/云站群/小程序虛擬主機網(wǎng)絡(luò)知識企業(yè)郵箱域名注冊域名備案域名商標注冊云主機更多標簽...

大家感興趣的內(nèi)容