For example, what you want to do is navgiate from current item to next or previous item.

In your component, you can dispatch action like this:

  next($event) {
$event.preventDefault();
this.store.dispatch(new skillAction.Next(this.key));
}

So here is the action defination:

export const NEXT = '[Skill] Next';

export class Next implements Action {
readonly type = NEXT;
constructor(public payload: string) {}
}

As you can see, the payload is current key / id for the current item.

Now in the effect class, we can get current item's key from payload, we still need to know what is the next item's id in the collection.

Luckly we have selector function, which looks like this:

export const getNextSkill = createSelector(
getCollectionSkillIds,
getSelectedSkillId,
(ids, selectedId) => getNext(selectedId, ids)
);

Ok, now, in the effect, we should be able to get all what we need:

import {Injectable} from '@angular/core';
import {Actions, Effect} from '@ngrx/effects';
import {Router} from '@angular/router'; import * as actions from '../actions/skill';
import * as fromSkill from '../reducers'; import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/withLatestFrom';
import 'rxjs/add/operator/distinctUntilChanged';
import {Observable} from 'rxjs/Observable';
import {Action, Store} from '@ngrx/store';
import {SkillsService} from '../services/skills.service';
import {Skill} from '../models/skills';
import {of} from 'rxjs/observable/of';
import {fromPromise} from 'rxjs/observable/fromPromise';
import {MatSnackBar} from '@angular/material'; @Injectable()
export class SkillEffects { constructor(private skillsService: SkillsService,
private actions$: Actions,
private store: Store<fromSkill.State>,
private router: Router,
private snackBar: MatSnackBar) {
} @Effect({dispatch: false})
selectedSkill$: Observable<Action> = this.actions$
.ofType(actions.SELECT)
.do((action: actions.Select) =>
this.router.navigateByUrl(`/dashboard/(skills/${action.payload}//aside:skills)`)); @Effect()
nextSkill$: Observable<Action> = this.actions$
.ofType(actions.NEXT)
.withLatestFrom(this.store.select(fromSkill.getNextSkill))
.map(([action, next]) => new actions.Select(next));
}

The most important piece here is 'withLatestFrom', we can select our selector which return an Observable. Now we are able to acess the state and get just what we want from the state.

Notice here, in the end we map to a new action which is "SELECT" action, we want it to sync our URL bar with UI state. This is important for the applcation, we need to make sure that Router (URL) should be our single souce of turth, only when URL changed, then we can change our UI State, otherwise, there might be chacne, URL and UI are out of sync.

[Angular] How to get Store state in ngrx Effect的更多相关文章

  1. [Angular] NgRx/effect, why to use it?

    See the current implementaion of code, we have a smart component, and inside the smart component we ...

  2. 用computed返回this.$store.state.count,store更改了,但是computed没有调用

    今天出现了这个问题,store更新了,你computed为啥不调用呢??? 另一个.vue更新了state,这个的computed就监听不到了么? 是用这种格式更新的this.$store.commi ...

  3. vuex this.$store.state.属性和mapState的属性中的一点点区别

    做泰康公众号的项目时候有一个需求创建公众号的时候后台有一个社区id提供给后台展现人员和部门,在群发消息时候也要给后台一个社区id只不过获取社区的id接口和上一个不是一样的,本来在页面中写了两个sele ...

  4. Do not mutate vuex store state outside mutation handlers.

    组件代码: selectItem(item,index) { this.selectPlay({ list: this.songs, index }) }, ...mapActions([ 'sele ...

  5. 【vue store的使用方法】(this.$store.state this.$store.getters this.$store.dispatch this.$store.commit)

    vue 页面文件 <template> <div> {{this.$store.state.count}}<br/> {{count}}<br/> {{ ...

  6. [Angular] Creating an Observable Store with Rx

    The API for the store is really simple: /* set(name: string, state: any); select<T>(name: stri ...

  7. [Angular2 Animation] Control Undefined Angular 2 States with void State

    Each trigger starts with an “undefined” state or a “void” state which doesn’t match any of your curr ...

  8. Session not active, could not store state 的解决方法

    1.开口加上session_start() http://metah.ch/blog/2014/05/facebook-sdk-4-0-0-for-php-a-working-sample-to-ge ...

  9. VUEX报错 [vuex] Do not mutate vuex store state outside mutation handlers

    数组 错误的写法:let listData= state.playList; // 数组深拷贝,VUEX就报错 正确的写法:let listDate= state.playList.slice(); ...

随机推荐

  1. bzoj1935 [Shoi2007]园丁的烦恼

    bzoj1935 [Shoi2007]园丁的烦恼 有N个点坐标为(xi,yi),M次询问,询问(a,b)-(c,d)的矩形内有多少点. 0≤n≤500000,1≤m≤500000,0≤xi,yi≤10 ...

  2. vSphere VCSA5.5加入AD域环境问题记录

    vSphere VCSA5.5加入AD域环境问题记录 实验目的: 搭建一套vSphere VCSA5.5,并加入新搭建的AD域,并使用一个域用户登录VC,赋予对VC的只读权限. 实验环境: 使用VMW ...

  3. uptime---系统总共运行时间和系统的平均负载

    uptime命令能够打印系统总共运行了多长时间和系统的平均负载.uptime命令可以显示的信息显示依次为:现在时间.系统已经运行了多长时间.目前有多少登陆用户.系统在过去的1分钟.5分钟和15分钟内的 ...

  4. 20180929 北京大学 人工智能实践:Tensorflow笔记07

    (完)

  5. pip命令使用方法 与 错误处理

    这里把学习到的pip命令写一个汇总,方便想不起来时使用 通过cmd输入pip可以显示提示信息,中文翻译如下: 1)显示某个包的信息 pip show selenium #显示selenium模块的信息 ...

  6. jfinal 后台文件上传(结合上一篇(h5 图片回显))

    前端用了jquery.form.js插件异步提交表单 $("#imgForm").ajaxSubmit();//户主头像 /** * * @description 上传户主头像 * ...

  7. Android-Universal-Image-Loader 学习笔记(五)线程池分析

    UniveralImageLoader中的线程池            一般情况网络访问就需要App创建一个线程来执行(不然可能出现很臭的ANR),但是这也导致了当网络访问比较多的情况下,线程的数目可 ...

  8. centos7 keepalive双机热备~

    简单实现Keepalive双击热备~ 摘要:准备两台虚拟机A:192.168.161.7  B:192.168.161.35  虚拟ip:192.168.161.10 keepalive进程 具体关于 ...

  9. Xamarin大佬的地址

    https://www.cnblogs.com/hlx-blogs/p/7266098.html http://www.cnblogs.com/GuZhenYin/p/6971069.html

  10. 暑假集训-WHUST 2015 Summer Contest #0.1

    ID Origin Title   4 / 12 Problem A Gym 100589A Queries on the Tree 14 / 41 Problem B Gym 100589B Cou ...