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

一、案例运行后的效果图

二、关于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组件

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Angular X中使用ngrx的方法详解（附源码）

    Angular X中使用ngrx的方法详解（附源码）

    前言 ngrx 是 Angular框架的状态容器,提供可预测化的状态管理.下面话不多说,来一起看看详细的介绍: 1.首先创建一个可路由访问的模块 这里命名为:DemopetModule. 包括文件:demopet.html.demopet.scss.demopet.component.ts.demopet.routes.ts.demopet.module.ts 代码如下: demopet.html <!--暂时放一个标签--> <h1>Demo</h1> demopet

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

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

    一.案例运行后的效果图 二.关于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的场景 在an

  • Java 开发环境配置步骤(介绍)

    背景 当要求系统启动一个应用程序时,系统会先查找当前命令是否是内部命令,若不是,则在当前目录下查找,如果仍没有找到,则在系统变量 Path 指定的路径去查找.JDK(Java Development Kit)包含了一系列开发工具,这些开发工具都在 JDK 的安装目录下,为了方便使用这些开发工具,我们有必要把 JDK 的安装目录设置了系统变量. 步骤 为了配置 JDK 的系统变量环境,我们需要设置三个系统变量,分别是 JAVA_HOME(可选),Path 和 CLASSPATH,下面是这三个变量的

  • Django基础之Model操作步骤(介绍)

    Django基础之Model操作步骤(介绍)

    一.数据库操作 1.创建model表 基本结构: #coding:Utf8 from django.db import models class userinfo(models.Model): #如果没有models.AutoField,默认会创建一个id的自增列 name = models.CharField(max_length=30) email = models.EmailField() memo = models.TextField() 字段解释: 1.models.AutoField

  • MySql的优化步骤介绍(推荐)

    MySql的优化步骤介绍(推荐)

    MySql优化的一般步骤: 1.通过show status 命令了解各种sql的执行效率 SHOW STATUS提供msyql服务器的状态信息 一般情况下,我们只需要了解以"Com"开头的指令 show session status like 'Com%':显示当前的连接的统计结果 show global status like 'Com%' :显示自数据库上次启动至今的统计结果 注:默认是session级别的 其中Com_XXX表示XXX语句所执行的次数. 重点注意:Com_sele

  • IntelliJ IDEA 2017.1.4 x64配置步骤(介绍)

    IntelliJ IDEA 2017.1.4 x64配置步骤(介绍)

    只是为了研究下idea这款编译器怎么使用.开门见山,说下如何配置这款编译器,不配置也能用,但是强迫症表示不服.下面直入正题: 下载与安装就不说了,除了更改安装目录外,没啥注意的地方,建议下载idea去官网下载,这里的"官网"不是下载站哦. 安装完毕后,通过桌面上的快捷方式定位到文件位置,用editplus打开该目录下的idea.properties文件,注意下图中的红框部分,默认是C盘,这里改为了D盘相关目录下,可以自行定义,其实最简单方案是到C盘用户文件夹下找到.IntelliJId

  • hibernate框架环境搭建具体步骤(介绍)

    一. 概述:hibernate框架是作用于dao层的,实现对数据的持久化保存.通过面向对象的方式操作数据库. 二. hibernate框架的搭建 1.导包 lib目录下的required文件夹下的所有jar包. mysql驱动包. 2.创建数据库于表. 3.创建实体类. 4.创建实体映射文件(以crm练习Customer类为例) 实体类名.hbm.xml 引入约束文件 <?xml version="1.0" encoding="UTF-8"?> <

  • 关于docker容器部署redis步骤介绍

    目录 1 redis配置文件 2 docker命令启动 3 docker-compose启动 1 redis配置文件 官方下载:redis.conf 路径:在容器中,一般可以保存在/etc/redis/redis.conf 路径中 配置文件详解,根据实际情况进行修改: # 这里的bind指的是只有指定的网段才可以访问redis,注释后则没有这个限制 # bind 127.0.0.1 # 默认端口为6379 port 6379 # daemonize表示是否以守护进程进行执行,容器中执行必须设置成

  • Nginx下SSL证书安装部署步骤介绍

    Nginx下SSL证书安装部署步骤介绍

    目录 问题描述: 安装步骤 1.准备工作 2.远程连接服务器 3.拷贝证书和私钥文件 4.编辑 Nginx 根目录下的 conf/nginx.conf 文件 5.在 Nginx 根目录下,通过执行以下命令验证配置文件问题 6.重启 Nginx,访问网站 问题描述: 小编遇到https协议过期了,于是重新申请,在Nginx服务器部署SSL证书 安装步骤 1.准备工作 在 SSL 证书管理控制台 中下载并解压缩 cloud.tencent.com 证书文件包到本地目录. 解压缩后,可获得相关类型的证

  • docker安装ros2详细步骤介绍

    docker安装ros2详细步骤介绍

    目录 正题 一.ubuntu上安装docker 二.Docker中安装ROS2-Foxy 三.ROS2 docker可视化运行小乌龟 最后 正题 说一说今天的正题docker和ros2 ,本篇文章要解决三个问题: ubuntu上如何安装dockerdocker如何安装ros2如何可视化docker中的小乌龟 一.ubuntu上安装docker 这个就很简单啦,一句话搞定 sudo apt install docker.io 二.Docker中安装ROS2-Foxy 安装其实谈不上,这里我们直接拉

  • 彻底删除MySQL步骤介绍

    彻底删除MySQL步骤介绍

    目录 1.先停止 MySQL Server 2.卸载 MySQL Server 3.删除 MySQL 文件夹 4.删除注册表 1.先停止 MySQL Server 步骤:此电脑 --> 管理 --> 服务与应用程序 --> 服务 --> 找到 MySQL --> 停止   2.卸载 MySQL Server 步骤:开始 --> 设置 --> 控制面板 --> 程序和功能 --> 找到和 MySQL 相关的都卸载掉 2-1.打开电脑的控制面板(快捷键Wi

随机推荐