Angular: Elf facade base class implementation for utilizing store mechanics

What is the most effective way to access the store within a facade base class, allowing for the encapsulation of commonly used methods for interacting with the store?

Imagine we have a store (repository)

export class SomeRepository {
   private readonly store;

  constructor() {
      this.store = createStore()
 }
}

And we have a facade that extends from a base facade

export abstract class BaseFacade {
   protected store: ReturnType<typeof createStore>;

  constructor(protected store: ReturnType<typeof createStore>) {
      this.store = store;
 }

  setEntity(entity: SomeEntity) {
      this.store.update(setEntities(entity))
  }
}

With an implementation of a Concrete Class

@Injectable({ providedIn: 'root'})
export class SomeFacade extends BaseFacade {
     constructor(protected store: Store<SomeRepository>) {       <---- I am facing difficulties here, unsure how to utilize the store
      super(store)
 }
}

In a component

export class SomeComponent implements OnInit {
    constructor(private readonly facade: SomeFacade) {}

    ngOnInit() {
         const entity = { name: 'Jon', age: 30 };
         this.facade.setEntity(entity);   <----- This allows us to use methods from the abstract class without needing to implement them each time a Facade class is defined
    }
}

Answer №1

When it comes to design patterns, there are no absolutes in terms of right or wrong choices. The key is to select the approach that best suits your application.

In my practice, I tend to avoid implementing facades pattern altogether.

In developing my Angular Apps, I follow this specific workflow:

I rely on NGXS as my primary store solution. I have never experimented with elf

Component -> subscribes to state from Store -> Store leverages services for essential business logic operations.

Personally, I believe that using facade can introduce unnecessary complexity and obscure the code flow within an application. In my view, Angular DI + Provider offers sufficient capabilities.

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

Prevent the element attribute from being enabled before the onclick function is triggered

I am attempting to implement a feature in Angular that prevents double clicking on buttons using directives. Below is the pertinent code snippet from my template: <button (click)="onClickFunction()" appPreventDoubleClick>Add</button> And her ...

An issue arises in Angular 17 where the view does not refresh when using setInterval, accompanied by the NG0500

I am currently working on a countdown timer feature where I want to continuously update the 'seconds' value in real-time, but I'm facing an issue with the UI not reflecting these updates. Whenever I attempt to implement this without utilizi ...

The API functions seamlessly with TypeScript, however, during the transpilation process, it fails to locate the model

I am in the process of developing a straightforward API that is capable of Creating, Reading, and Deleting student information within a postgres database. Interestingly, I have encountered an issue when using ts-node-dev without transpiling the files to J ...

Automate your Excel tasks with Office Scripts: Calculate the total of values in a column depending on the criteria in another column

As a newcomer to TypeScript, I have set a goal for today - to calculate the total sum of cell values in one column of an Excel file based on values from another column. In my Excel spreadsheet, the calendar weeks are listed in column U and their correspon ...

Is it necessary for Vue single file components (.vue files) to use `export default` or is it possible to use named exports instead?

export default may no longer be the recommended way to export modules, as discussed in these resources: After changing my Vue components from this: <script lang="ts"> 'use strict'; import {store} from '../../data/store' ...

What direction does Angular2 animation rotate in?

In my Angular2 application, I am trying to create a menu icon that rotates clockwise when shown. The desired animation is for it to rotate from -360 degrees to -180 degrees when displayed and from -180 degrees to 0 degrees when hidden. Currently, the anim ...

Methods for assigning values to a formControl using an array

I have an array of objects and I am attempting to loop through the array, dynamically setting values to a formControl and not displaying anything if the value is null. I have searched for similar solutions but haven't found any references or examples ...

Issue: The TypeError reported is due to the absence of any definition for "_co.category.category_type"

I have two models: CategoryTypes and Categories. Each category type contains multiple categories. These are my two models. Categories Model import { Categories } from '../../categories/Mode/Categories' export class CategoryType { _id: strin ...

actions with frontend routing for CRUD operations

Imagine you are creating a simple CRUD todo application. Whether you choose to use Angular, React, or Vue for routing, the setup will be similar: /todos => see all todos /todos/:id => view one todo by id /todos/:id/edit => edit one todo by id /todos/new ...

The error occurred in Angular with the [dateclass] class specifically within the mat-calendar

I'm currently working on creating a calendar that allows for multiple date selections. I came across a helpful resource on StackBlitz Here is the code snippet for my AppComponent: isSelected = (event: any) => { const date ...

Addressing the reactivity issue when incorporating basic markdown directive into vuejs

In an effort to reduce dependency on vue-i18n formatting, I decided to create a simple Markdown formatter directive that only implements bold, emphasize, and strike-through styles. The current implementation of the directive is as follows: import _Vue ...

The 'ngModel' property cannot be bound to a 'textarea' element because it is not recognized as a valid property

When I run Karma with Jasmine tests, I encounter the following error message: The issue is that 'ngModel' cannot be bound since it is not recognized as a property of 'textarea'. Even though I have imported FormsModule into my app.modu ...

Obtaining the value of an ion-toggle in Ionic2 using the ionChange

Below is the toggle I am referring to: <ion-toggle (ionChange)="notify(value)"></ion-toggle> I am looking for a way to retrieve the value of the toggle when it is clicked in order to pass it as a parameter to the notify method. Any suggestion ...

Problem with Grouping of Columns in Material-UI

Having some trouble with column grouping in MUI data grid pro. I am using typescript and trying to implement column grouping, but encountering issues with the module GridColumnGroupingModel, which is used as the type definition for columnGroupingModel. Fol ...

An empty constant object can trigger an endless cycle of re-rendering

Consider this simplified scenario: export function myCustomHook<TData = Record<string,string>> (data?: TData) { const [output, setOutput] = useState<number>(); const customFunction(data?: TData) { //In a real scenario : p ...

Learn how to mock asynchronous calls in JavaScript unit testing using Jest

I recently transitioned from Java to TypeScript and am trying to find the equivalent of java junit(Mockito) in TypeScript. In junit, we can define the behavior of dependencies and return responses based on test case demands. Is there a similar way to do t ...

Creating objects based on interfaces

After looking at this straightforward code: interface int1 { aa: string, bb: number, } const obj1:int1 = {} //#1 function fun(param_obj:int1) { //#2 } I am curious as to why the compiler throws an error: Type '{}' is missing the fol ...

Can fields from one type be combined with those of another type?

Is it possible to achieve a similar outcome as shown below? type Info = { category: string } type Product = { code: string, ...Info } Resulting in the following structure for Product: type Product = { code: string, category : string } ...

Creating types for React.ComponentType<P> in Material-UI using TypeScript

I am currently working with Typescript and incorporating Material-UI into my project. I am trying to define the component type for a variable as shown below: import MoreVert from '@material-ui/icons/MoreVert' import { SvgIconProps } from '@ ...

Understanding the limitations of function overloading in Typescript

Many inquiries revolve around the workings of function overloading in Typescript, such as this discussion on Stack Overflow. However, one question that seems to be missing is 'why does it operate in this particular manner?' The current implementa ...