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 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
详解Immutable及 React 中实践
Mar 01 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
Javascript 解构赋值详情
Nov 17 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Python去掉字符串中空格的方法
2014/03/11 Python
Python压缩和解压缩zip文件
2015/02/14 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
Python容器类型公共方法总结
2020/08/19 Python
李宁官方网店:中国运动品牌
2017/11/02 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
工商技校毕业生自荐信
2013/11/15 职场文书
就业协议书的作用
2014/04/11 职场文书
食品安全工作方案
2014/05/07 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
怎么写工作检讨书
2014/11/16 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android