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 相关文章推荐
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
javascript常用的正则表达式实例
May 15 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
微信小程序实现多选功能
Nov 04 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 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 Try Catch异常测试
2009/03/01 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python实现类继承实例
2014/07/04 Python
Python psutil模块简单使用实例
2015/04/28 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
Python zip函数打包元素实例解析
2019/12/11 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
详解python内置模块urllib
2020/09/09 Python
医学生个人求职信范文
2013/09/24 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
python缺失值的解决方法总结
2021/06/09 Python
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫