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. luoguP1419 寻找段落(二分答案+单调队列)

    题意 给定一个长度为n的序列a1~an,从中选取一段长度在s到t之间的连续一段使其平均值最大.(n<=100000) 题解 二分答案平均值. judge时把每一个a[i]-mid得到b[i] 在 ...

  2. 对比学习sass和stylus的常用功能

    在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言.本文涉及到的sas ...

  3. caioj 1071 动态规划入门(二维一边推4:相似基因) (最长公共子序列拓展)

    复制上一题总结 caioj 1069到1071 都是最长公共字序列的拓展,我总结出了一个模型,屡试不爽    (1) 字符串下标从1开始,因为0用来表示字符为空的情况,而不是第一个字符     (2) ...

  4. 一个Web报表项目的性能分析和优化实践(四):MySQL建立索引,唯一索引和组合索引

    先大致介绍下项目的数据库信息. 数据库A:主要存放的通用的表,如User.Project.Report等. 数据库B.C.D:一个项目对应一个数据库,而且这几个项目的表是完全一样的. 数据库表的特点 ...

  5. Hadoop学习总结(1)——大数据以及Hadoop相关概念介绍

    一.大数据的基本概念 1.1.什么是大数据 大数据指的就是要处理的数据是TB级别以上的数据.大数据是以TB级别起步的.在计算机当中,存放到硬盘上面的文件都会占用一定的存储空间,例如: 文件占用的存储空 ...

  6. 洛谷—— P2934 [USACO09JAN]安全出行Safe Travel || COGS ——279|| BZOJ——1576

    https://www.luogu.org/problem/show?pid=2934 题目描述 Gremlins have infested the farm. These nasty, ugly ...

  7. OpenGL 获取当前屏幕坐标对应的三维坐标

    转自原文 OpenGL 获取当前屏幕坐标对应的三维坐标,使用很简单glu库中的一个函数 #include <GL/glut.h> #include <stdlib.h> #in ...

  8. bzoj 2120 数颜色 题解

    转载请注明:http://blog.csdn.net/jiangshibiao/article/details/23990489 [原题] 2120: 数颜色 Time Limit: 6 Sec  M ...

  9. python之文件操作-复制、剪切、删除等

    以下是把sourceDir目录下的以.JPG结尾的文件所有拷贝到targetDir目录下: <span style="font-size:18px;">>> ...

  10. [BZOJ4826][HNOI2017]影魔 可持久化线段树

    链接 题意:给你 \(1\) 到 \(n\) 的排列 \(k_1,k_2,\dots,k_n\) ,对 \(i,j (i<j)\)来说,若不存在 \(k_s (i<s<j)\) 大于 ...