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. Java Web Application——servlet

    概述 是一个部署于web服务器中的实现了servlet接口的Java类,用于响应web请求 Web容器(也称为servlet容器)本质上是与servlet交互的Web服务器的组件.Web容器负责管理s ...

  2. 题解 P3374 【【模板】树状数组 1】

    恩,这是AC的第一道树状数组呢. 本蒟蒻以前遇到RMQ问题一般都用线段树或ST表,可惜ST表不支持在线修改,而线段树代码量又太大. 如今终于找到了折中方案:树状数组!!!!代码量小,还支持修改! 树状 ...

  3. HDU 4406 GPA

    GPA Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 440664 ...

  4. 手动创建DataTable并添加数据

    DataTable dt=new DataTable(); DataColumn dc=dt.Columns.Add("OBJECTID",Type.GetType("S ...

  5. Android布局文件的载入过程分析:Activity.setContentView()源代码分析

    大家都知道在Activity的onCreate()中调用Activity.setContent()方法能够载入布局文件以设置该Activity的显示界面.本文将从setContentView()的源代 ...

  6. WordPress改动新用户注冊邮件内容--自己定义插件

    有些开放用户注冊功能的WordPress站点,可能有这么一项需求,就是用户注冊成功后,系统会分别给站点管理员和新用户发送一封通知邮件.给管理员发送的是新用户的username和Email,给刚刚注冊的 ...

  7. wcf rest系列文章

    http://www.cnblogs.com/artech/archive/2012/02/15/wcf-rest.html 需要注意的是,发布的服务,可以在web behavior中指定显示help ...

  8. BZOJ 3940 AC自动机

    思路: 需要维护一个栈的AC自动机--. 要求出来 最后的栈顶是在自动机上的哪个节点. if(!ac.ch[st[tp-1]][a[i]-'a']) st[tp]=ac.ch[ac.f[st[tp-1 ...

  9. 实测Untangle - Linux下的安全网关

    UntangleGateway是一个Linux下开源的的网关模块,支持垃圾过滤.URL阻截.反病毒蠕虫等多种功能,其实他的功能还远不止这些,经过一段时间研究本人特制作本视频供大家参考. 本文出自 &q ...

  10. Go 编码问题的解决方案

    1.首先需要mahonia 这个包 go get github.com/axgle/mahonia 然后新建一个 func src 字符串 srcCode 字符串当前编码 tagCode 要转换的编码 ...