[NgRx] Setting up NgRx Router Store and the Time-Travelling Debugger
Make sure you have the@ngrx packages installed:
"@ngrx/data": "^8.0.1",
"@ngrx/effects": "^8.0.1",
"@ngrx/entity": "^8.0.1",
"@ngrx/router-store": "^8.0.1",
"@ngrx/store": "^8.0.1",
"@ngrx/store-devtools": "^8.0.1",
To enable time travel debugging, you need to import:
app.module.ts
imports: [
...
StoreRouterConnectingModule.forRoot({
stateKey: "router", // key will be "router"
routerState: RouterState.Minimal // the content to be saved into store will be minimal
})
],
Enable add reducer for router:
reducers/index.ts
import { routerReducer } from "@ngrx/router-store";
export const reducers: ActionReducerMap<AppState> = {
router: routerReducer
};
[NgRx] Setting up NgRx Router Store and the Time-Travelling Debugger的更多相关文章
- ngrx/store effects 使用总结1:计数器
本教程案例github:https://github.com/axel10/ngrx_demo-counter-and-list angular2+ 的学习成本应该是三大框架中最高的一个,教程及案例稀 ...
- Angular应用架构设计-3:Ngrx Store
这是有关Angular应用架构设计系列文章中的一篇,在这个系列当中,我会结合这近两年中对Angular.Ionic.甚至Vuejs等框架的使用经验,总结在应用设计和开发过程中遇到的问题.和总结的经验, ...
- 如何在AngularX 中 使用ngrx
ngrx 是 Angular框架的状态容器,提供可预测化的状态管理. 1.首先创建一个可路由访问的模块 这里命名为:DemopetModule. 包括文件:demopet.html.demopet.s ...
- [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...
- 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2
翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build-better-angular-2-application- ...
- Redux 和 ngrx 创建更佳的 Angular 2
Redux 和 ngrx 创建更佳的 Angular 2 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build- ...
- [Angulalr] Speed Up Reducer Development Using Ngrx Schematics
When we use NGRX, we need to create some bolipates. Now with Angulalr6, we can use CLI to generate t ...
- [Angular] NgRx/effect, why to use it?
See the current implementaion of code, we have a smart component, and inside the smart component we ...
- Vue3: 如何以 Vite 创建,以 Vue Router, Vuex, Ant Design 开始应用
本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...
随机推荐
- hexo 个人博客搭建
Hexo 小插曲介绍 虽然标题是第一次写博客. 但是我这个困难户至少挣扎了1年多了, 一直下不去手.今天可算是开了个头. 贵在坚持吧 抽时间介绍我的hexo安装历程吧,今天实在是有点困了,要睡觉了. ...
- java FastJson的使用总结
1.前言 1.1.FastJson的介绍: JSON(javaScript Object Notation)是一种轻量级的数据交换格式.主要采用键值对({"name": " ...
- Python12之列表3(列表常用操作符,以及常用的内置函数)
一.比较操作符: list1 > list2 比较两个列表的大小,Python会直接从列表的第0个元素进行比较,若相等,则继续下一个比较 得到的结果是布尔值 二.逻辑操作 ...
- VS.NET(C#)--2.8HTML服务器控件
HTML服务器控件 服务器不处理HTML控件,例如:<h1>.<a>超链接.<input>,直接送到客户端,由浏览器呈现. 把HTML控件转换成HTML服务器控件, ...
- win10+pyspark+pycharm+anaconda单机环境搭建
一.工具准备 1. jdk1.8 2. scala 3. anaconda3 4. spark-2.3.1-bin-hadoop2.7 5. hadoop-2.8.3 6. winutils 7. p ...
- element-ui里的form校验,一直有点疑惑,prop是怎么对应的?
图一 图一中红框内的这种校验,必须在 这个product_form数据域内定义对应的变量名(cid.itemName......),不然对应不上. 图一红框外的那种校验,则不用在数据域内定义对应的变量 ...
- cmd修改路径
1. 切换盘符: 输入X:(例如C:)+回车 2. 查看当前目录下的文件:输入dir+回车 3. 选择想要的文件,输入:cd+文件名
- csv注入复现代码
以下代码生成的csv文件,使用Microsoft Execl能成功弹出计算器,虽然打开时有安全提示,但是大多数src还是会接收该类漏洞 -------------------------------- ...
- (二)react-native开发系列之windows开发环境配置
之前写了react-native在mac上得环境搭建,但是如果只开发android的话,只要用windows系统就可以了,下面就来说下react-native的windows开发环境配置. 1.下载配 ...
- centos7 配置yum源
简单粗暴方法: 1.首先在本机上测试 ping www.baidu.com 是否通,不通的话配置网卡ip.dns等. 2.进入yum路径下: cd /etc/yum.repos.d/ 3.下载repo ...