I have experience with Angular but I am new to ngrx. I am attempting to retrieve values from my server and display them on the screen. I can see that the values are coming back from the server, and then the effect is triggered by the action:
https://i.sstatic.net/QGMjt.png
However, my simple component is not displaying anything:
ProfileComponent.ts:
export class ProfileComponent implements OnInit {
network$= this.store.select(a=>a.NetworkInfo)
profiles$: Observable<Profile[]> = this.store.select(state => state.Profiles);
constructor(private store:Store<NetAlertState>) { }
ngOnInit() {
this.store.dispatch({ type: '[Profile Component] getAllProfiles' });
this.store.dispatch({ type: '[Profile Component] getNetworkInfo' });
}
}
profile.component.html:
<div *ngFor="let profile of profiles$ | async">
{{ profile.name }}
</div>
net-alert.actions.ts:
export const getAllProfiles = createAction('[Profile Component] getAllProfiles');
export const getNetworkInfo = createAction('[Profile Component] getNetworkInfo');
export const loadProfilesSuccess = createAction('[Profile Component] loadProfilesSuccess',props<{items:Profile[]}>());
export const loadNetworkInfoSuccess = createAction('[Profile Component] loadNetworkInfoSuccess', props<NetworkInfo>());
export const loadProfilesFailure = createAction('[Profile Component] loadProfilesFailure',props<String>());
export const loadNetworkInfoFailure = createAction('[Profile Component] loadNetworkInfoFailure',props<String>());
net-alert.reducer.ts
export const initialState: NetAlertState = {
Profiles:null,
NetworkInfo:null,
isLoading: false,
error: null
}
export const NetAlertReducer = createReducer(
initialState,
on(NetAlertActions.getAllProfiles, state => ({ ...state,isLoading:true ,error:null})),
on(NetAlertActions.loadProfilesSuccess, (state,profiles) => ({ Profiles:profiles,...state ,isLoading:false ,error:null})),
on(NetAlertActions.loadProfilesFailure, (state,err) => ({ ...state,isLoading:false ,error:err})),
on(NetAlertActions.getNetworkInfo, state => ({ ...state ,isLoading:true ,error:null})),
on(NetAlertActions.loadNetworkInfoSuccess, (state,res) => ({ ...state,NetworkInfo:res,isLoading:false ,error:null})),
on(NetAlertActions.loadNetworkInfoFailure, (state,err) => ({ ...state,isLoading:false ,error:err})),
);
export function reducer(state: NetAlertState | undefined, action: Action) {
return NetAlertReducer(state, action);
}
net-alert.effects.ts:
@Injectable()
export class NetAlertEffects {
loadProfiles$ = createEffect(() =>
this.actions$.pipe(
ofType('[Profile Component] getAllProfiles'),
mergeMap(() => this.dataService.getAllProfiles()
.pipe(
map(res => ({ type: '[Profile Component] loadProfilesSuccess', payload: res })),
catchError(() => of({ type: '[Profile Component] loadProfilesFailure' }))
)
)
)
);
constructor(
private actions$: Actions,
private dataService: DataService
) {}
}
net-alert.state.ts:
export interface NetAlertState {
isLoading: boolean;
error: any;
NetworkInfo: NetworkInfo;
Profiles: Profile[];
}
export interface Profile {
Mac: string;
NickName: string;
CreateDate: Date;
Sites?: any;
}
root-state.ts:
export interface AppStates {
netAlert: NetAlertState;
}
export const netAlertReducers: ActionReducerMap<AppStates> = {
netAlert: netAlertRerucers.reducer
};
app.module.ts:
@NgModule({
declarations: [
AppComponent,
ProfileContainerComponent,
ProfileComponent
],
imports: [
HttpClientModule,
BrowserModule,
AppRoutingModule,
StoreModule.forRoot(netAlertReducers),
EffectsModule.forRoot([NetAlertEffects]),
StoreDevtoolsModule.instrument({
maxAge: 25, // Retains last 25 states
logOnly: environment.production, // Restrict extension to log-only mode
}),
RootStoreModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Can anyone point out where I may have made a mistake?
Thank you!