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高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
js 三级关联菜单效果实例
Aug 13 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 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高级OOP技术演示
2009/08/27 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
composer.lock文件的作用
2016/02/03 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
如何基于Python实现数字类型转换
2020/02/07 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
Python 发送邮件方法总结
2020/08/10 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
大学自主招生自荐信范文
2014/02/26 职场文书
洗发水广告词
2014/03/13 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
美容院员工规章制度
2015/08/05 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
《秋思》教学反思
2016/02/23 职场文书
学校团代会开幕词
2016/03/04 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
java实现对Hadoop的操作
2021/07/01 Java/Android