Utilizing NGRX Entity for Selector-Based Filtering in Angular

Question

Utilizing NGRX Entity for Selector-Based Filtering in Angular

My goal is to extract the payload data based on a specific property.

 //reducer.ts

  case MessagesActionTypes.LOAD_Message_SUCCESS: {
      console.log('reducer='+ 
      JSON.stringify(action.payload.Messages));//data received 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;

Here is the selector being used:

 //     Selector.ts

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

In the reducer, I am able to receive data, but when running the selector, I encounter an error:

ERROR TypeError: Cannot read property 'map' of undefined

Note: I have not been able to locate any examples of filtering in NGRX entity selectors.

How can we effectively filter selectors in NGRX entity?

angular typescript filter ngrx ngrx-entity

Answer 1

Answer №1

I encountered the same problem too. To resolve it, make a slight adjustment to your selector as follows:

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

In this code snippet, selectAllMessages is defined as a simple selector like so:

export const selectAllMessages = createSelector(
  fromReducer.selectAllMessages
 );

We initially attempted to handle this using the adapter, but I believe there may have been a small mistake or misunderstanding made in the process.

This issue arose after upgrading either Angular or Redux, although the exact version numbers are unknown.

Answer 2

I encountered the same problem too. To resolve it, make a slight adjustment to your selector as follows:

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

In this code snippet, selectAllMessages is defined as a simple selector like so:

export const selectAllMessages = createSelector(
  fromReducer.selectAllMessages
 );

We initially attempted to handle this using the adapter, but I believe there may have been a small mistake or misunderstanding made in the process.

This issue arose after upgrading either Angular or Redux, although the exact version numbers are unknown.

Answer 3

Answer №2

If you are encountering the error message "Cannot read property 'map' of undefined," it may be due to an error in another part of your code since there is no reference to 'map' in the code snippet provided in your question.

Upon inspection, it seems that in your selector, you are filtering based on messages but passing header which is not being utilized. It appears that you are filtering message queues rather than individual messages. A corrected version of the code snippet could look like this:

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

Answer 4

If you are encountering the error message "Cannot read property 'map' of undefined," it may be due to an error in another part of your code since there is no reference to 'map' in the code snippet provided in your question.

Upon inspection, it seems that in your selector, you are filtering based on messages but passing header which is not being utilized. It appears that you are filtering message queues rather than individual messages. A corrected version of the code snippet could look like this:

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

Answer 5

Answer №3

I believe this method could be effective:

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

To implement it, simply call:

fetchHomeQueues(this.store).subscribe(...)

Answer 6

I believe this method could be effective:

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

To implement it, simply call:

fetchHomeQueues(this.store).subscribe(...)

Utilizing NGRX Entity for Selector-Based Filtering in Angular

Answer №1

Answer №2

Answer №3

Similar questions

Using pinia always results in undefined arrays within the state

ngIf not working properly with the updated value of [(ngModel)]

Navigate to a new page by utilizing the nav.push function while incorporating a side menu in your

Is it possible to implement a page transition using preact?

Merge two observables together to create a single observable that emits values from both sources. Only one observable will emit values

Sign up for websocket topics and establish numerous connections

Angular 2 - Troubleshooting Issues with Nested Components and @Input Propagation

The argument labeled as 'Subscription' cannot be assigned to the parameter labeled as 'string' in Angular

TS1316 Error: You can only have global module exports at the top level of the file

Troubleshooting the issue of 'is not a function' in browsers when using TS Namespaces

Is it possible to import both type and value on the same line when isolatedModules=true?

Attempting to implement a typeguard in Typescript that relies on the presence of specific content within an element

Ways to stop the MasterComponent from rendering on every route change

Firing an Event with a specific target value using Jasmine

Using Typescript with NodeJs

Webpack converts 'import' statements to 'require'

Ways to detect button click in a separate component

Angular binding and date validation - a powerful combination!

Verify whether a specific value exists in my React array; if it does, display a specific component

Create a hierarchical tree structure using a string separated by dots