[Anuglar & NgRx] StoreRouterConnectingModule
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的更多相关文章
- [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 ...
- Redux你的Angular 2应用--ngRx使用体验
Angular2和Rx的相关知识可以看我的Angular 2.0 从0到1系列第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2 ...
- [Angular 2] @ngrx/devtools demo
Check the Github: https://github.com/ngrx/devtools Example:
- [Angular 2] ngrx/store
@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJ ...
- [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 ...
- 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2
翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build-better-angular-2-application- ...
- 如何在AngularX 中 使用ngrx
ngrx 是 Angular框架的状态容器,提供可预测化的状态管理. 1.首先创建一个可路由访问的模块 这里命名为:DemopetModule. 包括文件:demopet.html.demopet.s ...
- ngRx 官方示例分析 - 6 - Effect
@ngrx/effect 前面我们提到,在 Book 的 reducer 中,并没有 Search 这个 Action 的处理,由于它需要发出一个异步的请求,等到请求返回前端,我们需要根据返回的结果来 ...
- ngRx 官方示例分析 - 4.pages
Page 中通过构造函数注入 Store,基于 Store 进行数据操作. 注意 Component 使用了 changeDetection: ChangeDetectionStrategy.OnPu ...
随机推荐
- 紫书 习题 10-12 UVa 557(概率计算)
开始的时候我没有考虑1/2的概率,直接一波组合数,然后WA 后来去看题解发现我们可以反过来想,求最后两个人不一样的情况 这个时候肯定会抛到最后的 所以每一种可能就是(0.5)^(n - 2),然后一共 ...
- 题解 CF911D 【Inversion Counting】
这是一道看似复杂其实也不简单的思维题. 其实思路很明显. 因为这道题的数据范围比较大,有1e5的询问,如果暴力(像我考场上那样打平衡树)的话可以做到$mnlogn$. 但那样也是稳T. 经过思考之后我 ...
- 警惕 InnoDB 和 MyISAM 创建 Hash 索引陷阱
MySql 最经常使用存储引擎 InnoDB 和 MyISAM 都不支持 Hash 索引,它们默认的索引都是 B-Tree.可是假设你在创建索引的时候定义其类型为 Hash,MySql 并不会报错,并 ...
- [Python] Pandas load DataFrames
Create an empty Data frame with date index: import pandas as pd def test_run(): start_date='2017-11- ...
- Use Uncertainty As a Driver
 Use Uncertainty As a Driver Kevlin Henney ConFRonTEd WiTH TWo opTionS, most people think that the ...
- 会变得ActionBar,让你的ActionBar与众不同
话不多说先看两张图: github地址:https://github.com/Smalinuxer/android-SlideActionBar 原理什么的有时间再讲,或者自行看代码; 兴许还会补充新 ...
- Bitmap缓存机制
Bitmap缓存机制 载入一个bitmap到UI里面比較简单直接.可是,假设我们一次载入大量的bitmap数据的时候就变得复杂了.很多情况下(比方这些组件:ListVIew,GridView或者Vie ...
- Android 设置屏幕不待机
本文转载于:http://blog.csdn.net/yudajun/article/details/7748760 androidnullservice 目录(?)[+] 最近做项目时正好用到,进行 ...
- python获取教务管理系统的MM照片
前提:你的教务管理系统是明文存储大家的图片,加密的图片就不好弄了... 也就是能够通过浏览器直接访问...技术上就不存在什么问题了...如果是学号存储的就更方便了 然后我们就可以写个小脚本了...其实 ...
- js003-4方向8方向函数
1,求四方向或者8方向的周围的棋子. /** * pos 1-4, 1-8 4/8方向的周围 * @param {*} pos * @param {*} dir */ var _nearChess = ...