[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 ...
随机推荐
- Hystrix【异常机制处理】
在之前的老版本中,feign中是默认开启hystrix的,从新版本中默认已经关闭了,如果要通过FeignClient调用服务并开启hystrix的话,需要自定义开启,即:feign.hystrix.e ...
- 八皇后问题——列出所有的解,可推至N皇后
<数据结构>--邓俊辉版本 读书笔记 今天学习了回溯法,有两道习题,一道N皇后,一道迷宫寻径.今天,先解决N皇后问题.由于笔者 擅长java,所以用java重现了八皇后问题. 注意是jav ...
- Django框架学习易错和易忘点
一.get在几处的用法 1.获取前端数据 request.POST.get('xxx') #当存在多个值时,默认取列表最后一个元素:所以当存在多个值时,使用getlist 2.获取数据库数据 mode ...
- Linux 进程地址空间及原理
1.程序地址空间 首先,我们先看学c/c++时候学到的程序内存布局: 准确地说,程序地址空间其实就是进程的地址空间,实际就是pcb中的mm_struct. 接下来,我们用fork()演示一下 ...
- Map、FlatMap 和 Reduce
Map 作用是生成一个新数组,遍历原数组,将每个元素拿出来做一些变换然后 append 到新的数组中. [1, 2, 3].map((v) => v + 1) // -> [2, 3, 4 ...
- Z算法板子
给定一个串$s$, $Z$算法可以$O(n)$时间求出一个$z$数组 $z_i$表示$s[i...n]$与$s$的前缀匹配的最长长度, 下标从$0$开始 void init(char *s, int ...
- redis设置密码,解决重启后密码丢失及自启服务配置
一.安装redis redis3.0及redisManage管理工具 链接:https://pan.baidu.com/s/1p5EWeF2Jgsw9xOE1ADMmRg 提取码:thyf 二.red ...
- NetCore.SignalR.Demo演示
项目github,点击https://github.com/wangpengzong/NetCore.SignalR.Demo 1.打开服务端Server(\SignalR.Server\bin\De ...
- Java 之 TCP 通信程序
一.概述 TCP 通信能实现两台计算机之间的数据交互,通信的两端,要严格区分为客户端(Client)与服务端(Server). 两端通信时步骤: 1.服务端程序,需要事先启动,等待客户端的连接: 2. ...
- iOS开发常见的宏定义(实用)
iOS开发过程中使用一些常用的宏可以提高开发效率,提高代码的重用性:将这些宏放到一个头文件里然后再放到工程中的-Prefix.pch文件中(或者直接放到-Prefix.pch中)直接可以使用,灰常方便 ...