Angular & NGRX: Filtering on a selector using NGRX entity

user_7290236 0
Viewed 6615

I am trying to filter out the payload data by a property. 

 //reducer.ts

  case MessagesActionTypes.LOAD_Message_SUCCESS: {
      console.log('reducer='+ 
      JSON.stringify(action.payload.Messages));//receiving data here
      return adapter.addAll(action.payload.Messages, state);
    }

    export const getSelectedMessageId = (state: MessageState) => state.selectedMessageId;

// get the selectors
const { selectIds, selectEntities, selectAll, selectTotal } = adapter.getSelectors();


// select the array of Messages
export const selectAllMessages = selectAll;

Below is the selector

 //     Selector.ts

export const selectHomeQueues = createSelector(
  fromReducer.selectAllMessages,
 (messages) => messages.filter(message => message.queue === 'HOME')
 );

I am receiving data in the reducer but getting error in the selector during runtime ERROR TypeError: Cannot read property 'map' of undefined

Note: I havent been able to find any example on filtering in NGRX entity selectors anywhere.

How do we filter the selectors in NGRX entity?

ngrx-entity ngrx angular typescript filter
3 Answers

I had exactly the same issue. You need to change your selector very slightly to:

export const selectHomeQueues = createSelector(
  selectAllMessages,
 (messages) => messages.filter(message => message.queue === 'HOME')
 );

Where selectAllMessages is a selector that you have defined simply as:

export const selectAllMessages = createSelector(
  fromReducer.selectAllMessages
 );

The way we were trying to do this originally was via the adapter and i suspect we have made a small blunder or misconception somewhere along the way.

This issue came about as the result of an angular or redux version upgrade. Not sure about the numbers.

user_8629730

I think you can do it like that:

const getSelectHomeQueues = (store) => {
    return store.select(fromReducer.selectAllMessages)
        .filter(message => message.queue === 'HOME')
}

Wherever you want to use it:

getSelectHomeQueues(this.store).subscribe(...)
user_103957680

The error "Cannot read property 'map' of undefined" suggests you are getting an error elsewhere because in the code you provided in your question we don't see map anywhere.

In your selector you are filtering on messages and it passes header which is never used. It appears you are not filtering individual messages, but message queues, so:

export const selectHomeQueues = createSelector(
  fromReducer.selectAllMessages,
 (messages) => messages.queue === 'HOME'
 );
user_5914870
Related