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 相关文章推荐
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
jquery手风琴特效插件
Feb 04 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
Vue 打包后相对路径的引用问题
Jun 05 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 Curl出现403错误的解决办法
2014/05/29 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
node.js中的require使用详解
2014/12/15 Javascript
原生js实现验证码功能
2017/03/16 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
Python WSGI的深入理解
2018/08/01 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python列表切片常用操作实例解析
2019/12/16 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
自荐书4要点
2014/01/25 职场文书
社区灵活就业证明
2014/11/03 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
导游欢送词
2015/01/31 职场文书
大学军训决心书
2015/02/05 职场文书
入党自荐书范文
2015/03/05 职场文书
违纪开除通知书
2015/04/25 职场文书
导游词之无锡梅园
2019/11/28 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL