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. CF209C Trails and Glades(欧拉路)

    题意 最少添加多少条边,使无向图有欧拉回路. n,m≤106 题解 求出每个点的度数 奇度数点需要连一条新边 仅有偶度数点的连通块需要连两条新边 答案为上面统计的新边数 / 2 注意:此题默认以1为起 ...

  2. ubuntu18.04安装dash-to-dock出错的问题

    之前在安装dash-to-dock出现了这种错误: TypeError: ExtensionUtils.initTranslations is not a function Stack trace:i ...

  3. 题解 P2431 【正妹吃月饼】

    假如做这道题想着用如下朴实的模拟,那肯定要WA至少4个点. #include <iostream> #include <cstdio> using namespace std; ...

  4. AJAX--XMLHttpRequest五步使使用方法

    传统浏览方式和AJAX方式的不同 多数Web应用程序都使用请求/响应模型从server上获得完整的HTML页面.经常是点击一个button,等待server对应,在点击还有一个button.然后在等待 ...

  5. Codeforces Educational Codeforces Round 8 A. Tennis Tournament

    大致题意: 网球比赛,n个參赛者,每场比赛每位选手b瓶水+裁判1瓶水,所有比赛每一个參赛者p条毛巾 每一轮比赛有2^k个人參加比赛(k为2^k<=n中k的最大值),下一轮晋级人数是本轮每场比赛的 ...

  6. smarty课程---smarty的处理过程是怎样的

    smarty课程---smarty的处理过程是怎样的 一.总结 一句话总结:编译文件里时间戳记录模板文件修改时间,如果模板被修改过就可以检测到,然后重新编译 1. smarty将php源文件,首先编译 ...

  7. Linux下网络服务的安全设置

    Linux下网络服务的安全设置      Linux操作系统由于其良好的稳定性.健壮性.高效性和安全性.正在成为各种网络服务的理想平台.各种网络应用在Linux系统上部有性能卓越的应用,例如,提供We ...

  8. 小试VS 2017 开发Python Django项目过程一

    一.新建项目python ->django web 项目 (选择带bootstrap风格与twwriter)项目名称iepiececomputing (ie计件计算)跳出窗体 -> 添加虚 ...

  9. Swift实战(2)--在工程中添加object-C的类或者第三方框架(附翻译)

    原文地址:http://stackoverflow.com/questions/24002369/how-to-call-objective-c-code-from-swift Using Objec ...

  10. jQuery和JavaScript的点击事件区别

    // $("#indexPage").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById("indexP ...