CODEWITHSUNDEEP
angulartypescriptfilterngrxngrx-entity
prabhat gundepalli
prabhat gundepalli

Reputation: 967

Angular & NGRX: Filtering on a selector using NGRX entity

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?

Upvotes: 4

Views: 8484

Answers (3)

llama
llama

Reputation: 1651

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.

Upvotes: 6

gr4viton
gr4viton

Reputation: 1514

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(...)

Upvotes: 0

inorganik
inorganik

Reputation: 25525

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'
 );

Upvotes: 0

Related Questions