ngrx

Angular - Convert a Observable<number> to a number

本秂侑毒 提交于 2019-12-01 06:40:17
问题 I'm using ngrx store to record state, my state currently holds my list of accounts and the current page (for paging). On my list of accounts component i call the store to get the current page and pass that to a service (web api) to get the list of accounts. this.currentPage$ = this.store.select(getCurrentPage); My angular service is expecting a variable (currentPage) but as a type of number, the store select returns an Observable. getListOfCustomer(currentPage: number): Observable<ListDto

Ngrx Store, Effects, Http Ajax Polling Setup on Angular 2

别说谁变了你拦得住时间么 提交于 2019-12-01 06:08:10
I'm creating an Ngrx Angular 2 app and was trying to get my http calls to continue polling after a time interval. I have seen the use of the interval() function, but in case of Ngrx, when service calls are done inside @Effect() , it gives an error. Please advise: @Injectable() export class TasksEffects { constructor( private actions$: Actions, private TS: TaskService ){} @Effect() onLoadTasksLoadTasks$: Observable<Action> = this.actions$.ofType(tasksActions.ActionTypes.LOAD_TASKS) .switchMap(() => { return this.TS.index() .map((res) => new tasksActions.LoadTasksSuccessAction(res.json()))

Angular 2 Router - Named outlets

好久不见. 提交于 2019-12-01 04:07:06
The documentation is not very good, but I am trying to have different router outlets on the same page/route. I have this in my app.component.html <router-outlet></router-outlet> <router-outlet name="dashboard"></router-outlet> My app.routes.ts { path: '', component: HomeComponent, outlet: 'primary' }, { path: '', component: DashboardComponent, outlet: 'dashboard' }, { path: '**', redirectTo: '404' } So on my startpage (i.e "example.com", not "example.com;dashboard:dashboard") I want to show the Homecomponent in the primary router outlet and my Dashboardcomponent in the Dashboard outlet. That

Ngrx Store, Effects, Http Ajax Polling Setup on Angular 2

浪尽此生 提交于 2019-12-01 03:21:43
问题 I'm creating an Ngrx Angular 2 app and was trying to get my http calls to continue polling after a time interval. I have seen the use of the interval() function, but in case of Ngrx, when service calls are done inside @Effect() , it gives an error. Please advise: @Injectable() export class TasksEffects { constructor( private actions$: Actions, private TS: TaskService ){} @Effect() onLoadTasksLoadTasks$: Observable<Action> = this.actions$.ofType(tasksActions.ActionTypes.LOAD_TASKS) .switchMap(

ngrx Load data from server only if the store is empty

谁说胖子不能爱 提交于 2019-12-01 03:11:32
I have a static set of data, a list of countries, that are used on some components. This data is loaded upon the ngOnInit() of these components but I'd like to load them only if it's the very first time that I request the data (the store is empty). Every subsequent times I load the component I'd like to simply use the data from the store without "refreshing" it. How is this achievable using ngrx? I'm using Effects. This is how my code looks like: The component: export class EditPageComponent implements OnInit { countries$: Observable<Country[]> constructor(private store: Store<fromContacts

Ngrx 6.1.0 - Select is deprecated - What is the new syntax?

╄→尐↘猪︶ㄣ 提交于 2019-12-01 02:19:11
The following ngrx select is deprecated. this.store.select(state => state.academy.academy).subscribe((academy) => { this.academy = academy; }); I found this at store.d.ts @deprecated from 6.1.0. Use the pipeable `select` operator instead. So... what's the correct syntax? I try this.store.pipe(select(state => state.academy.academy).subscribe((academy) => { this.academy = academy; })) Error: Cannot find name 'select'. Did you mean 'onselect'? import {Component, OnInit} from '@angular/core'; import {Store, select} from '@ngrx/store'; import {AppState} from '../../../../../app.state'; @Component({

Angular 2 Router - Named outlets

♀尐吖头ヾ 提交于 2019-12-01 02:09:04
问题 The documentation is not very good, but I am trying to have different router outlets on the same page/route. I have this in my app.component.html <router-outlet></router-outlet> <router-outlet name="dashboard"></router-outlet> My app.routes.ts { path: '', component: HomeComponent, outlet: 'primary' }, { path: '', component: DashboardComponent, outlet: 'dashboard' }, { path: '**', redirectTo: '404' } So on my startpage (i.e "example.com", not "example.com;dashboard:dashboard") I want to show

Updating an object in the ngrx/store

半腔热情 提交于 2019-12-01 01:16:05
问题 I'm using @ngrx/store for an Angular 2 app. My store holds a list of say, Book objects. I want to update a field in one of those objects. I also happen to have an Observable of the Book instance I'm looking to update (say, selectedBook ). To do the update I intend on calling the reducer with an UpdateBookAction , and a payload of the new Book. So I make a deep copy of the existing Book object by subscribing to selectedBook and then calling Object.assign(). But when I try to write to one of

What is the purpose of ngrx/effects library?

落花浮王杯 提交于 2019-11-30 06:19:50
问题 I have failed to find any usefull information about this library or what is the purpose of it. It seems like ngrx/effects explain this library to developers who already know this concept and gives a bigginer example on how to code. My questions: What are sources of actions? What is the purpose of ngrx/effects library;what is the downside of only using ngrx/store? When it is recommended to be used? Does it support angular rc 5+? How do we configure it in rc 5+? Thanks! 回答1: The topic is too

Error with Actions observable in @ngrx/effects using TypeScript 2.4.1

为君一笑 提交于 2019-11-30 04:13:58
问题 After updating to TypeScript 2.4.1, compiling projects that use the Actions observable from @ngrx/effects (version 2.0.3) sees the following error thrown: Error TS2684: The 'this' context of type 'Actions' is not assignable to method's 'this' of type 'Observable<any>'. Error TS7006: Parameter 'action' implicitly has an 'any' type. Error TS2345: Argument of type 'Actions' is not assignable to parameter of type 'Observable<Action>'. Types of property 'lift' are incompatible. Type '(operator: