The type {properties .....} is incompatible with the type ActionReducer<AdminState, Action> in Angular 12 using NGRX

Implementing NGRX library for redux to organize the state of the application in a structured way:

export interface ApplicationState {
    adminState: AdminState
}

export interface AdminState {
    adminProductCategory: ProductCategoryState;
    adminProductVendor: VendorState;
    adminProductSubCategory: ProductSubCategoryState;
    products: ProductsState;
    product: ProductState
}

In the app module:

imports: [
    StoreModule.forRoot(reducers, { metaReducers }),
    EffectsModule.forRoot([]),
    StoreDevtoolsModule.instrument({
      maxAge: 25
    })
  ],

Index.ts:

export const reducers: ActionReducerMap<ApplicationState> = {
  adminState: AdminState = {
    adminProductCategory: AdminProductCategoryReducer,
    adminProductVendor: AdminProductVendorReducer,
    adminProductSubCategory: AdminProductSubCategoryReducer,
    products: ProductsReducer,
    product: ProductReducer,
  }
};


export const metaReducers: MetaReducer<ApplicationState>[] = [];

An exception occurred:

Type '{ adminProductCategory: (state: ProductCategoryState, action: Action) => any; adminProductVendor: (state: VendorState, action: Action) => any; adminProductSubCategory: (state: ProductSubCategoryState, action: Action) => any; products: (state: ProductsState, action: Action) => any; product: (state: ProductState, acti...' is not assignable to type 'ActionReducer<AdminState, Action>'.

'AdminState' only refers to a type, but is being used as a value here.

Reducer function:

export function AdminProductCategoryReducer(state: ProductCategoryState | undefined, action: Action): any {
  return reducer(state, action);
}

Answer №1

If you're receiving this message, it's because the AdminState is being used as a value adminState: AdminState within object brackets {}, which should only be done within class/function brackets.

To fix this issue, simply remove the AdminState from this section of the code and maintain it as shown below:

export const reducers: ActionReducerMap<ApplicationState> = {
  adminState: {
    adminProductCategory: AdminProductCategoryReducer,
    adminProductVendor: AdminProductVendorReducer,
    adminProductSubCategory: AdminProductSubCategoryReducer,
    products: ProductsReducer,
    product: ProductReducer,
  }
};

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

update angular component after deleting an item

After deleting a contact in the table, I'm trying to refresh my contact list page but it's not working. Any suggestions? This is the list of contacts in the contact.component.ts file Swal.fire({ title: 'Do you want to delete this contac ...

Incorporating a stylish background image into an EJS template

I'm able to successfully display an image from my app.js file in the main ejs file, but when I try to set it as a background image, it doesn't show up. Any thoughts on what might be causing this issue? This is my app.js file: const express = re ...

What is causing the CSS transition to fail in the updated DOM?

When attempting to apply a CSS transition as shown in the following code snippet: https://jsfiddle.net/sunyuu/e58sfeva/17/ var Main = { data () { return { isActive: false, childStyle: {} }; }, methods: { sho ...

Utilizing a parent scope variable in a callback function

This question delves more into the concept of JavaScript Closures rather than Firebase. The issue arises in the code snippet below, where the Firebase callback fails to recognize the variable myArr from the outer scope. function show_fb() { var myAr ...

Improving data in a table using ajax and JQuery

I am currently working on updating a table utilizing data from AJAX/JSON. Below is my JQuery code: Adjusted to simplify execution with functions. $(document).ready(function() { //var userid = $( ".migrating" ).data( "userid" ); function ajaxUpda ...

Animate CSS with Javascript in reverse direction

Forgive me if this is a silly question, but I'm having trouble. I need a slide-in navigation menu for smaller screens that is triggered by JavaScript. Here is what I currently have: HTML <nav class="responsive"> <ul class="nav-list unstyl ...

The BeanStub initialization failed due to a missing bean reference to frameworkOverrides

I recently updated my ag-grid version to 23.2.0 in my Angular 7 project. Everything was working fine, but when I tried filtering a page and then navigating away, I encountered the following error message: "unable to find bean reference frameworkOverrides ...

The lifespan of my cookie is limited

I am utilizing the jQuery.min.js from https://github.com/carhartl/jquery-cookie and my cookie code looks like this: $(function() { //hide all divs just for the purpose of this example, //you should have the divs hidden with your css //check ...

Zod combinator that accepts a dynamic field name

When converting XML to JSON, my library outputs {MyKey: T} for single-element lists and {MyKey: T[]} for multi-element lists. The equivalent TypeScript type is type XmlJsonArray<T, element extends string> = Record<element, T | T[]>. To implemen ...

Error encountered during XML parsing: root element not found. Location: Firefox Console

While I am using ASP.NET MVC, I keep encountering this error specifically in Firefox. Can anyone help me understand why this error message is popping up? What could be causing it? I am unable to pinpoint the source of this error. Does anyone have any insig ...

What is the substitute for <center> tag in AngularJS?

Error: Template parse errors: 'center' is not a recognized element: 1. If 'center' is supposed to be an Angular component, make sure it is included in this module. 2. To permit any element, add 'NO_ERRORS_SCHEMA' to the ' ...

Is npm bundled with node-gyp?

I am currently experiencing an issue where running npm install locally does not produce much output when using npm v6.14.9. However, when I deploy to the server, it generates some incomprehensible messages like: gyp info spawn args ['some properties a ...

Managing data in Vuex by updating it from a child component using $emit

I'm currently working on a Vue app that has the capability to randomize a title and subtitle or allow users to manually edit these values using a custom input component. The challenge I'm facing is updating the parent component and state to refle ...

Tips to Avoid Multiple Executions of Javascript Code due to Caching

When I make a request to my Asp.net-MVC application, it returns a partial-view. public ActionResult AccountDetails() { return PartialView("~/Views/partials/Account/Details.cshtml"); } To load the partial view in my form, I use the following ...

Is it unorthodox to utilize constructor instances as prototypes in "WebGL - Up and Running"?

In the book "WebGL - Up and Running," a unique custom geometry is created in a rather straightforward manner. However, what caught my attention was the penultimate line of code. Here's how it looked: Saturn.Rings = function ( innerRadius, outerRadius ...

Cryptocurrency price tracker with sleek Bitcoin symbol and FontAwesome icons

My assignment involved creating a function that retrieves Bitcoin trades from a JSON URL, allows users to change the interval with buttons, uses fontawesome arrows to indicate rate changes (up/down/no change), and displays the data on a website. Everythin ...

Issue encountered when transitioning from Angular 8 to Angular 9: Value discrepancy at index 0

While updating my Angular project from version 8 to 9, I encountered an issue after following the update guide on update.angular.io and running npm update. When attempting to compile the website using ng serve, the following error occurred: ERROR in Faile ...

Is there a way to modify the Javascript for this Contact Form to trigger a different action if a specific key is pressed instead?

I have been working on a Contact Form that integrates Google Scripts. Everything seems to be functioning well as it successfully sends emails and formats them properly in my inbox. However, there are two issues that I am encountering: -I want to exclude t ...

What is the best way to perform a query in Angular using Firebase Firestore?

I am attempting to execute queries in Angular 6 using Firebase Firestore. I have this code, and I have already installed the package "npm firebase @angularfire" but it is not working: import { Component } from '@angular/core'; import { A ...

Two tags attached to four hypertext links

Within my HTML code, I have hyperlinks present on every line. However, I am seeking to eliminate these hyperlinks specifically from "your previous balance" and "your new balance".https://i.sstatic.net/ekVGT.png In the following HTML snippet: <tr *ngFor ...