Я застрял с проблемой. Я загружаю некоторых пользователей в список выбора матов внутри формы. В первый раз все работает нормально, но когда я пытаюсь обновить sh страницу, селектор возвращает «undefiened».
В первый раз запускаются и GET_USERS, и GET_USERS_SUCCESS (и я вижу сообщение журнала консоли «loadUserTest» ), но когда я обновляю sh страницу, запускается только GET_USERS, но без успеха и без консольного сообщения.
Другими словами, при refre sh должна быть проблема, потому что эффект не run .. Сообщение об ошибке в консоли: 'ERROR TypeError: Невозможно прочитать свойство' users 'of undefined' , и это имеет смысл, поскольку селектор не может найти какие-либо данные.
Кто-нибудь видит в чем может быть проблема?
Действия
/*--------------GetAllUsers--------------*/
export class GetUsers implements Action {
readonly type = ActionTypes.GET_USERS;
}
export class GetUsersSuccess implements Action {
readonly type = ActionTypes.GET_USERS_SUCCESS;
constructor(public payload: User[]) {}
}
export class GetUsersError implements Action {
readonly type = ActionTypes.GET_USERS_ERROR;
constructor(public payload: string) {}
}
Эффект
@Effect()
loadUsers$: Observable<Action> = this.actions$.pipe(
ofType(usersActions.ActionTypes.GET_USERS),
switchMap(() => {
console.log("loadUserTest");
return (
this.userResource.getUsers().pipe(
map((users: User[]) => new usersActions.GetUsersSuccess(users)),
catchError((err) => {
console.log("errorTest");
return of(new usersActions.GetUsersError(err)) }),
)
);
})
);
Редуктор
case usersActions.ActionTypes.GET_USERS_SUCCESS: {
return adapter.addAll(action.payload, {
...state,
loading: false,
loaded: true,
});
}
case usersActions.ActionTypes.GET_USERS_ERROR: {
return {
...state,
entities: {},
loading: false,
loaded: false,
error: action.payload,
};
}
Селектор
import { createSelector } from '@ngrx/store';
import { AppState } from '../../../core/state';
import { adapter } from './users.adapter';
const { selectAll } = adapter.getSelectors();
export const selectState = (state: AppState) => state.user.users;
export const getUsers = createSelector(selectState, selectAll); //Problem!
Create.ts
ngOnInit() {
this.createEventForm();
this.store$.dispatch(new fromUsers.GetUsers());
this.users$ = this.store$.pipe(select(fromUsers.getUsers));
}
Html
<mat-selection-list class="form-group" #selectedUsers formControlName="users">
<mat-list-option *ngFor="let user of users$ | async" [value]="user">
{{ user.name }}
</mat-list-option>
</mat-selection-list>