ngrx

How to correctly pass props to a component with RxJS in Angular 4?

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-07 15:40:45
Here is my component: @Component({ selector: 'bc-goods-detail', template: ` <span>good id: {{good?.id}}</span> <input [value]="good?.name" (input)="onInput($event)" /> <button (click)="onClick()">Save</button> `, styles: [] }) export class GoodsDetailComponent { @Input() good: Good; @Output() save = new EventEmitter<Good>(); onClick() { this.save.emit(this.good); } onInput ($event) { this.good.name = $event.target.value; } } When I change the name in input and then I am pressing save button and this.good is NOT CHANGED good. It is old good , like it was passed to the component. I started to

Denormalizing ngrx store- setting up selectors?

由 冷暖自知 提交于 2019-12-07 12:35:03
问题 I am currently working with a somewhat complicated (deep) structure within an ngrx project. It can be thought of as an array of parent objects, with multiple levels of child objects. It is normalized/flattened on the server side, and my the feature within my store looks something like this: rootObjs: { level1: { byId: { 'lvl1_1': {id: 'lvl1_1', label: '[Lvl 1]: 1', ui_open: true, children: ['lvl2_1', 'lvl2_3']}, 'lvl1_2': {id: 'lvl1_2', label: '[Lvl 1]: 2', ui_open: false, children: ['lvl2_2'

Infinite loop with ngrx/effects

由 主宰稳场 提交于 2019-12-07 12:10:28
问题 I'm trying to understand ngrx/effects. I have built a simple function that increments number by 1 with each click. But it's going in an infinite loop when clicked, not sure whats going on. I'm sure im making some stupid mistake. monitor.effects.ts @Injectable() export class MonitorEffects { @Effect() compute$: Observable<Action> = this.actions$ .ofType(monitor.ActionTypes.INCREMENT) .map((action: monitor.IncrementAction) => action.payload) .switchMap(payload => { return this.http.get('https:/

What is this ngrx selector doing?

由 故事扮演 提交于 2019-12-07 09:23:18
问题 I'm trying to better understand the answer by Maxime to this question. My rep is not high enough to comment on the answer there, so I'll ask a new question here. The part about setting up a normalized state makes sense. Then he goes on to talk about how you would create a selector, this part of his answer is quoted below, and showing his code block. In your logic or view (for example with Angular), you need your nested structure so you can iterate over your array and thus, you don't want to

ngrx Effects: Are actions dispatched by one effect processed immediately by other effects?

由 与世无争的帅哥 提交于 2019-12-07 05:40:51
问题 I have an Angular (2) app with four ngrx actions: START Not processed by the reducer (no state change) ngrx Effect calls an async task and maps to SUCCESS or ERROR SUCCESS Processed by the reducer ngrx Effect maps to ADVANCE ADVANCE Not processed by the reducer ngrx Effect navigates to a different route ERROR Processed by the reducer No Effect The problem is that the Effect that catches ADVANCE seems to run before the reducer that processes SUCCESS Here's the Effects code: @Effect() start$ =

Dispatch multiple actions from effects: difference between different rxjs operators

由 送分小仙女□ 提交于 2019-12-07 05:28:37
问题 I need to dispatch multiple actions from an ngrx effect once an http request is successful. There are several ways that seem to work and some that don't, I can't understand what the difference is. @Effect() loadUser = this.actions .pipe( ofType(campaignActions.type.LOAD_CAMPAIGN), map((action: userActions.LoadUserAction) => action.payload), switchMap((payload: { id: number }) => this.s.getUser(payload.id) .pipe( switchMap((data) => { return from([ new userActions.LoadUserSuccessAction(), new

How to do if/else in ngrx/effects?

由 [亡魂溺海] 提交于 2019-12-07 02:36:52
问题 I am using ngrx/effects. I want to dispatch different actions based on a foo state in the store. This is how I am doing now: @Effect() foo1$ = this.updates$ .whenAction(Actions.FOO) .filter(obj => !obj.state.product.foo) .map<string>(toPayload) .map(x => ({ type: Actions.BAR1, payload: { x }})); @Effect() foo2$ = this.updates$ .whenAction(Actions.FOO) .filter(obj => obj.state.product.foo) .map<string>(toPayload) .map(x => ({ type: Actions.BAR2, payload: { x }})); Is there a way to use RxJS 5

RxJS Observable: Subscription lost?

由 微笑、不失礼 提交于 2019-12-06 22:19:05
问题 What is the difference between the following two observable mappings? (if something in the following code appears strange to you: it stems from a learning-by-doing hobby project; I still learn RxJS) I have a component with a getter and a constructor. Both read information from the app's ngrx store and extract a string ( name ). The only difference between the getter and the constructor: the getter is used in the HTML and the observable it returns is sent through an async pipe, whereas the

how to mock ngrx selector in a component

由 前提是你 提交于 2019-12-06 19:04:38
问题 In a component, we use a ngrx selector to retrieve different parts of the state. public isListLoading$ = this.store.select(fromStore.getLoading); public users$ = this.store.select(fromStore.getUsers); the fromStore.method is created using ngrx createSelector method. For example: export const getState = createFeatureSelector<UsersState>('users'); export const getLoading = createSelector( getState, (state: UsersState) => state.loading ); I use these observables in the template: <div class=

Infinite loop with store and http with ngFor

由 淺唱寂寞╮ 提交于 2019-12-06 13:16:46
问题 I have infinite loop with this code: Template: <ng-container *ngFor="let row of service.dataLoadAsync() | async"> Service: dataLoadAsync(filters: FinishedCallsFilter = {}): Observable<FinishedCall[]> { return this.httpFinishedCallsObservable(Object.assign({limit: this.limit}, {})).flatMap(response => { this.store.dispatch(new ReplaceMany(response.items)) return this.store }) } Also I tried this function realization: dataLoadAsync(filters: FinishedCallsFilter = {}): Observable<FinishedCall[]>
订阅 ngrx