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


Posted in Javascript onDecember 01, 2019

一、案例运行后的效果图

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组件

总结

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

Javascript 相关文章推荐
javascript getElementsByClassName实现代码
Oct 11 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
详解package.json版本号规则
Aug 01 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
angular异步验证防抖踩坑实录
Dec 01 #Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 #Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 #Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 #Javascript
vue多个元素的样式选择器问题
Nov 29 #Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 #Javascript
vue 组件开发原理与实现方法详解
Nov 29 #Javascript
You might like
用 php 编写的日历
2006/10/09 PHP
提高PHP编程效率的方法
2013/11/07 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python中函数传参详解
2016/07/03 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
文秘专业自荐信
2013/10/14 职场文书
《恐龙》教学反思
2014/04/27 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
质量管理标语
2014/06/12 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
好的旅游活动方案
2014/08/19 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
2015年工程师工作总结
2015/04/30 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
如何在python中实现ECDSA你知道吗
2021/11/23 Python