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. maven+spring-data-jpa环境搭建

    转自http://www.cnblogs.com/007sx/p/5658194.html 首先看一下项目结构: 所用到的jar(pom.xml): <project xmlns="h ...

  2. ECNUOJ 2615 会议安排

    会议安排 Time Limit:1000MS Memory Limit:65536KB Total Submit:451 Accepted:102 Description 科研人员与相关领域的国内外同 ...

  3. leetCode 36.Valid Sudoku(有效的数独) 解题思路和方法

    Valid Sudoku Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku bo ...

  4. MyEclipse连接不上genymotion的解决方式

    奇怪的是我的MyEclipse有时候连接得上genymotion,有时候又连接不上.之前连接不上的时候,就直接用真机调试,因此出现这个问题非常久了一直都没有去找解决方式.今天认真的反省了自己,再也不能 ...

  5. JS学习十七天----工厂方法模式

    工厂方法模式 前言 今天自己看了一下自己写的部分博客,发现写的好丑....開始注意自己的排版!!可是偏亮也不是一朝一夕就完毕的,我尽量让它美丽一点.....每天美丽一点点 正文 工厂方法模式是一种实现 ...

  6. html 下载文件代码

    首先在html中加个a标签 <a class="menu" href="/cmdb/file_down" download="ljctest.t ...

  7. AngularJS初接触

    todo.json [ { "action": "Buy Flowers", "done": false }, { "action ...

  8. POJ - 3842 An Industrial Spy dfs(水)

    题意:给你一串数字,最少一个,最多七个,问用这里面的数字能组成多少素数,不重复. 思路:之前还遍历10000000的每一个素数,结果超时,后来发现直接dfs就可以了,只是标记一下做过的数. #prag ...

  9. 如何使用通用pe工具箱破解开机密码

    下载最新版的通用pe工具箱将u盘制作成启动盘,接着重启连续按热键进入到bios系统下,设置u盘为第一启动,保存重启. 1.这时候会进入通用pe工具箱的选择界面,我们选择第八个“运行Windows登陆密 ...

  10. canvas中遇到的理解问题

    1.lineDashOffset ctx.lineDashOffset = number 描述: setLineDash 用于设置开始绘制虚线的偏移量. 数字的正负表示左右偏移. 2.createLi ...