Хобрук: Ваш путь к мастерству в программировании

фильтр в createSelector ngrx с реквизитом

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

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

export const selectMessagesState = createFeatureSelector<MessagesState>('messages');

export const selectAllMessages =  createSelector(
    selectMessagesState,
    fromMessage.selectAll
);

export const selectMessageByVisitorId = createSelector(
    select(selectAll),
    (visitor_id) => map(val => val.filter(c => c.visitor_id == visitor_id))
);

и в компонентах:

export class Message {
    id: number;
    message: string;
    visitor_id: number;
    is_from_visitor: boolean;
    created_at: string;
}
public messages$ : Observable<Message[]>;

public showThread(visitor: Visitor){

   this.messages$ = this.store.select(selectMessageByVisitorId({ visitor_id: visitor.id}));

Однако я получаю Property 'filter' does not exist on type 'unknown' в selectMessageByVisitorId. Я почти уверен, что не следую правильному подходу. То, что я пытаюсь сделать, простое: передать visitor id селектору selectMessageByVisitorId, где он возвращает список сообщений в хранилище функций, отфильтрованных по visitor_id.

Обновление №1

Согласно предложению @Nikhil, я изменил селектор на:

export const selectMessageByVisitorId = ({visitor_id}) => createSelector(
    select(selectAll),
    messages => messages.filter(val => val.visitor_id == visitor_id)
);

Однако я получаю Property 'filter' does not exist on type 'Observable<Message[]>, хотя я импортировал import { filter} from 'rxjs/operators'; (я использую ngrx 8.0).

Итак, я попытался:

export const selectMessageByVisitorId = ({visitor_id}) => createSelector(
    select(selectAll),
    messages => messages.pipe(
            map(val => val.filter(c => c.visitor_id == visitor_id)  ) 
        )
);

но теперь я получаю Type 'Observable<Observable<Message[]>>' is not assignable to type 'Observable<Message[]>'. в файле компонента this.messages$ = this.store.select(selectMessageByVisitorId({ visitor_id: visitor.id}));

angular rxjs ngrx ngrx-entity
28.09.2019

Ответы:


1

map() здесь не нужен, просто используйте filter().

Подход 1:

export const selectMessageByVisitorId = ({visitor_id}) => createSelector(   
    pipe(
     select(selectAll),
     filter(val => val.visitor_id == visitor_id)
    )
);

Подход 2:

export const selectAllMessages =  createSelector(
    selectMessagesState,
    fromMessage.selectAll
);

export const selectMessageByVisitorId = ({visitor_id}) => createSelector(
    selectAllMessages,
    messages => messages.filter(val => val.visitor_id == visitor_id)
);

Тогда подпишитесь на сообщения.

this.messages$ = this.store.select(
  selectMessageByVisitorId({visitor_id: visitor.id})
);

this.messages$.subscribe((messages) => {
  // Handle response.
  console.log(messages);
});
28.09.2019
  • к сожалению, не компилировал, получая Property 'visitor_id' does not exist on type 'unknown' в функции фильтра, также (visitor_id) отображается как тип Observable<Message[] в vscode intellisense, хотя это должно быть число. 29.09.2019
  • Основываясь на вашей версии RxJS, убедитесь, что вы импортируете правильный модуль. Ознакомьтесь с этим ответом. 29.09.2019
  • фильтр был импортирован, однако проблема заключается во входных данных val функции фильтра, которые считаются неизвестными 29.09.2019
  • @YehiaA.Salam - Посмотрите мой отредактированный ответ и дайте мне знать, если у вас возникнут проблемы. 29.09.2019
  • большое спасибо за помощь, я обновил вопрос, близко, но еще не там 29.09.2019
  • @YehiaA.Salam - я отредактировал свой ответ двумя способами. Можете ли вы попробовать оба из них и посмотреть, работают ли они? 29.09.2019
  • Я попробовал второй подход, но при назначении наблюдаемого селектору в this.messages$ = this.store.select(selectMessageByVisitorId({ visitor_id: visitor.id})); ничего не происходит, а точки останова в createSelector вообще не срабатывают. 01.10.2019
  • @YehiaA.Salam - Убедитесь, что вы подписаны на сообщения, как показано в моем ответе. 02.10.2019
    • Новые материалы
    Что нужно знать перед тем, как начать свой первый язык программирования
    Что такое язык программирования и зачем он нам? Языки программирования - это то, что мы используем, чтобы указывать компьютерам, что им делать. Языки программирования - это средство, с..
    Нормализация Юникода
    Нормализация Юникода Когда мы разрабатываем код для очистки тегов HTML, мы можем столкнуться с символами Unicode, такими как символы, эмодзи и другие графические символы. Для анализа таких..
    Лучшее машинное обучение как сервисная компания и лучшие варианты использования
    Оригинальная статья была опубликована в блоге CHI Software . Как мы видим, машинное обучение (ML) быстро произвело революцию в том, как сегодня работает бизнес. В связи с растущим спросом..
    Обнаружение и отслеживание транспортных средств
    Путем проб и ошибок я нашел набор параметров HOG . Извлечение признаков и параметры HOG Была создана функция extract_hog_features , которая берет массив изображений размером 64x64x3 и..
    Начало работы с OpenStack
    Начало участия в OpenStack не для слабонервных. Чтобы начать работу, нужно много времени — настройка учетных записей, linux vm, devstack, Gerrit, панель запуска и IRC. Чрезвычайно сложно понять,..
    «Шаг» в вашу особенность огурца
    Этот пост посвящен тому, как уменьшить ваши неудобства при написании определений шагов в огурце с помощью Vim. Когда я пишу свои огуречные истории, я обычно пытаюсь набросать описание шага в..
    Торговая стратегия «Золотой крест».
    Сможете ли вы превзойти рынок, торгуя пересечением скользящих средних 50 и 200? Отказ от ответственности: материал в этой статье предназначен исключительно для образовательных целей и не должен..