The NGRX state spread operator requires the Type to include a '[Symbol.iterator]()' function

Utilizing NGRX Entity adapter for state initialization has been encountering an issue, specifically with the getInitialState method.

 export const initialState = adapter.getInitialState({
      eventsError: null,
      eventsLoading: false
    });

    export function reducer(
      state = initialState,
      action: EventsActions
    ): State {
      switch (action.type) {

        case EventsActionTypes.getAllEvents: {
          return Object.assign({}, ...state, { // error line
            eventsLoading: true
          });
        }
// ...

An error is triggered when attempting to use the spread operator on the state object:

ERROR in src/app/events/reducers/events.reducer.ts(36,35): error TS2488: Type must have a '[Symbol.iterator]()' method that returns an iterator.

The configuration in my tsconfig.json file is as follows:

    {
  "compilerOptions": {
    "noImplicitAny": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es6",
    "module": "commonjs",
    "experimentalDecorators": true,
    "noEmitHelpers": false,
    "emitDecoratorMetadata": true,
    "declaration": false,
    "lib": [
      "es2015",
      "dom"
    ],
    "moduleResolution": "node",
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "compileOnSave": false,
  "buildOnSave": false
}

Answer №1

If you decide to utilize the Object.assign method, you can achieve the same outcome without using the spread operator:

return Object.assign({}, state, { eventsLoading: true });

This is essentially the same as employing object spread in this manner:

return { ...state, eventsLoading: true }

Object.assign enables the merging of multiple objects, whereas object spread expands the keys of an object into an object literal. In many cases, object spread renders Object.assign unnecessary.

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

Mapping an array in Typescript using Angular to instantiate a class

I have received data from a web API that resembles the structure below. I am looking for guidance on how to properly map the product array into individual Products. My main objective is to convert the eating_time values into JavaScript datetime format. Cu ...

Creating a JSON utility type for an already existing type, such as JSON<SomeExistingType>

Is there any tool or utility available that can accomplish this task? const foo: Foo = { ... } const bar: string = JSON.stringify(foo) const baz: JSON<Foo> = JSON.parse(foo) JSON<Foo> would essentially mirror all the properties of Foo, with th ...

Implementation of a nested interface using a generic and union types

I am seeking to create a custom type that will enable me to specify a property for a react component: type CustomType<T> = { base: T; tablet?: T; desktop?: T; }; export type ResponsiveCustomValue<T> = CustomType<T> | T; This ...

Expanding the Window Object in Typescript with Next.js Version 13

Within my Next.js 13 project, I am looking to enhance the Window object by adding a property called gtag I created an index.d.ts file in the root folder with the following content: index.d.ts declare module '*.svg' { const content: any; exp ...

Dealing with DomSanitizer problem in Angular 2

When using background-image inline for my *ngFor list items, I encountered an issue. In my Component Class, I defined a variable to store a common part of the images' URLs (e.g., ) along with unique parts of the image URLs as this.image (such as qwer ...

Running an Angular-made Chrome extension within an iframe: A guide

I'm currently working on creating a Chrome extension that displays its content in a sidebar rather than the default popup. I've come to realize that in order to achieve this, I need to use an iframe due to the limitations of the default chrome ex ...

What is the best way to retrieve data from a server and display it using Highcharts in Angular 2

This is my chart component and I am trying to display a chart with values from the server. Unfortunately, it's not working even though it works with static values. In the ngOnInit method, I call the web service and store the data in a variable called ...

Retrieving data from a nested JSON array using AngularJS

I am struggling to navigate the intricate nested tree view of child items within a JSON array. I have been grappling with this challenge for days, trying to figure out how to access multiple children from the complex JSON structure. Can someone provide g ...

Angular Email Validator triggers inconsistently based on conditions

I am working on validating email addresses only when they are provided. My approach involves subscribing to the valueChanges function and applying validators based on certain conditions. However, I have encountered an issue where the validator does not tri ...

The object instance is failing to receive the Angular Injected service assignment

I am currently utilizing Angular6 and have the following code: 'use strict'; import {ChangeDetectorRef, Component, OnInit} from '@angular/core'; import {MainService} from "./services/main.service"; import {AppService} from "../../app. ...

Whenever I try to run npm start within my angular component, I encounter a compilation problem

I am currently working on dynamically rendering a component on one of my screens. To achieve this, I am utilizing the componentFactoryResolver.resolveComponentFactory and viewContainerRef.createComponent APIs. I have declared the variable "loadedComp : Glo ...

Methods for hiding and showing elements within an ngFor iteration?

I am working on an ngFor loop to display content in a single line, with the option to expand the card when clicked. The goal is to only show the first three items initially and hide the rest until the "show more" button is clicked. let fruits = [apple, o ...

Using *ngIf with values from an array in *ngFor in Angular 2: How to make it work?

i just started learning angular 2 and ionic, so I'll keep it brief: <ion-card class="acc-page-card" *ngFor="let account of accounts"> <ion-card-content> <!-- Add card content here! --> <ion-item (click)="GoTo('Ac ...

Tips and tricks for sending data to an angular material 2 dialog

I am utilizing the dialog box feature of Angular Material2. My goal is to send data to the component that opens within the dialog. This is how I trigger the dialog box when a button is clicked: let dialogRef = this.dialog.open(DialogComponent, { ...

Retrieving array-like form data in a TypeScript file

I need assistance with passing form inputs into a typescript file as an array in an ionic application. The form is located in question.page.html <details *ngFor="let product of products;"> <ion-input type="text" [(ngModel ...

Step-by-step guide for deploying an Angular 2 CLI app on GitHub

As a front-end engineer, I have limited experience with deployment. Currently, I am working on my pet project using angular-cli. What is the best way to deploy it on GitHub Pages? Are there any other straightforward methods for deployment? ...

Troubleshooting: Unable to Open Page with Google Material Button in Angular 5

Currently, I'm facing an issue with a button that is not opening to a new site despite following what seems like simple steps. <button mat-raised-button href="https://www.google.com/" color="primary">Connect with Stripe</button> I even a ...

Angular Forms, mark a form as invalid if a p-select element retains its original value

I am looking to prevent the submit button from being enabled until a user makes changes in any of the form controls. The challenge I'm facing is that while required input fields are easy to handle, there is also a select control with three options. De ...

Battle of the Blobs: Exploring Blob Source in Google Apps Script

I've been exploring clasp, a tool that allows developers to work with Google Apps Script using TypeScript. Currently, I am working on a script that converts a Google Sheet into a PDF Blob and then uploads it to Google Drive. While the code is execut ...

How to instantiate an object in Angular 4 without any parameters

Currently, I am still getting the hang of Angular 4 Framework. I encountered a problem in creating an object within a component and initializing it as a new instance of a class. Despite importing the class into the component.ts file, I keep receiving an er ...