当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    angular8和ngrx8结合使用的步骤介绍

    栏目:代码类 时间:2019-12-01 18:04

    一、案例运行后的效果图

    二、关于ngrx的认识

    1、官网地址

    2、ngrx是借鉴redux的思维,专门为angular中定制的一个状态管理的包,类似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项目开发中属于非必须的 大项目中需要进行组件通讯,数据共享

    三、构建项目

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

    ng new angular-ngrx

    2、创建一个数据的module(手动修改名字为AppStoreModule,不然会和@ngrx/store中的重名)

    ng g m store

    3、在store文件夹下创建三个文件夹

    actions reducers selectors(非必须的,仅仅是对于一个状态树是对象的时候,写一个方法选择状态树中的一个节点)

    4、手动安装@ngrx/store

    npm install @ngrx/store --save

    5、手动安装@ngrx/store-devtools

    npm install @ngrx/store-devtools --save

    6、在reducers文件夹下创建index.ts(使用ng add @ngrx/store会默认生成的)

    import {
     ActionReducerMap,
     MetaReducer
    } from '@ngrx/store';
    import { environment } from '../../../environments/environment';
    
    // 项目中全部的状态
    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组件

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对丰盈国际登录的支持。