I am trying out following which basically needs to trigger everytime a filter gets changed. Cananyone please help what am i doing wrong with using higher order observables.
Working version:
this.filterservice.registerFilters({
key: this.FILTERS_KEY,
filters: this.AUDIT_FILTERS,
sorts: [new DateSort({ for: 'modifiedOn' })]
}).pipe(
takeUntil(this.destroy$)
).subscribe(filters => {
this.filters = filters;
this.auditBuilderListService.changeFilter(filters);
this.auditData$ = this.auditBuilderListService.auditBuilderData$;
});
With switchmap (not working):
registerFilters$ = this.filterservice.registerFilters({
key: this.FILTERS_KEY,
filters: this.AUDIT_FILTERS,
sorts: [new DateSort({ for: 'modifiedOn' })]
});
auditData$ = this.registerFilters$.pipe(
switchMap((filters) => {
this.filters = filters;
this.auditBuilderListService.changeFilter(filters);
return this.auditBuilderListService.auditBuilderData$;
}),
takeUntil(this.destroy$)
);
in service:
auditBuilderData$ = combineLatest([
this.pageNumberSubject,
this.filterAction$
]).pipe(
switchMap(([currentPage, filterParameters]) => {
return this.getAudits(filterParameters, currentPage, this.pageSize);
}),
shareReplay(1)
);
working version without switchmap:
auditData$: Observable;
registerFilters$ = this.filterservice.registerFilters({
key: this.FILTERS_KEY,
filters: this.AUDIT_FILTERS,
sorts: [new DateSort({ for: 'modifiedOn' })]
}).pipe(
tap(filters => {
this.auditBuilderListService.setPage(1);
this.filters = filters;
this.auditBuilderListService.changeFilter(filters);
}),
takeUntil(this.destroy$)
);
this.registerFilters$
.pipe(takeUntil(this.destroy$))
.subscribe(filters => {
this.auditData$ = this.auditBuilderListService.auditBuilderData$;
});
But is there a better way to achieve the same?
Regarding auditBuilderListSerivce, I'm assuming that invoking changeFilter() results in auditBuilderData$ emitting a new value. If this is the case, it explains why your switchMap isn't working. You're returning auditBuilderData$ too late because it emits it's value the moment you invoke changeFilter().
As for solutions, you can either have changeFilter() return the value you wanted to emit (if that's possible). Another option is to reference and subscribe to auditBuilderData$ separately.
registerFilters$ = this.filterservice.registerFilters({
key: this.FILTERS_KEY,
filters: this.AUDIT_FILTERS,
sorts: [new DateSort({ for: 'modifiedOn' })],
}).pipe(
tap(filters =>{
this.filters = filters;
this.auditBuilderListService.changeFilter(filters);
}),
takeUntil(this.destroy$)
);
auditData$ = this.auditBuilderListService.auditBuilderData$;
takeUntil(this.destroy$)
);
When you have an active subscription to both observables, registerFilters$ will invoke changeFilter() as a side effect which will cause auditData$ to emit its new value.
Related
There is an array in public users = new BehaviorSubject<User[]>([]).
I want to delete element from this observable and refresh it.
My solution is:
const idRemove = 2;
this.users.next(this.user.getValue().filter((u) => u.id !== idRemove)
But I seem I use wrong way of using RXJS
Toward Idiomatic RxJS
Using subscribe instead of .value.
interface User {
id: number
}
const users$ = new BehaviorSubject<User[]>([
{id:1},
{id:2},
{id:3}
]);
function removeId(idRemove: number) {
users$.pipe(
take(1),
map(us => us.filter(u => u.id !== idRemove))
).subscribe(
users$.next.bind(users$)
);
}
users$.subscribe(us =>
console.log("Current Users: ", us)
);
removeId(2);
removeId(1);
removeId(3);
Output:
Current Users: [ { id: 1 }, { id: 2 }, { id: 3 } ]
Current Users: [ { id: 1 }, { id: 3 } ]
Current Users: [ { id: 3 } ]
Current Users: []
To handle state within RxJS pipes you can use the Scan operator
Useful for encapsulating and managing state. Applies an accumulator (or "reducer function") to each value from the source after an initial state is established -- either via a seed value (second argument), or from the first value from the source.
const { Subject, merge } = rxjs;
const { scan, map } = rxjs.operators;
// This function is used to apply new users to the state of the scan
const usersFn = users => state => users
// This function is used to remove all matching users with the given id from the state of the scan
const removeFn = removeId => state => state.filter(user => user.id !== removeId)
// This Subject represents your old user BehaviorSubject
const users$$ = new Subject()
// This Subject represents the place where this.users.next(this.user.getValue().filter((u) => u.id !== idRemove) was called
const remove$$ = new Subject()
// This is your new user$ Observable that handles a state within its pipe. Use this Observable in all places where you need your user Array instead of the user BehaviorSubject
const user$ = merge(
// When users$$ emits the usersFn is called with the users argument (1. time)
users$$.pipe(map(usersFn)),
// When remove$$ emits the removeFn is called with the removeId argument (1. time)
remove$$.pipe(map(removeFn))
).pipe(
// Either the usersFn or removeFn is called the second time with the state argument (2. time)
scan((state, fn) => fn(state), [])
)
// Debug subscription
user$.subscribe(console.log)
// Test emits
users$$.next([
{id: 1, name: "first"},
{id: 2, name: "second"}
])
remove$$.next(2)
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.4.0/rxjs.umd.min.js"></script>
Ben Lesh (main Contributor of RxJS) wrote an anser about why not to use getValue in RxJS: The only way you should be getting values "out of" an Observable/Subject is with subscribe!
Using getValue() is discouraged in general for reasons explained here even though I'm sure there are exception where it's fine to use it. So a better way is subscribing to get the latest value and then changing it:
this.users
.pipe(take(1)) // take(1) will make sure we're not creating an infinite loop
.subscribe(users => {
this.users.next(users.filter((u) => u.id !== idRemove);
});
I'm new to rsjx but I'm looking for a solution like the Forkjoin but it should complete when 1 of the 2 observables have a value. It needs to be like a ForkJoin because I need to know which observable got a value.
example:
I'm loading categories and I have an autocomplete. Categories is an observable and the valueChanges is returned as an observable.
#Select(IngredientCategoryState.selectIngredientCategories) ingredientCategories$!: Observable<IngredientCategory[]>;
this.filter = this.ingredientForm.controls['category'].valueChanges.pipe(
map((data) => {
if (typeof data === 'object') {
return data.name;
}
return data;
})
)
Then I used the forkJoin but then it requires both observables to have a value
this.filteredIngredientCategories$ = forkJoin({
ingredientCategories: this.ingredientCategories$,
filter: this.filter
}).pipe(
map(({ ingredientCategories, filter }) => {
return this._filter(ingredientCategories, filter);
})
);
UPDATE
I solved it with a combineLatest and triggering the autocomplete field
combineLatest([this.ingredientCategories$, this.filter$])
.pipe(
map((data) => {
return this._filter(data[0], data[1]);
})
).subscribe((ingredientCategories) => {
this.filteredIngredientCategories = ingredientCategories;
});
this.ingredientForm.controls['category'].setValue('');
You can use race to use the first source to emit.
I need to know which observable got a value
Instead of "knowing" which one emitted, you can transform the output of each source to return the object shape you need:
this.filteredIngredientCategories$ = race(
this.ingredientCategories$.pipe(
map(ingredientCategories => ({ ingredientCategories, filter: undefined }))
),
this.filter.pipe(
map(filter => ({ filter, ingredientCategories: undefined }))
)
).pipe(
map(({ ingredientCategories, filter }) => {
return this._filter(ingredientCategories, filter);
})
);
Here's a working StackBlitz demo.
I have two observables, each one you get the value of a Dto:
this.about.aboutHeInfo().subscribe((heInfo: HemDto) => {
this.uiUtils.openDialogResizable({
hem: heInfo
}, true, AboutComponent).subscribe();
});
this.about.aboutPeInfo().subscribe((peInfo: PeoDto) => {
this.uiUtils.openDialogResizable({
peo: peInfo
}, true, AboutComponent).subscribe();
});
The problem is that when creating both observables two screens are opened because each function creates an apenDialog, how can I merge the two observables and open a single dialog box?
This is the merge I am testing:
const ob1 = this.about.aboutInfo().subscribe((heInfo: HemDto) => {
this.heInfo= back;
});
const ob2 = this.about.aboutQoInfo().subscribe((peInfo: PeoDto) => {
this.peInfo= people;
});
forkJoin([ob1, ob2]).subscribe(() => {
this.uiUtils.openDialogResizable({
back: this.heInfo,
people: this.peInfo
}, true, AboutComponent).subscribe();
});
You shouldn't use subscribe before merge function, merge take observable not what subscribe returns
Example
const ob1 = this.about.aboutInfo()
const ob2 = this.about.aboutQoInfo()
forkJoin([ob1, ob2]).subscribe(([dto1, dto2]) => {
...
});
first func:
updateMark(item: MarkDTO) {
this.service
.put(item, this.resource)
.subscribe(() => this.markEdit = null);
}
second func:
put(item: MarkDTO, rcc: string): Observable<MarkDTO> {
const rdto = new MarkRDTO(item);
const url = `${this.getUrl('base')}${rcc}/marks/${rdto.rid}`;
const obs = this.http.put<MarkDTO>(url, rdto, { withCredentials: true })
.pipe(map((r: MarkDTO) => new MarkDTO(r)))
.share();
obs.subscribe(newMark => this.storage.update(newMark, rcc));
return obs;
}
in service i need to update data after request
but also in same time i need to clear current editItem
all of it must be done after i subscribe to one httpRequest
.share() - suport from rxjs-compat package (i want to remove this dep in closest time)
without .share() - work only 1 of 2 steps
current rxjs version is 6.3.3
Help who can...
There is a pipeable share operator, that you would use the same way you use map() (i.e. inside pipe()) and thus doesn't need rxjs-compat.
But you don't need share() here. All you need is the tap() operator:
put(item: MarkDTO, rcc: string): Observable<MarkDTO> {
const rdto = new MarkRDTO(item);
const url = `${this.getUrl('base')}${rcc}/marks/${rdto.rid}`;
return this.http.put<MarkDTO>(url, rdto, { withCredentials: true })
.pipe(
map(r => new MarkDTO(r)),
tap(newMark => this.storage.update(newMark, rcc))
);
}
I have the following searchService.search method that returns a forkJoin of two api calls.
I want the calls to execute simultaneously which they are but I also want each response back as a single object that can be passed into my SearchSuccess action and processed immediately without waiting for all calls to complete. Currently they are returning as an array of responses and only upon completion of both API calls - as this is what forkJoin is used for.
My issue is that I'm struggling to find another operator that does what I want.
Or perhaps the code pattern requires some redesign?
action:
#Effect()
trySearch: Observable<Action> = this.actions$.pipe(
ofType(SearchActionTypes.TrySearch),
switchMap((action: TrySearch) =>
this.searchService.search(action.payload)
.pipe(
map((data) => new SearchSuccess(data)),
catchError(error => of(new SearchFail(error))),
),
),
);
SearchService (snippet):
search(searchForm: SearchForm): Observable<any> {
const returnArray = [];
if (searchForm.searchClients) {
const searchClientParams = new Search();
searchClientParams.searchPhrase = searchForm.searchPhrase;
searchClientParams.type = SearchType.Client;
const searchClients = this.objectSearch(searchClientParams);
returnArray.push(searchClients);
}
if (searchForm.searchContacts) {
const searchContactParams = new Search();
searchContactParams.searchPhrase = searchForm.searchPhrase;
searchContactParams.type = SearchType.Contact;
const searchContacts = this.objectSearch(searchContactParams);
returnArray.push(searchContacts);
}
return Observable.forkJoin(returnArray);
}
If I understand it correctly returnArray contains two Observables and you want to wait until they both complete but still you want to emit each result separately.
Since forkJoin emits all results in a array you could just unwrap it with mergeMap (or concatMap):
this.searchService.search(action.payload)
.pipe(
mergeMap(results => results),
map((data) => new SearchSuccess(data)),
catchError(error => of(new SearchFail(error))),
),