Ngrx: Uniting the simple store method with entity state - A comprehensive guide

Apologies if this has been asked before. I am struggling to find a solution for my current issue.

I am trying to make my store state more complex using ngrx/entity, but I am having trouble implementing it correctly.

Below are the models in my reducer:

export interface State extends EntityState<BagParametres> {
    SimpleBag: BagParametres;
}

export const adapter: EntityAdapter<BagParametres> = createEntityAdapter<BagParametres>({
    selectId: (params: BagParametres) => params.id
});

export const initialState: State = adapter.getInitialState({
    SimpleBag: defaultParams,
    RareBags: {
        ids: [],
        entities: []
    }
});

The expected store structure:

{
    SimpleBag: {
        //params
    },
    RareBags: {
        ids: [2, 3, 4 //, ...etc],
        entities: [
            { id: 2 //, etc params },
            { id: 3 //, etc params },
            { id: 4 //, etc params }
            // ... and so on
        ]
    }
}

The current store structure I am getting:

{
    SimpleBag: {
        id: 1
        // etc params
    },,
    RareBags: {
        ids: [],
        entities: []
    },
    ids: [2, 3, 4 //, ...etc],
    entities: [
        { id: 2 //, etc params },
        { id: 3 //, etc params },
        { id: 4 //, etc params }
        // ... and so on
    ]

}

Can someone guide me on how to place 'ids' and 'entities' inside 'RareBags'?

Answer №1

Your state configuration seems to be mixing different entities storage. It would be better to have separate storage for each entity.

export interface State {
    basicBag: BagParameters;
    exquisiteBag: ExquisiteBagState
}

export interface ExquisiteBagState extends EntityState<BagParameters> {}

export const exquisiteAdapter: EntityAdapter<BagParameters> = createEntityAdapter<BagParameters>({
    selectId: (params: BagParameters) => params.id
});

export const initialSetup: State = {
    basicBag: defaultParams,
    exquisiteBag: uniqueAdapter.getInitialState({})
};

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

Encountering TypeScript error 2345 when attempting to redefine a method on an Object Property

This question is related to Object Property method and having good inference of the function in TypeScript Fortunately, the code provided by @jcalz is working fine; const P = <T,>(x: T) => ({ "foo": <U,>(R: (x: T) => U) => ...

I am on the lookout for an Angular 2 application that utilizes Gulp to generate a distribution folder with the newest @angular frameworks

I'm on the lookout for an Angular2 application that incorporates Gulp to generate a 'dist' folder using the most recent @angular libraries. Although I've come across some online examples, they do not utilize the latest @angular librari ...

Ways to prevent any controls or clicks in the background page from functioning while an Angular Material dialog is open

                 In our application using angular material dialog version 7, we have cells that are editable in the dialog box as well as on the main page with text areas and input fields. When the dialog box is open, if I press ctrl+z, the undo ...

Issue with Angular and rxjs: Subscription provider not found

Trying to establish communication between a service and component in Angular, where the service holds a value and the component subscribes to its changes. Currently utilizing rxjs Subscription, but encountering an issue: Uncaught (in promise): Error: No p ...

The ReactJS TypeScript error is notifying that the property 'match' is not found on the type 'Readonly<{children?:ReactNode}> & Readonly<MyProps>'

I am encountering an issue while trying to simultaneously type the props of my component and utilize a URL param. The error message I receive is as follows: Property 'match' does not exist on type 'Readonly<{children?:ReactNode}> ...

Acquiring the Auth0 authentication token

Currently, I am using the Angular SDK of Auth0 and everything seems to be functioning correctly except for retrieving the token. At the moment, I am manually obtaining the token from my dashboard. The method in Auth0Service called getAccessTokenSilently i ...

Update the data in Firebase, but revert it back to the original state after a few seconds with the use of "angularFire."

I'm currently working on updating data in the Firebase Realtime Database using Angular and AngularFire. The issue I'm facing is that even though the data changes successfully, it reverts back to the original data after a few seconds. Below is the ...

Choose particular spreadsheets from the office software

My workbook contains sheets that may have the title "PL -Flat" or simply "FLAT" I currently have code specifically for the "PL -Flat" sheets, but I want to use an if statement so I can choose between either sheet since the rest of the code is identical fo ...

How can I eliminate HTML elements from a string using JavaScript?

Currently, I am utilizing the rich text editor feature of the primeng library. It automatically converts any text I input into HTML format. However, there are instances when I need to display this content in plain text. Is there a straightforward method in ...

Use Django REST to consume an API on the server side, and then display it on the client side using Angular

I recently transitioned my Angular app that was consuming an API client-side to split into backend/frontend architecture using Django REST framework. This decision was made to enhance security by keeping API credentials hidden. The migration was successful ...

Understanding Typescript event handling in React

Encountering issues when attempting to build my React/Typescript app using the MouseEvent type in an event handler: private ButtonClickHandler(event: MouseEvent): void { ... } The error message received is as follows: error TS2322: Type '{ onCl ...

"Organizing Data with Angular 2's Sorting Pipe for Arrays of

Guide to Creating a Sorting Pipe in Angular 2 Using an Array of Objects Initial Challenge: I am working with a TODOs list (Todo[ ]), and I need to sort it every time modifications are made. The desired outcome is to have completed todos appear at the bot ...

Top picks for ReactJS Typescript accounts

As a novice programmer, I am working on learning ReactJS/NodeJS/Typescript through project-based practice. Currently, I am developing a social media platform and have encountered an issue. I want to display different random users from my MySQL database in ...

Using Angular and TypeScript: A guide to binding an ngModel to a variable key within an object

I have an object called WeeklyDriver with various keys. My goal is to iterate over an array of objects containing WeeklyDriver instances (referred to as drivers in my code), and then loop through a specific set of keys belonging to the WeeklyDriver object: ...

Having trouble with deserialization in Asp.net Core Web API - need help!

Currently, I am working with ASP.net core web api alongside Angular 10. Upon sending a post request from the Angular project, the correct JSON object is being passed. The POST method on the API side is hit successfully. However, when attempting to deserial ...

The automatic inference of function argument types and the implementation of conditional types

I'm facing a specific scenario: There's a function that takes in a boolean and returns either a RealItem or an ImaginaryItem. I'm using conditional types to determine the return type based on the boolean argument. type RealItem = { color: s ...

Excluding node modules when not included in tsconfig

Within my Angular project, there is a single tsconfig file that stands alone without extending any other tsconfigs or including any additional properties. Towards the end of the file, we have the following snippet: "angularCompilerOptions": { ...

What is the best way to implement asynchronous guarding for users?

Seeking assistance with implementing async route guard. I have a service that handles user authentication: @Injectable() export class GlobalVarsService { private isAgreeOk = new BehaviorSubject(false); constructor() { }; getAgreeState(): Obser ...

Vue.js is unable to recognize this type when used with TypeScript

In my code snippet, I am trying to set a new value for this.msg but it results in an error saying Type '"asdasd"' is not assignable to type 'Function'. This issue persists both in Visual Studio and during webpack build. It seems like Ty ...

ngx hierarchical dropdown

Is it possible that the 'disabled' attribute is not a recognized property of the 'ngx-dropdown-treeview' component? The ngxDisabledOnSelector property seems to be malfunctioning in my specific case. This is my code snippet: <ngx-dr ...