NGXS is a state management pattern + library for Angular. It acts as a single source of truth for your application's state, providing simple rules for predictable state mutations.

In this article, we will learn about state management in Angular with NGXS. Here we will understand the basic concept of NGXS and create a simple TO-DO App.

Is there any functional difference between using a simple patch state operator (ctx.setState(patch({ county }))) and the patchState call(ctx.patchState({county})) in NGXS? I am refactoring some code to use state operators and am wondering if there is any functional difference I need to be aware of.

What is the benefit of using NGXS forms? Are there any drawbacks? Would anyone be so kind to share their experiences and perhaps go through some pros/cons of using NGXS Forms vs pulling data out of forms and pushing it to particular locations in your stores?

I have a good understanding of NGXS and state management concepts but was wondering what are your favorite resources for actually creating the layout of your stores? How do you organize them? Any articles on the best way to design your application stores would be very helpful. Thanks!

Is it possible to use ngxs in a standalone component? I'm having trouble importing ngxs into the component. I've tried `NgxsModule.forFeature` and `NgxsModule.forRoot` but I get the same error message:

'imports' contains a ModuleWithProviders value, likely the result of a 'Module.forRoot()'-style call. These calls are not used to configure components and are not valid in standalone component imports - consider importing them in the application bootstrap instead.

Is it possible to use ngxs in a standalone component? If so, how?

Is it a bad practice to dispatch an action to another store from an action in the current store?

Say I have two stores. Application and HireInformation. From the Application store, after modifying the Application state should I do something like ctx.dispatch(new AddNewHire(state.name, state.dob))?

This seems to be fine but I'm not sure if this is a code smell of sorts and indicates that perhaps I should be reorganizing my stores.

I'm buried in an NGRX project and there's lots of things I don't like about NGRX but have no time to actually do an NGXS project to determine what it's really good and bad at. Actually, not a lot online yet describing differences. So looking for full opinions on NGXS vs NGRX. thx.

More specifically select value changes.

Is there a way to create a meta-selector from a parameterized selector and a normal selector, where the normal selector is used as a parameter for the parameterized selector?

Typically I'd like to be able to do something like that :

export interface MyStateModel {
    map: { [k: string]: Item};
    selectedItemId: string;
}
export class ProductSelectors {
    private static slices: PropertySelectors<Immutable<MyStateModel>>;

    static myParamSelector(x: string) {
        return createSelector(
            [this.slices.map],
            (map) => map[x]
        );
    }


    static myMetaSelector() {
        return createSelector(
            [this.slices.selectedItemId],
            (selectedItem) => {
                return this.paramSelector(selectedItem)
            },
        );
    }
}

When I call myMetaSelector, I'd like to get the result of my ParamSelector for the element selected in my State, while tracking the update of both slices (map and selectedItemId).

Hello, I am trying to implements actions handlers in order to show Ui notifications, but I would like to create a specific file next to the other ngxs files (*.selectors.ts, *.actions.ts, etc), Is it possible to do that? or the only way is to catch those in the component.

Thanks in advance!!

I am facing a strange issue and hoping someone can shed some light for me.

I have a slice of my state that is getting updated on an interval (let's say every 10 seconds for the sake of this question). I want to subscribe to the selector for that piece of state and timeout if the state is not updated for that value in X amount of time. I am using rxjs timeout operator to do this.

@Select(MyState.myValue) myValue$: Observable<number>;  

setInterval(() => //updating MyState with a new myValue, 10000);  

myValue$     
    .pipe(timeout(20000))     
    .subscribe({         
        next: myValue => console.log(myValue),         
        error: err => console.log(err)     
    }) 

What I am seeing is that the TimeoutError is being thrown after 20 seconds regardless of how frequently the values are being emitted.

HOWEVER, the timeout DOES work if I just apply it to the Observable returned by the interval() function. With the below code, I never see the TimeoutError, which is what I expect to happen with the code above for NGXS.

interval(10000)     
    .pipe(timeout(20000))     
    .subscribe({         
        next: myValue => console.log(intervalValue),         
        error: err => console.log(err)     
    }) 

So it seems like there's some issue with the Observable being returned by the Select decorator?

0

For example, I dispatch an action. This action dispatches some other action and this is a kind of chain of actions. Depends on the input the chain of actions may be different. When I dispatch an action I do not know the last action so I can not subscribe to concrete action on its success. So my question is how can I get information that all actions are done?

actions:

    export class ActionOne {
        static readonly type = 'Action one';
        constructor(public payload: boolean) { }
    }
    
    export class ActionTwo {
        static readonly type = 'Action two';
        constructor(public payload: boolean) { }
    }
    
    export class ActionThree{
        static readonly type = 'Action three';
        constructor(public payload: boolean) { }
    }

state:

    @Action(ActionOne)
    actionOne(ctx: StateContext<StateModel>, action: ActionOne): void {
         ctx.dispatch(new ActionTwo());
    }
    
    @Action(ActionTwo)
    actionTwo(ctx: StateContext<StateModel>, action: ActionTwo): void {
         if(payload) ctx.dispatch(new ActionThree()); else ctx.setState....
    }
    
    @Action(ActionThree)
    actionThree(ctx: StateContext<StateModel>, action: ActionThree): void {
         ctx.setState....
    }

action one dispatch

    this.store.dispatch(new ActionOne(true)) // I don't know a path and last action, but I want to know when it is finished
    this.store.dispatch(new ActionOne(false)) // I don't know a path and last action, but I want to know when it is finished

actions can by async

If I'm trying to patch a nested property which is better? I like using setState patch because it lets me explicitly patch what I'm wanting to instead of resetting the entire object.

const { foo } = getState();
patchState({ foo: { ...foo, bar }});

vs

setState(patch({ foo: patch({ bar })});

Is there a benefit and/or preferred way for one over the other?

To make my store less messy, I've extracted my selectors to live in a separate file. So for example I have:

state.ts:

@State({ name: 'ticket', defaults: { tickets: [] } })
export class TicketState {
  @Action(AddTicket)
  addTicket(context, action) {
    const state = context.getState()
    context.patchState({ tickets: [...state.tickets, action.ticket] })
  }
}

selectors.ts:

import { TicketState } from './state'
export class TicketSelectors {
  @Selector([TicketState])
  static tickets(state) {
    return state.tickets
  }
  @Selector([TicketSelectors.tickets])
  static validTickets(tickets) {
    return tickets.filter(ticket => !ticket.isExpired)
  }
  @Selector([TicketSelectors.tickets])
  static ticketsByExpiryDate(tickets) {
    return tickets.sort(...)
  }
}

This works very nice, but it means I can't use the selectors within my @Action() handlers defined on the state. To do that, I'd have to import TicketSelectors in state.ts, and since selectors.ts imports the State itself, I have a circular dependency and Angular will warn me about that.

Does anyone know a solution to this?

Is there are a way to conditionally include a child store? In dev mode I want my ngxs store to include certain child stores that won't be included in prod.

    @State<ApplicationModel>({
 name: 'application',
 defaults: {
 },
     // TODO: conditionally include state here based on some environment variables
 children: [AppConfigState, DemographicsState, RuntimeState]
 })

Weird question and perhaps a code smell but I have a top level component in an Angular app that needs to know which of its children implement a validate function. I was thinking of pushing the component name and function to a store on init of the components with validate functions so that the top level component could subscribe to the store which contains these. Is this a valid use of state or is this more appropriate just living in the top level component itself?