一、案例運(yùn)行后的效果圖

二、關(guān)于ngrx的認(rèn)識(shí)

1、官網(wǎng)地址

2、ngrx是借鑒redux的思維,專門為angular中定制的一個(gè)狀態(tài)管理的包,類似react中的redux、vue中的vuex,主要包括以下幾個(gè)模塊(本文先介紹@ngrx/store)

• @ngrx/store
• @ngrx/store-devtools
• @ngrx/effects
• @ngrx/router-store
• @ngrx/entity
• @ngrx/data
• @ngrx/schematics

3、需要使用ngrx的場(chǎng)景

• 在angular項(xiàng)目開(kāi)發(fā)中屬于非必須的
• 大項(xiàng)目中需要進(jìn)行組件通訊,數(shù)據(jù)共享

三、構(gòu)建項(xiàng)目

1、使用@angular/cli初始化項(xiàng)目

ng new angular-ngrx

2、創(chuàng)建一個(gè)數(shù)據(jù)的module(手動(dòng)修改名字為AppStoreModule,不然會(huì)和@ngrx/store中的重名)

ng g m store

3、在store文件夾下創(chuàng)建三個(gè)文件夾

• actions
• reducers
• selectors(非必須的,僅僅是對(duì)于一個(gè)狀態(tài)樹(shù)是對(duì)象的時(shí)候,寫一個(gè)方法選擇狀態(tài)樹(shù)中的一個(gè)節(jié)點(diǎn))

4、手動(dòng)安裝@ngrx/store

npm install @ngrx/store --save

5、手動(dòng)安裝@ngrx/store-devtools

npm install @ngrx/store-devtools --save

6、在reducers文件夾下創(chuàng)建index.ts(使用ng add @ngrx/store會(huì)默認(rèn)生成的)

import {
 ActionReducerMap,
 MetaReducer
} from '@ngrx/store';
import { environment } from '../../../environments/environment';

// 項(xiàng)目中全部的狀態(tài)
export interface State {}

// 全部的reducer函數(shù)
export const reducers: ActionReducerMap<State> = {};

export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];

7、瀏覽器要安裝redux插件

8、在store.module.ts中配置瀏覽器調(diào)試的更多配置見(jiàn)

@NgModule({
 declarations: [],
 imports: [
 StoreModule.forRoot(reducers, {
  metaReducers,
  runtimeChecks: {
  strictStateImmutability: true,
  strictActionImmutability: true,
  strictStateSerializability: true,
  strictActionSerializability: true,
  }
 }),
 StoreDevtoolsModule.instrument({
  maxAge: 20,
  logOnly: environment.production
 })
 ]
})
export class AppStoreModule { }

四、在項(xiàng)目中使用@ngrx/store

1、代碼的使用見(jiàn)github中的book組件

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。