Updating nested data within a child state in NGRX

Hello everyone, I am facing an issue with implementing an entity that includes another entity within the interface. Please excuse any grammatical errors in my English. I am currently having trouble updating the child entity and I'm not sure if there is a mistake in the code or if I am approaching it correctly.

Is it advisable to have nested states in NgRx? Apologies for my limited understanding; I am new to using NgRx and Angular.

https://i.sstatic.net/nyqvC.png

// Here, I am passing the parent id and the data I need to update in the nested child data
export const TestUpdate = createAction(
  '[testtttt] Load WorkFromHomes Description Success',
  props<{ id: number; WorkFromHomeDescription }>()
);

export interface WorkFromHomeDescription {
  id: number;
  wfmId: number;
  day: Date;
  awaDescription: string;
  startTime: string;
  endTime: string;
  targetDeliverables: string;
  accomplishment: string;
  evidence: string;
  createdBy?: any;
  dateCreated?: any;
  modifiedBy: number;
  dateModified: Date;
  employeeId: number;
}

export interface WorkFromHome {
  id: number;
  wfmStart: Date;
  wfmEnd: Date;
  employeeId: number;
  immediateSupervisorId: number;
  vpId: number;
  isApprove: boolean;
  createdBy?: any;
  dateCreated?: any;
  modifiedBy: number;
  dateModified: Date;
  workFromHomeDescriptions: EntityState<WorkFromHomeDescription>;
}

export interface WorkFromHomeState extends EntityState<WorkFromHome> {
  loaded: boolean;
  loading: boolean;
  error: string | null;
}

export const adapter: EntityAdapter<WorkFromHome> = createEntityAdapter<WorkFromHome>();
export const adapterWorkDesc: EntityAdapter<WorkFromHomeDescription> = createEntityAdapter<WorkFromHomeDescription>();
export const initialState: WorkFromHomeState = adapter.getInitialState({
  loaded: false,
  loading: false,
  error: null,
});
export const WorkFromHomeReducer = createReducer(
  initialState,
  on(WorkFromHomeAction.test, (state, action) => {
    const workdata = action.WorkFromHomeDescription;
    return adapter.mapOne(
      {
        id: action.id,
        map: data => ({
          ...data,
          workFromHomeDescriptions: adapterWorkDesc.updateOne(
            {
              id: workdata.id,
              ...workdata,
            },
            data.workFromHomeDescriptions
          ),
        }),
      },
      state
    );
  })
);

Answer №1

In my personal opinion, I highly recommend utilizing ngrx-immer (I am the creator of this library). By incorporating it into your project, you can easily manage state updates.

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

Working with Typescript: creating closures within a loop

I've encountered a challenge while attempting to incorporate closures in Typescript within a loop. The issue I'm facing is quite significant. for(let car of vehicles) { update(location => { car.location = location; ...

Angular 2's Dependency Injection injects functions instead of objects

My application has a 'store' service that depends on a 'repo' service. The issue I'm facing is that the 'store' service is being injected correctly, but the 'repo' service it receives appears to be a function in ...

The Angular2 jasmine tests are not being properly initialized due to issues with the third party dependency mock

Struggling with creating a test for an Angular service that relies on Apollo. Despite setting up a console log to check the object and result of 'watchQuery()', I keep getting 'undefined' instead of 'TEST' as expected. When l ...

Order of priority for Angular 5 directives

I recently developed a unique custom directive, I18nx, that is used to replace the text of an element: <button i18nx="Forgot Password?" mat-button></button> I am facing an issue where the changes made by MatButton are being lost because I nee ...

Issue with firing the React-Redux action has been encountered

I am currently utilizing React along with react-redux, redux and redux-actions. Within my application, I have a specific action that is responsible for verifying the validity of the token stored in localStorage to ensure it is not expired. This action loo ...

Leveraging WebWorkers in Typescript alongside Webpack and worker-loader without the need for custom loader strings

I've been trying to implement web workers with Typescript and Webpack's worker-loader smoothly. The documentation shows an example of achieving this using a custom module declaration, but it requires the webpack syntax worker-loader!./myWorker. ...

What is the purpose of the @NgModule annotation in Angular Material?

I've been struggling with using Angular-Material Components in different components. Despite watching and reading various tutorials, I still can't seem to get them to work. The error message I keep encountering is: compiler.js:2430 Uncaught Erro ...

Team members

Just started diving into Angular and practicing coding with it while following video tutorials. However, I've stumbled upon something in my code that has left me puzzled. I'm curious about the significance of the line "employees: Employee[]" in ...

The table is too wide for its parent mat-nav-list, stretching to 100%

Here is the code snippet I am using to display a table inside a mat-nav-list: <mat-nav-list> <table> <tr>Node Information</tr> <tr> <td>Name</td> <td *ngIf="activeNod ...

Issues with the functionality of Angular Firebase Authentication Service

I am currently working on setting up an authentication service in Angular that will integrate with Google Firebase for a Login form. However, I have encountered an issue where including the service in the constructor of my LoginComponent prevents me from a ...

Combining values in an Angular project to create a new object with the same properties using TypeScript

Hey there! I hope your day is going well. I'm currently working on calculating multiple objects to create a new one with average values. Here's the schema: export class stats{ assists:number causedEarlySurrender:boolean champLevel:numb ...

Resizing text-areas automatically with Angular

[![enter image description here][1]][1]I am trying to set a maximum height for a text area so that when the user keeps adding text, it will display a scroll bar once it reaches the limit. Currently, my implementation causes the modal to stretch too much wh ...

Creating an Angular Accordion/Zippy Component: A Step-by-Step Guide

I am currently tackling a project involving the presentation of a list of grievances in a zippy/accordion format. The data set I work with is an array of key-value pairs found in my component.ts file, shown below: isExpanded: boolean; complaints: any[] = ...

angular not dynamically updating bootstrap-select component

I am utilizing a bootstrap-select in my webpage that contains dynamic data updated based on filters. The select element is connected to the data through an API. <select appBootstrapSelect data-live-search="true" [(ngModel)]="mCompany&qu ...

How can you create a scenario in Angular Material where items in a toolbar transition to the second line exclusively on mobile screens?

Visit the Angular Material website to see how the toolbar appears on a desktop: https://material.angular.io/ https://i.sstatic.net/KPFMv.png On mobile devices, the menu items Components, CDK, and Guides are displayed on the second line, while github, the ...

Having trouble editing a form with React Hooks and Redux?

Seeking assistance with creating an edit form in React that utilizes data stored in Redux. The current form I have created is displaying the values correctly, but it appears to be read-only as no changes are being reflected when input is altered. Any advic ...

The inputs in the FormArray are not populated with the data from the JSON

I am struggling with outputting data from a JSON object to a FormArray. When I try to display the data, all I get is Object object. Can anyone suggest the best way to tackle this issue and offer advice on improving my code? Here is the StackBlitz link to ...

What is the best way to implement the useCallback hook in Svelte?

When utilizing the useCallback hook in React, my code block appears like this. However, I am now looking to use the same function in Svelte but want to incorporate it within a useCallback hook. Are there any alternatives for achieving this in Svelte? con ...

Angular 16 routing not loading content

I configured the routes in Angular v16 and encountered a blank page issue with the login and register functionality. I suspect it has to do with routing, but after checking multiple times, I couldn't pinpoint the exact problem. Below are snippets of t ...

addImportToModule function results in a return of an empty changes array

I'm currently experimenting with angular schematics to include imports in NgModule. My application is built using Angular 16.2.5. Below is the code snippet of the logic I am working on: import { addImportToModule, insertImport} from '@schematics/ ...