Блог

Главная - Вопросы по программированию - Угловая — База Службы Сбора Сущностей Ngrx — Сериализация

Угловая — База Службы Сбора Сущностей Ngrx — Сериализация

#angular #ngrx #ngrx-data

Вопрос:

В моем текущем проекте у меня есть серверная часть с nestjs и интерфейс в angular.

Я загружаю некоторые данные из бэкэнда в своем сервисе, используя сущность ngrx следующим образом:

календарь-event.service.ts

 @Injectable({
  providedIn: 'root'
})
export class CalendarEventService extends EntityCollectionServiceBase<CalendarEvent> {

  constructor(elementsFactory: EntityCollectionServiceElementsFactory) {
    super('CalendarEvent', elementsFactory);
  }
}

И у меня есть настройка метаданных сущности

 import {
  EntityMetadataMap,
  EntityDataModuleConfig,
  DefaultDataServiceConfig,
} from '@ngrx/data';

const entityMetadata: EntityMetadataMap = {
  CalendarEvent: {},
};

const pluralNames = {};

export const entityConfig: EntityDataModuleConfig = {
  entityMetadata,
  pluralNames,
};

export const defaultDataServiceConfig: DefaultDataServiceConfig = {
  entityHttpResourceUrls: {
    CalendarEvent: {
      collectionResourceUrl: 'http://localhost:3000/api/calendar/',
      entityResourceUrl: 'http://localhost:3000/api/calendar/',
    },
  },
};

Мои данные загружаются нормально, когда я загружаю их из app.component.ts

 import { Observable } from 'rxjs';
import { Component, OnInit } from '@angular/core';
import { CalendarEventService } from './shared/services/calendar-event.service';
import { CalendarEvent } from 'angular-calendar';

@Component({
  selector: 'app-root',
  template: `
    <app-shell class="app-shell">
      <router-outlet></router-outlet>
    </app-shell>
  `,
})
export class AppComponent implements OnInit {
  title = 'memento-front';
  events$: Observable<CalendarEvent[] | any>;

  constructor(private readonly events: CalendarEventService) {
    this.events$ = this.events.filteredEntities$;
  }

  ngOnInit(): void {
    this.events.load();
  }
}

Я их прекрасно вижу:

 { "id": 2, "title": "Second event", "start": "2021-08-13T17:22:43.192Z", "color": { "primary": "#1e90ff", "secondary": "#D1E8FF" } }

Чего я пытаюсь добиться, так это когда данные сериализуются вместо того, чтобы указывать дату начала строки, создавая объект даты. Идея состояла бы в том, чтобы сделать что-то вроде

 const entityMetadata: EntityMetadataMap = {
  CalendarEvent: {
    filterFn: (events) => {
      events.map(event => event.start = new Date(event.start));
      return events;
    }
  },
};

Но вместо того, чтобы делать это при вызове filterFn, делайте это при выполнении http-вызова, прежде чем он станет неизменяемым

Я попытался найти сериализацию в базе службы сбора сущностей ngrx, но не нашел ничего, что дало бы мне знать, как я мог бы предпринять какие-либо действия со свойствами данных при загрузке из http-вызова

Ответ №1:

Я попытался найти сериализацию в базе службы сбора сущностей ngrx, но не нашел ничего, что дало бы мне знать, как я мог бы предпринять какие-либо действия со свойствами данных при загрузке из http-вызова

Вы можете выполнить следующие действия, чтобы выполнить действие со свойствами данных при вызове api:

app.component.ts :

 this.events$ = store.select(selectAllEvents);
this.eventsService.load().subscribe(events => {      
  this.store.dispatch(EventsApiActions.evensLoaded({ events }));
});

app/events/actions/events-api.actions.ts 

 export const eventsLoaded = createAction(
    "[Events API] Events Loaded Success",
    props<{ events: CalendarEvent[] }>()
);

app/shared/state/events.reducer.ts 

 export interface State {
  collection: CalendarEvent[];
  ...
}

export const initialState: State = {
    collection: [],
    ...
};

export const eventsReducer = createReducer(
    initialState,
    on(EventsApiActions.eventsLoaded, (state, action) => {
        return {
            ...state,
            collection: action.events
        };
    }),
    ...
);

Теперь вместо того, чтобы изменять коллекцию событий с collection: action.events помощью , вы можете перейти в свою служебную функцию filterFn с помощью:

 const mappedEvents = (events: CalendarEvents[]) =>
    events.map((event) => event.start = new Date(event.start))
});

Теперь вы можете использовать его здесь:

 on(EventsApiActions.eventsLoaded, (state, action) => {
    return {
        ...state,
        collection: mappedEvents(action.events)
    };
}),

Наконец, селекторы ( events.reduce.ts ):

 export const selectAll = (state: State) => state.collection;
export const selectEventsState = (state: State) => state.events;
export const selectAllEvents = createSelector(
    selectEventsState,
    selectAll
);
Метки: