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的更多相关文章

  1. [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 ...

  2. Redux你的Angular 2应用--ngRx使用体验

    Angular2和Rx的相关知识可以看我的Angular 2.0 从0到1系列第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2 ...

  3. [Angular 2] @ngrx/devtools demo

    Check the Github: https://github.com/ngrx/devtools Example:

  4. [Angular 2] ngrx/store

    @ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJ ...

  5. [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 ...

  6. 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2

    翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build-better-angular-2-application- ...

  7. 如何在AngularX 中 使用ngrx

    ngrx 是 Angular框架的状态容器,提供可预测化的状态管理. 1.首先创建一个可路由访问的模块 这里命名为:DemopetModule. 包括文件:demopet.html.demopet.s ...

  8. ngRx 官方示例分析 - 6 - Effect

    @ngrx/effect 前面我们提到,在 Book 的 reducer 中,并没有 Search 这个 Action 的处理,由于它需要发出一个异步的请求,等到请求返回前端,我们需要根据返回的结果来 ...

  9. ngRx 官方示例分析 - 4.pages

    Page 中通过构造函数注入 Store,基于 Store 进行数据操作. 注意 Component 使用了 changeDetection: ChangeDetectionStrategy.OnPu ...

随机推荐

  1. POJ 3567 Cactus Reloaded(仙人掌直径)

    题意 裸的仙人掌直径. 题解 先考虑基环树的直径:先算出每颗“树”的直径,再在环上跑DP 再考虑仙人掌的直径:把每个基环树缩成一条边,边长为基环树深度. #include<iostream> ...

  2. TCP学习前的准备——可靠数据传输协议

    由于传输层所依赖的网络层是不可靠的,通过逐渐考虑实际情况不断引入新技术来实现可靠数据传输. 完全可信的信道 有比特差错的信道 新的协议功能: 1.    差错检测:检验和 2.    接收方反馈:序号 ...

  3. ArcGIS api for javascript——放大时切换图层

    描述 本例展示了如何在地图里指出显示的缓存或切片的细节等级(LODs).当打开示例地图,可以看到一些来自ArcGIS Online ESRI_Imagery_World_2D图层的影像.这个应用程序配 ...

  4. Looger级别

    Logger级别 日志记录器(Logger)是日志处理的核心组件.log4j具有5种正常级别(Level).日志记录器(Logger)的可用级别Level (不包括自定义级别 Level), 以下内容 ...

  5. 正则表达式 Tricks

    *:0 或 多个 ?:任意一个 [list]:a[xyz]b,a 与 b 之间必须也只能有一个字符,但只能是 x/y/z,也即:axb, ayb, azb [!list]:匹配除 list 中的任意单 ...

  6. POJ 1671 第二类斯特林数

    思路: 递推出来斯特林数 求个和 if(i==j)f[i][j]=1; else f[i][j]=f[i-1][j-1]+f[i-1][j]*j; //By SiriusRen #include &l ...

  7. HDU 5353 Average 贪心

    就是贪心啊,不知道为啥总是不过,总是WA 方法不对吗? 将数组扩展一倍,从左到右扫描,大于平均数就给右边的,小于就从右边拿,等于就不变,记录下操作类型. 大于2直接NO,不知道哪错了,自己出了一些数据 ...

  8. 源码编译安装Nginx全程视频演示

    基本步骤: 1.首先停止现有web系统, #/etc/init.d/apache2 stop 2.将源码拷贝到/usr/local/src #cp /home/ditatompel/Public/Ng ...

  9. 分享一个tom大叔的js 深入理解系列 (有助于提升)

    http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html#3620172

  10. 多路径软件常用操作(MPIO)

    一:查看存储盘的路径 1. 查看MPIO的存储盘的路径 # lspath (适用于所有存储的MPIO路径查询) # mpio_get_config -Av (适用于DS3K/DS4K的MPIO路径查询 ...