[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 ...
随机推荐
- iphone订阅服务在那里取消
打开手机,找到设置,点击进去 往下拉,找到“APP Store与iTunes Store”点击进去,找到你的ID,再点击进去,输入你的密码 找到“订阅”这个选项,点击进去 进到里面后你会发 ...
- 04 Python的继承、方法重写、super()类、父类私密属性的调用
继承 A类继承B类,A即可获得B类的全部公共属性和方法(包括内置属性和方法).格式如:class A(B): class Animal: def sleep(self): print("zZ ...
- opencv模块学习
一.简介 ''' 分辨率(resolution,港台称之为解析度)就是屏幕图像的精密度,是指显示器所能显示的像素的多少.由于屏幕上的点.线和面都是由像素组成的,显示器可显示的像素越多,画面就越精细,同 ...
- PB笔记之数据窗体分组合计列
- Spring Cloud Alibaba学习笔记(11) - RocketMQ事务消息
在Spring中,我们要实现事务,一般通过@Transactional注解实现.这在引入RocketMQ之前没有问题,但是在引入了RocketMQ之后,如果消息发送之后的业务逻辑处理发生了异常的话,这 ...
- C#合并选中EXCEL中的各个工作表
合并选中EXCEL中的各个工作表,以第一个选中的EXCEL文件里的工作表进行匹配,遍历后面的每个EXCEL文件,有相同的工作表就合并: private void button1_Click(objec ...
- js array 排序
数据 let data = [ {chinese: '蔡司', english: 'Chase',score:67}, {chinese: '艾伦', english: 'Allen',score:7 ...
- 对于Element-ui分页进行再次的封装使用
这是我项目的分页的目录结构,话不多说,直接上代码. <template> <div class="pagination-container"> <el ...
- BPM业务流程管理系统_K2受邀出席QAD客户日活动,赋能企业云端智造_工作流引擎
10月17日,K2受邀参加由厦门易维主办的以“走进QAD云ERP,深耕智能制造”为主题的QAD客户日活动.本次大会是以工业4.0背景下传统制造业面临巨大压力和挑战为导向,旨在探讨如何助力企业迅速适应业 ...
- 配置和查看composer镜像
composer 默认地址改为中国镜像地址,以及中国镜像地址还原成默认地址 一.查看当前镜像地址 在命令行输入如下命令,即可查看全局镜像地址: $ composer config -g repo.pa ...