Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Leveraging the new NGRX Signal Store

Leveraging the new NGRX Signal Store

Avatar for Manfred Steyer

Manfred Steyer

January 18, 2024
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { private

    state = signalState({ from: 'Paris', to: 'London', flights: [] as Flight[], basket: {} as Record<number, boolean>, }); readonly flights = this.state.flights; readonly from = this.state.from; […] }
  2. @ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]

    readonly selected = computed( () => this.flights().filter((f) => this.basket()[f.id]) ); […] }
  3. @ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]

    updateCriteria(from: string, to: string): void { patchState(this.state, { from, to }) } […] }
  4. @ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]

    updateCriteria(from: string, to: string): void { patchState(this.state, (state) => ({ from: state.to, to: state.from })); } […] }
  5. @ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]

    updateCriteria(from: string, to: string): void { patchState(this.state, updateRoute(from, to)); } […] } function updateRoute<T>(from: string, to: string) { return (state: T) => ({ from: to, to: from }) }
  6. @ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },

    withState({ from: 'Paris', to: 'London', […] }), […] );
  7. @ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },

    withState({ from: 'Paris', to: 'London', […] }), withComputed(([…]) => ({ […] })), withMethods(([…]) => ({ })), withHooks({ […] }) );