Error: Unable to execute NGRX selector - x is not a valid function

I'm puzzled as to why I keep encountering a TypeError with this code. Is there something obvious that I'm overlooking?

 export const selectAllUsers = createFeatureSelector<ReadonlyArray<User>>('users');

 export const selectUser = () =>
  createSelector(selectAllUsers, (users) => {
    return users.find(
      (user) =>
        user.name === "Mr.Doe"
    )});

This scenario is reminiscent of the Book example in the ngrx walkthrough and triggers the following error in the browser console:

 ERROR TypeError: users.find is not a function
    selectUser user.selector.ts:13
    memoizedProjector ngrx-store.mjs:697

While I am able to retrieve my user using selectUser, it's perplexing to see this error. It feels like there might be something crucial missing in typescript or store selectors.

Tested on both firefox and chrome browsers running on Linux.

Here are the dependencies from package.json:

   "@angular/animations": "~13.1.2",
    "@angular/cdk": "^13.1.2",
    "@angular/common": "~13.1.2",
    "@angular/compiler": "~13.1.2",
    "@angular/core": "~13.1.2",
    "@angular/forms": "~13.1.2",
    "@angular/material": "^13.1.2",
    "@angular/platform-browser": "~13.1.2",
    "@angular/platform-browser-dynamic": "~13.1.2",
    "@angular/router": "~13.1.2",
    "@ngrx/store": "^13.0.2",
    "@ngrx/store-devtools": "^13.0.2",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"`

Edit 1: ERROR TypeError: user.find -> users.find
Edit 2: The user state only contains users (players), here is a screenshot taken from devtools, the names are different, hence the typo above

Answer №1

Shoutout to @Osakr, @mak15, and @MarteenDev for pointing me in the right direction - turns out my user state wasn't just a simple array of players.

If you're having trouble with Angular NGRX like I was, check out this link: Angular NGRX getting error when dispatching to state

I realized that I left a reducer causing some chaos in my state (forgot to normalize it at one point). Surprisingly, things were still kinda working, but I probably didn't refine the reducer enough.

This being my first project, I may have overlooked some details. For more insights, visit:

Big thanks to everyone who pitched in to help!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring how to read class decorator files in a Node.js environment

I've developed a custom class decorator that extracts permissions for an Angular component. decorator.ts function extractPermissions(obj: { [key: 'read' | 'write' | 'update' | 'delete']: string }[]) { re ...

Tips for implementing a multi-layered accumulation system with the reduce function

Consider the following scenario: const elements = [ { fieldA: true }, { fieldB: true }, { fieldA: true, fieldB: true }, { fieldB: true }, { fieldB: true }, ]; const [withFieldA, withoutFieldA] = elements.reduce( (acc, entry) => ...

Guide to dynamically configuring ViewEncapsulation for a Web Component

When initializing a component, I am facing an issue with setting up Shadow DOM based on the browser type (since IE does not support Shadow DOM). To handle this, I check if the browser is IE11 and then configure the encapsulation as Emulated for IE and Sha ...

Embedding Globalize.js into an Angular component

Hey there! I'm currently working on building an Angular 4 application that needs to support L10n. I've decided to incorporate globalize into my project. Below is a snippet of my App component: import { Component, OnInit } from '@angular/c ...

While working on a project that involves TypeScript, Material-UI, and Formik, I encountered an error that originated from

I recently downloaded a project from the following site: https://codesandbox.io/s/gn692 Upon encountering some errors that I couldn't resolve on my own, I decided to download this project to see how it's implemented. Surprisingly, it runs smoothl ...

Controlling a generic interface's acceptance of certain data types in typescript: a guide

Is there a way to restrict a generic interface from accepting specific data types in TypeScript? I understand that I can define acceptable data types for a generic interface in TypeScript. interface exampleInterface<T = void | any>; But what if I w ...

Typescript in Firebase Functions organization

Struggling with typescript organization in my firebase functions. I'm fine keeping trigger functions in index.ts for now, but need help organizing other utility functions elsewhere. Current index.ts setup: import * as functions from 'firebase-f ...

Unable to send a function as props to a child component in TypeScript

Within my application, I have a parent component that holds a state and a setState function. This state and function are then passed down to a child component in order to retrieve values (such as input field data). When the function is triggered in the chi ...

Potential Null Object in Typescript Mongoose: A Concern

Encountering an issue while attempting to locate my user model: Object is possibly 'null'. I would like to find a solution that does not involve suppressing TypeScript's strict rule. const { email, password } = req.body; const user = awai ...

Sending a `refresh` to a Context

I'm struggling to pass a refetch function from a useQuery() hook into a context in order to call it within the context. I've been facing issues with type mismatches, and sometimes the app crashes with an error saying that refetch() is not a funct ...

Adding SVG to Component

I am attempting to embed an SVG element (retrieved using http.get()) into a 'icon' component. export class BgIcon { private svgSrc_: string; icon_: Icon; @Input('svg-src') set svgSrc(value: string) { this.svgSrc_ = value; ...

Using `new Date(device.timestamp).toLocaleString()` in React with typescript results in an invalid date

The timestamp I am receiving is in unix time format. {devices.map((device, index) => { return ( <tr key={index} className="bg-white border-b "> <td className="py-4 px-6"> {getSensor ...

The `ngx-infinite-scroll` feature does not function properly on mobile devices when used in conjunction with the

I'm currently working on an Angular project that utilizes the mat-sidenav layout and routing. I came across an issue when trying to display a list of elements from a database using ngx-infinite-scroll. Following the user guide for ngx-infinite-scroll, ...

In JavaScript, loop through an array of arrays and combine them using the concat

If I have an array like [["a", "b"], ["c", "d"]], is there a way to iterate, reduce, map, or join this array in order to get the desired output of ["ac", "ad", "bc", "bd"]? What if the array is structured as [["a", "b"], ["c", "d"], ["e", "f"]]; how can we ...

Retrieve the product IDs by selecting the checkboxes, then compile a fresh array consisting of the identified IDs

I am currently delving into the realm of typescript/angular2+ as a fledgling student, and I have taken on the task of creating a website to put my newfound knowledge to the test. The view is up and running, but I'm facing some roadblocks as I work on ...

Issues with Angular unit tests failing due to an unexpected phantomJS error

Executing ng test triggers the execution of my 3 unit tests which have been hardcoded to pass successfully, as shown below: describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ ...

Maximizing the potential of Angular 4+ HttpClient through service utilization

Hello, I am seeking advice on how to effectively organize my code structure: Here is a simplified representation of the user interface: export interface User { Account: string; Name: string; EMail: string; PictureURL: string; Department: string; JobTitle ...

Having trouble setting the default value of a select element with 'selected' in Angular's bootstrap?

Click here I've been facing some difficulties in making the 'selected' tag work to pre-select my default select value. It seems like it might be related to the unique pipe I'm using and how Angular handles it. I have experimented with ...

Customizable mongoDB database collection

Is there a more efficient way to make calls to different collections based on a function parameter? I'm exploring the possibility and if it's not feasible, I'll handle it case by case. Currently, I have this code and the goal is to have a u ...

What strategies can be utilized to extract the structure of JSON files imported via a TypeScript asynchronous function?

Examining the example below: export type AppMessages = Awaited<ReturnType<typeof loadMessages>>; export type Locale = "en" | "fr" | "es"; export const loadMessages = async (locale: Locale) => ({ foo: locale ...