[Anuglar & NgRx] StoreRouterConnectingModule
Always treat Router as the source of truth
When we use Ngrx, we can see that we will use a "StoreRouterConnectingModule" from the example app.
What it does, is that, it connects router state to store,
It will set up the router in such a way that right after the URL gets parsed and the future router state gets created, the router will dispatch a RouterAction
Check the post.

Code example:
class TalksEffects {
@Effect() navigateToTalks = this.actions.ofType(ROUTER_NAVIGATION).
map(firstSegment).
filter(s => s.routeConfig.path === "talks").
switchMap((r: ActivatedRouteSnapshot) => {
const filters = createFilters(r.params);
return this.backend.findTalks(filters)
.map(resp => ({type: 'TALKS_UPDATED', payload: {...resp, filters}}));
}).catch(e => {
console.log('Network error', e);
return of();
});
}
We can listen for "ROUTER_NAVATION" event, filter though the path, get the activated route snapshot, then snyc Router URL with BE.
[Anuglar & NgRx] StoreRouterConnectingModule的更多相关文章
- [NgRx] Setting up NgRx Router Store and the Time-Travelling Debugger
Make sure you have the@ngrx packages installed: "@ngrx/data": "^8.0.1", "@n ...
- Redux你的Angular 2应用--ngRx使用体验
Angular2和Rx的相关知识可以看我的Angular 2.0 从0到1系列第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2 ...
- [Angular 2] @ngrx/devtools demo
Check the Github: https://github.com/ngrx/devtools Example:
- [Angular 2] ngrx/store
@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJ ...
- [Angular 2] Using ngrx/store and Reducers for Angular 2 Application State
ngrx/store is a library that simplifies common RxJS patterns for managing state and gives you an eas ...
- 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2
翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build-better-angular-2-application- ...
- 如何在AngularX 中 使用ngrx
ngrx 是 Angular框架的状态容器,提供可预测化的状态管理. 1.首先创建一个可路由访问的模块 这里命名为:DemopetModule. 包括文件:demopet.html.demopet.s ...
- ngRx 官方示例分析 - 6 - Effect
@ngrx/effect 前面我们提到,在 Book 的 reducer 中,并没有 Search 这个 Action 的处理,由于它需要发出一个异步的请求,等到请求返回前端,我们需要根据返回的结果来 ...
- ngRx 官方示例分析 - 4.pages
Page 中通过构造函数注入 Store,基于 Store 进行数据操作. 注意 Component 使用了 changeDetection: ChangeDetectionStrategy.OnPu ...
随机推荐
- C#开发奇技淫巧二:根据dll文件加载C++或者Delphi插件
原文:C#开发奇技淫巧二:根据dll文件加载C++或者Delphi插件 这两天忙着把框架改为支持加载C++和Delphi的插件,来不及更新blog了. 原来的写的框架只支持c#插件,这个好做 ...
- 1193 Eason
Eason Acceteped : 57 Submit : 129 Time Limit : 1000 MS Memory Limit : 65536 KB Description 题目描述 ...
- Consolas 字体
Consolas是一套等宽字体的字型,属无衬线字体,由Lucas de Groot设计. 概述 这套字型使用了微软的ClearType 字型平滑技术,并随同Windows Vista.Office 2 ...
- Linux 6.2配置yum本地
yum 1.挂在iso文件 [root@localhostmedia]# mount /dev/cdrom /media 2.安装createrepo createrepo是配置YUM源的配置工具,检 ...
- CSS元素选择器 element selector(type selector)
http://www.w3school.com.cn/css/css_selector_type.asp 元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如 ...
- Android开发之蓝牙(Bluetooth)操作(一)--扫描已经配对的蓝牙设备
版权声明:本文为博主原创文章,未经博主允许不得转载. 一. 什么是蓝牙(Bluetooth)? 1.1 BuleTooth是目前使用最广泛的无线通信协议 1.2 主要针对短距离设备通讯(10m) ...
- google浏览器修改网页字符编码
google浏览器修改网页字符编码 直接在google浏览器的应用拓展程序里面搜 Charset,第一个就是 于是就有了
- Weka中数据挖掘与机器学习系列之Weka3.7和3.9不同版本共存(七)
不多说,直接上干货! 为什么,我要写此博客,原因是(以下,我是weka3.7.8) 以下是,weka3.7.8的安装版本. Weka中数据挖掘与机器学习系列之Weka系统安装(四) 基于此,我安装最新 ...
- 外连接OUTER JOIN(三十五)
外连接OUTER JOIN LEFT [OUTER] JOIN,左外连接 显示左表的全部记录及右表符合连接条件的记录 下面我们来演示一下,操作命令及部分结果如下: SELECT goods_id, ...
- angular实现简单的pagination分页组件
不想使用第三方库,只想使用一个分页器,那么就简单的实现一个,效果如下: 1.使用方式: <custom-pagination *ngIf="enterpriseList.length& ...