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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
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安装为Apache DSO
2006/10/09 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
js电话号码验证方法
2015/09/28 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
深入探究node之Transform
2017/07/20 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python中字符串与编码示例代码
2019/05/20 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
如何基于Python实现自动扫雷
2020/01/06 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
工作违纪检讨书范文
2015/01/26 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
小学运动会前导词
2015/07/20 职场文书
css3 选择器
2022/05/11 HTML / CSS