ngrx

问题 I am working on a new angular 4 plus @ngrx 4 project. I wish to have a searching function on the loaded data. For example, all the contacts info have been loaded in the component. The contacts list will be filtered which contact name matched with the search text. Please see screenshot As the data is existed in store and I do not wish to call web api service again. Any idea or demo code would be appreciated. 回答1: You can follow this flow to search what you need on already fetched content: Use

问题 Background One of the reducers in my store deals with things that are selected within the app. The interface for this store (let's called it app ) could look like this: interface IApp { selectedProject: IProject; selectedPart: IPart; } So I want to have a subscription that performs an action only when a different 'project' is selected. I wrote something like this: this.store.select('app') .map((store: IApp) => store.selectedProject) .subscribe((project: IProject) => { // Stuff happens here })

问题 I'm attempting to encapsulate my ngrx state in a shared service class to abstract the implementation details away from my components. Example service class that is registered in my app.module.ts providers @Injectable() export class PatientService { state: Observable<PatientState>; constructor( private store: Store<AppState>, ) { this.state = store.select<PatientState>('patients'); } } I have verified my actions, reducer and effects are working as expected, however, when I subscribe to the

问题 I'm attempting to encapsulate my ngrx state in a shared service class to abstract the implementation details away from my components. Example service class that is registered in my app.module.ts providers @Injectable() export class PatientService { state: Observable<PatientState>; constructor( private store: Store<AppState>, ) { this.state = store.select<PatientState>('patients'); } } I have verified my actions, reducer and effects are working as expected, however, when I subscribe to the

问题 I upgraded my app from Angular 7 to Angular 8 using ng update . When I run it via ng serve , There's a warning printed in my console from ngrx : @ngrx/store: runtime checks are currently opt-in but will be the default in the next major version with the possibility to opt-out, see https://ngrx.io/guide/migration/v8 for more information. The documentation at the provided link talks about ngrx-store-freeze being deprecated. However, my application does not use ngrx-store-freeze , and I have no

问题 Is there a way to pass parameters to ngrx select functions? Following is my use case: I am maintaining list of comments in store. I wrote one component to represent one comment. So, one CommentComponent knows the id of the component object Each comment will have properties like likedBy, reportedBy, ...etc In UI, I am showing all the components using *ngFor Now I want my CommentComponent to subscribe only to one comment object by using id of the component. Right now I am subscribing to all the

问题 I'm currently working on a project that involves state management for individual components using Angular 7 and NGRX. However, I need to make this implementation scalable, meaning it can be used multiple times while still working independent. So far I have managed to get my state running and sorted out all action in my reducer, alongside all effects. Currently I have this in my reducer: export interface State extends fromRoot.State { widgets: WidgetState; } //interface for the specific chunk

问题 I need to have a global Error object in my app state. So I created an http interceptor to dispatch setError action: export interface IlgError { message: string; responseError: HttpErrorResponse; } export const setError = createAction("[Global] Error Occurred", props<{ errorObj: IlgError }>()); but when I dispatch I get the error: Error: Detected unserializable action at "errorObj.responseError" My settings for app module: StoreRouterConnectingModule.forRoot({ routerState: RouterState.Minimal

问题 I am trying to return the result of a forkJoin in my effect using ngrx store, like this pseudocode demonstrates: @Effect() someEffect$: Observable<Action> = this.action$.pipe( ofType<SomeActionType>(ActionTypes.SomeActionType), switchMap((action: any) => this.http.get<any>('some/url').pipe( map(someResult => { // this implementation is unimportant, just the gist of the flow I'm after const potentialResults = oneOrMany(someResult); if( potentialResults.length === 1 ) { return new SomeAction

问题 I use Angular 7.1.4 My Effect: @Injectable() export class LoginEffects { constructor(private actions$: Actions, private authService: AuthenticationService) { } @Effect({dispatch: true}) loginRequest$: Observable<any> = this.actions$.pipe( ofType(LoginActionsType.LOGIN_REQUEST), exhaustMap(payload => { // it might be switchMap, the error is the same. console.log(payload); return this.authService.login(payload.user, payload.password) // TypeScript Errors: Property 'user' does not exist on type