Skip to main content

Quick Setup

Create new Store 👉 createStore​

app.component.ts
export interface MyState {
  counter: number;
}

export class AppComponent {
  private store = this.storeFactory.createComponentStore<MyState>({
    storeName: 'BASIC_COUNTER',
    defaultState: { counter: 0 },
  });

  constructor(private storeFactory: StoreFactory) {}
}
More Information for createStore you can find here

Read State 👉 state$​

app.component.ts
export interface MyState {
  counter: number;
}

export class AppComponent {
  private store = this.storeFactory.createComponentStore<MyState>({
    storeName: 'BASIC_COUNTER',
    defaultState: { counter: 0 },
  });
  public state$: Observable<MyState> = this.store.state$;

  constructor(private storeFactory: StoreFactory) {}
}
More Information for state$ you can find here

Modify state 👉 effect 👉 setState 👉 patchState 👉 createLoadingEffect​

Choose between synchronous and asynchronous State Changes.

Synchronous State Change​

Complete State Change​

app.component.ts
export interface MyState {
  counter: number;
}

export class AppComponent {
  private store = this.storeFactory.createComponentStore<MyState>({
    storeName: 'BASIC_COUNTER',
    defaultState: { counter: 0 },
  });

  constructor(private storeFactory: StoreFactory) {}

  update(counter: number) {
    this.store.setState({ counter: 2 });
  }
}
More Information for setState you can find here

Partial Changes​

app.component.ts
export interface MyState {
  counter: number;
}

export class AppComponent {
  private store = this.storeFactory.createComponentStore<MyState>({
    storeName: 'BASIC_COUNTER',
    defaultState: { counter: 0 },
  });

  constructor(private storeFactory: StoreFactory) {}

  patch(counter: number) {
    this.store.patchState({ counter: counter });
  }
}
More Information for patchState you can find here

Asynchronous State Change​

Change State with the original effect from @ngrx/component-store​

app.component.ts
export interface MyState {
  counter: number;
}

export class AppComponent {
  private store = this.storeFactory.createComponentStore<MyState>({
    storeName: 'BASIC_COUNTER',
    defaultState: { counter: 0 },
  });
  increment = this.myStore.effect((counter$: Observable<number>) =>
    counter$.pipe(
      tapResponse(
        (counter) => this.store.patchState({ counter: counter + 1 }),
        (error) => console.error('error', error)
      )
    )
  );

  constructor(private storeFactory: StoreFactory) {}
}

Change State via effects loadingEffect​

create your store with loadingEffect

app.component.ts
type State = LoadingStoreState<{ counter: number }, { message: string }>;

export class AppComponent {
  private store = this.storeFactory.createComponentLoadingStore<State['item'], State['error']>({
    storeName: 'LOADING_STORE',
  });
  private increment = this.store.createLoadingEffect('LOAD_NAME', (counter: number) => of(counter + 1));

  constructor(private storeFactory: StoreFactory) {}
}
More Information for createLoadingEffect you can find here