Нет успешного действия на refre sh NGRX - PullRequest
0 голосов
/ 28 апреля 2020

Я застрял с проблемой. Я загружаю некоторых пользователей в список выбора матов внутри формы. В первый раз все работает нормально, но когда я пытаюсь обновить 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>

1 Ответ

0 голосов
/ 05 мая 2020

К сожалению, предоставленного вами кода недостаточно для понимания проблемы.

Я могу посоветовать две вещи: проверить эффект и то, что он возвращает после this.userResource.getUsers(), чтобы убедиться, что это массив пользователей.

Если эффект не вызван, то .users упоминается только в

export const selectState = (state: AppState) => state.user.users;

, попытайтесь отладить его, чтобы убедиться, что state имеет user с users.

export const selectState = (state: AppState) => {
  debugger;
  return state.user.users;
};

Я предполагаю, что проблема в одном из этих мест.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...