How to manipulate a variable in ngxs?

Here is how my page is represented.

There are 2 two components:

1st component is the header -> this is the online.component component

2nd component is page -> locking.component

My goal is that when I click the blocking button, the status changes to being blocked.

Here is the example

I want the same result

In summary status 1 = active and status 4 = blocked.

My problem is that when I click blocked, the status doesn’t change until I log back in or reselect the account.

It’s a real problem, I would like the status to change instantly.

I’m stuck I don’t know how to solve this problem. I can share my codes with you:

online.component.html

<span *ngIf="(currentPortfolio$ | async)" class="title">
   <span class="t1">
      <!-- Account -->
      {{ ((currentPortfolio$ | async)?.DEPO | accountDash) }}
      <!-- Account active or blocked (texte) -->
      <p class="text1">({{ ((currentPortfolio$ | async)?.ACTIF_LABEL) }})</p>
   </span>
   <span class="t2">
      <!-- Status 1 = active, 4 = blocked-->
      Status ==> {{ ((currentPortfolio$ | async)?.ACT_PTF) }}   
   </span>
</span>

profile.state

  const defaultValue: ProfileModel = {
    currentPortfolio: undefined,
  }

  @State < ProfileModel > ({
    name: 'profile',
    defaults: defaultValue
  })
  @Injectable()
  export class ProfileState {
    constructor() {}

    @Selector()
    static currentPortfolio(state: ProfileModel): Portfolio {
        return state.currentPortfolio!;
    }

    @Selector()
    static currentPortfolioId(state: ProfileModel): string {
        return state.currentPortfolio!.NO_PTF;
    }

    @Selector()
    static hasAccess(state: ProfileModel): boolean {
        return true;
    }

    @Selector()
    static customer(state: ProfileModel): ApiCustomer {
        return {
            REFERENCE: state.currentPortfolio!.NO_PTF,
            ID: "",
            INTITULE1: "",
            INTITULE2: "",
            ACCESS: 0,
            SERVICE: 0,
            DEFAULTPTF: 0
        }
    }

    @Action(ResetProfileStateAction)
    resetProfileState(ctx: StateContext < ProfileModel > ): void {
        ctx.setState(defaultValue);
    }

    @Action(SetCurrentPortfolioAction)
    setCurrentPortfolio(ctx: StateContext < ProfileModel > , action: SetCurrentPortfolioAction): void {
        const state = ctx.getState();

        ctx.patchState({
            ...state,
            currentPortfolio: action.portfolio
        });
    }

  }

profile.model.ts

export interface ProfileModel {
    currentPortfolio?: Portfolio;
}

profile.actions.ts

export class ResetProfileStateAction {
    static readonly type = '[Profile] Reset Profile State';
}

export class SetCurrentPortfolioAction {
    static readonly type = '[Profile] Set Current Portfolio';
    constructor(public portfolio: Portfolio) { }
}

portfolio.ts

export class Portfolio {
    NO_PTF: string;       /* REFERENCE */
    INT_PTF: string;      /* INTITULE  */
    GES_SERVICE: number;  /* SERVICE   */
    COIN: number;         /* COIN      */
    ACT_PTF: number;      /* ACTIF     */
    COD_SRV: number;      /* SURV      */
    COD_TIT_LIB: string;  /* COIN LABEL*/
    ACTIF_LABEL: string;  /* ACTIF LABEL */
    SERVICE_LABEL: string;/* SERVICE LABEL */ 
    DEPO: any;            /* DEPO */
    
    constructor() {
        this.NO_PTF = '';       /* REFERENCE */
        this.INT_PTF = '';      /* INTITULE  */
        this.GES_SERVICE = 0;   /* SERVICE   */
        this.COIN = 0;          /* COIN      */
        this.ACT_PTF = 0;       /* ACTIF     */
        this.COD_SRV = 0;       /* SURV      */
        this.COD_TIT_LIB = '';  /* COIN LABEL*/
        this.ACTIF_LABEL = '';  /* ACTIF_LABEL*/
        this.SERVICE_LABEL = ''; /* SERVICE_LABEL*/
        this.DEPO =  '';         /* DEPO */
    }
}

I think the problem is in the locking component… :S

In the locking() method, I retrieve the status value.

Now I click on the blocked button

It’s always the value 1…

Normally it should display 4. 🙁

The code is represented like this:

export class LockingComponent implements OnInit {
    private unsubscribe$ = new Subject < void > ();


    @Select(ProfileState.currentPortfolio) currentPortfolio$!: Observable < Portfolio > ;
    @Select(AuthState.user) user$!: Observable < string > ;


    constructor(private service: LockingService, private store: Store, private router: Router, ) {}


    ngOnInit(): void {
        this.locking();
    }

    locking(): void {
        let tmpStatus = this.store.selectSnapshot(ProfileState.currentPortfolio).ACT_PTF;
        this.service.getLocking().pipe(
            takeUntil(this.unsubscribe$)
        ).subscribe(res => {
            if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {


                console.log("Status => " + tmpStatus);


            }
        });
    }


}