Невозможно создать допустимое состояние с полезной нагрузкой для редуктора из документации ngrx

Question

У меня проблема с обновлением состояния в ngrx редукторе для действия loadSuccess

Состояние после load действия

{
  dashboard: {
    serverList: null,
    isLoading: true,
    error: 'zero'
  }
}

Состояние после loadSuccess действия

{
  dashboard: {
    isLoading: false,
    error: 'zero'
  }
}

const t1 = (state, action) => {
  return ({...state, serverList: action.payload.servers});
};

const reducer = createReducer(initialState,
  on(load, state => ({...state, isLoading: true})),
  on(loadSuccess, (state, {servers}) => ({...state, serverList: servers})),
//  on(loadSuccess, t1)
);



export function dashboardReducer(state: State | undefined, action: Action) {
  return reducer(state, action);
}

когда я поменяю on(loadSuccess.... строку с состоянием t1, она работает. Я на самом деле проверяю, что является объектом в параметре, и выбираю значение, которое я хочу. Но почему это не удается для on(loadSuccess, (state, {servers}) => ({...state, serverList: servers}))?

Определение действий

export const load = createAction('[Dashboard Component] Load');
export const loadSuccess = createAction('[Dashboard Component] LoadSuccess', props<{servers: ServerInfo[]}>());

Answer 1

2-й параметр данной функции содержит действие, а не полезную нагрузку.

 on(loadSuccess, (state, {payload}) => ({...state, serverList: payload.servers})),

Answer 2

Я обнаружил, что проблема возникла из ngrx docs, из определения эффекта.

@Injectable()
export class MovieEffects {

  loadMovies$ = createEffect(() => this.actions$.pipe(
    ofType('[Movies Page] Load Movies'),
    mergeMap(() => this.moviesService.getAll()
      .pipe(
        map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
        catchError(() => EMPTY)
      ))
    )
  );

  constructor(
    private actions$: Actions,
    private moviesService: MoviesService
  ) {}
}

Действие здесь определяется как { type: '[Movies API] Movies Loaded Success', payload: movies }

После изменения использовать прямо определенное выше действие export const loadSuccess = createAction('[Dashboard Component] LoadSuccess', props<{servers: ServerInfo[]}>()); это работает

loadSomething$ = createEffect(() => this.actions$.pipe(
    ofType(DashboardActions.load),
    mergeMap(() => this.service.getServers().pipe(map(servers => Actions.loadSuccess({serverList: servers})))),
    catchError(() => of({type: '[Dashboard Component] ServerInfo Loaded Error'}))
    )
  );

Answer 3

Если вы расскажете, как вы определяете действие loadSuccess?

выглядит так, как будто у вас есть свойство payload и вы должны использовать его как payload.servers.