快捷導(dǎo)航

angular8和ngrx8結(jié)合使用的步驟介紹

更新時間：2019年12月01日 15:42:25 作者：水痕001

這篇文章主要給大家介紹了關(guān)于angular8和ngrx8結(jié)合使用的詳細(xì)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用angular8具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

一、案例運行后的效果圖

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

1、官網(wǎng)地址

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

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

3、需要使用ngrx的場景

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

三、構(gòu)建項目

1、使用@angular/cli初始化項目

ng new angular-ngrx

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

ng g m store

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

actions
reducers
selectors(非必須的,僅僅是對于一個狀態(tài)樹是對象的時候,寫一個方法選擇狀態(tài)樹中的一個節(jié)點)

4、手動安裝@ngrx/store

npm install @ngrx/store --save

5、手動安裝@ngrx/store-devtools

npm install @ngrx/store-devtools --save

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

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

// 項目中全部的狀態(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)試的更多配置見

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

四、在項目中使用@ngrx/store

1、代碼的使用見github中的book組件

總結(jié)

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

您可能感興趣的文章: