angular8和ngrx8結合使用的步驟介紹

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

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

一、案例運行后的效果圖

二、關于ngrx的認識

1、官網地址

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ā)中屬于非必須的
大項目中需要進行組件通訊,數據共享

三、構建項目

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

ng new angular-ngrx

2、創(chuàng)建一個數據的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會默認生成的)

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

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

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

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

7、瀏覽器要安裝redux插件

8、在store.module.ts中配置瀏覽器調試的更多配置見

@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組件

總結

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

您可能感興趣的文章: