Implementing a builder pattern with @Ngrx/Store

Feeling a bit uncertain... I'm wondering if it's suitable, awesome or not advisable to employ a builder pattern to retrieve API response and then apply the builder pattern on that response before storing it in @ngrx/store? And later on when accessing it from the store in my components, would I be able to access the functions implemented on the api response from the builder object?

I'm seeking some input on this... Am I perhaps overthinking this situation... Or is it a beneficial approach to incorporate the builder pattern with @ngrx/store?

Could someone provide assistance with this?

angulartypescriptbuilderngrxngrx-store

Answer №1

There doesn't seem to be a major issue with this approach, aside from the trade-off between memory usage and the convenience of immediately having class instances available if that suits your preference.

However, it is crucial to remember that these Objects must remain immutable. They should have no state and their functions must not alter their own data.

Essentially, by making them immutable you lose the advantages of object instances as they become just a collection of functions tied to read-only data. In this case, the functions on the objects could simply be external functions that operate on the store data instead.

Alternatively, you could create the object instances later based on the data (making sure not to modify any references to the store data).

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

Toggle the visibility of an input field based on a checkbox's onchange event

I am facing a challenge where I need to display or hide an Input/Text field based on the state of a Checkbox. When the Checkbox is checked, I want to show the TextField, and when it is unchecked, I want to hide it. Below is the code snippet for this compon ...

reactjstypescriptcheckboxshow-hide

A guide on using tsc to build a local package

Unique Project Structure I have a unique monorepo structure (utilizing npm workspaces) that includes a directory called api. This api directory houses an express API written in typescript. Additionally, the api folder relies on a local package called @mya ...

node.jstypescriptmonorepotscnpm-workspaces

What is the best way to store values in a map for future reference within a Kotlin class?

Looking to implement a map of key value pairs in Kotlin inside a class that is mutable and can be updated and referenced as needed. Research suggests that using a MutableMap would be the appropriate choice, given its ability to be updated at any point. I ...

typescriptkotlin

Using Javascript or ES6, you can compare a nested array object with another array of elements and generate a new array based on

I am dealing with a complicated array structure as shown below sectionInfo = [{id: 1, name:'ma'}, {id: 2, name:'na'}, {id: 3, name:'ra'}, {id: 4, name:'ka'}, {id: 5, name:'pa'}]; abc = [{id:'1' ...

javascriptarraysjsontypescriptobject

Creating efficient React components with TypeScript and leveraging generic props

I’ve been working on understanding and resolving my issue with React components' generic props. I came across a code example in an article about using TypeScript with functional React components and generic props. Unfortunately, when trying to repli ...

reactjstypescripttypescript-generics

Trouble with the Ngx-Captcha feature

I am currently utilizing https://www.npmjs.com/package/ngx-captcha/v/11.0.0. <ngx-recaptcha2 #captchaElem [siteKey]="'6Leh1ZIjAAAAAG8g0BuncTRT-VMjh3Y7HblZ9XSZ'" (success)="handleSuccess($event)" [useGlobalDomain]="fals ...

javascripthtmlcssangularngxs

Adding a URL link to a mentioned user from angular2-mentions within an Angular 4 application can be achieved in the following way:

Need help with adding a URL RouterLink to mention a user using angular2-mentions. This is the code snippet I currently have: <div class="col-sm-12"> <input type="text" [mention]="contactNames" [mentionConfig]="{triggerChar:'@',maxI ...

javascriptangularangular5

Making an Angular 6 HTTP GET call using HTTP-Basic authentication

When attempting to access a URL that requires Basic Authentication, and returns JSON data, what is the proper way to include my username and password in the following HTTP request? private postsURL = "https://jsonExample/posts"; getPosts(): Observable& ...

javascriptjsonangulartypescriptrest

Why is the dateclick event in PrimeNG's FullCalendar not being emitted when clicking on a date? What is the best way to handle click events on specific dates within the calendar?

I am new to using Angular and PrimeNG, and I am facing challenges while trying to implement the FullCalendar component. The specific component I am referring to can be found here: The issue arises when I attempt to trigger an event when a user clicks on a ...

angulartypescriptprimengprimeng-calendar

Issue: This feature cannot be accessed when using the Angular CLI outside of a project workspace during a legacy application migration

Currently working on updating a legacy Angular application where I need to address some vulnerabilities. After updating the node image in the Docker file (which was also updated previously), I encountered the following issues. Unfortunately, I'm havin ...

node.jsangulardockernpmnode-modules

I am looking to invoke the Token API from Microsoft Graph during an Angular 7+ HTTP request

My goal is to make an API call from my Angular application to retrieve an access token from . With this token, I then aim to access the https://graph.microsoft.com/v1.0/users/##UserId##​​​​​​​​​​​​​/getMemberGroups endpoint withou ...

angularazure-active-directorymicrosoft-graph-apiadal

The issue with Angular2 Material select dropdown is that it remains open even after being toggled

Exploring the world of Node.js, I am delving into utilizing the dropdown feature from Angular Material. However, an issue arises once the dropdown is opened - it cannot be closed by simply clicking another region of the page. Additionally, the dropdown lis ...

angulartypescriptangular-material2

What's the best way to insert values into data binding within a Typescript/ Angular mat Table?

Objective: Create a dynamic table using JSON data <mat-table class="mat-elevation-z8" *ngIf="carrierRates" [dataSource]="carrierRates"> <ng-container *ngFor="let columnName of columnsList" matColumn ...

angulartypescriptangular-materialtypescript2.0

Tips for configuring the node_modules/lib path in an AngularJS project

I have been trying to see if the image is working properly. Is there a way to utilize global libraries for node_module? The installation seems to be in the correct place - c:\user\AppData\Roaming\npm\node_modules However, I a ...

node.jsangularnpm

Trying out cellRenderer in Angular's Ag Grid with Jest to validate values

I am facing an issue where I need to test the actual values displayed in a column of an Ag Grid table. These values are formatted using a cellRenderer based on specific conditions. In my Jest test, I have experimented with various approaches: Using fixtu ...

angularunit-testingjestjsag-gridag-grid-angular

Tips for fixing type declaration in a generic interface

Here is a simple function that constructs a tree structure. interface CommonItem { id: string parent: string | null } interface CommonTreeItem { children: CommonTreeItem[] } export const generateTree = <Item extends CommonItem, TreeItem extends ...

typescript

Integrate attributes from several personalized hooks that utilize useQuery with secure data typing in React Query

I am currently facing a challenge where I have multiple custom hooks that return query results using useQuery. My goal is to combine the return values from these hooks into one object with the following structure: { data, isLoading, isFetching, isS ...

reactjstypescripttypescript-genericsreact-query

RxJS map() operator not providing the desired outcome when used with Angular's HttpClient

I am currently in the process of learning about how to use the map() operator in RxJS. Here is an example that I have been working on which seems to be functioning as expected. In this specific case, each name in the array will be combined with the text " ...

angularrxjsrxjs-observables

incorrect implementation of react lifecycle phases

My Sharepoint Framework webpart includes a property side bar where I can choose a Sharepoint List, and it will display the list items from that list in an Office UI DetailsList Component. Although all REST calls are functioning properly during debugging, ...

javascriptreactjstypescriptsharepointspfx

"Sequencing http.get requests in Angular 2 using

In my service, I have a series of http.get requests structured as follows: constructor(private http:Http) {} getDetails(sysID:string){ var details; this.http.get('https://blahURL').map(res => res.json().filter(f => f.id == another.id)[0] ...

angularhttptypescriptrxjs