Skip to content

4.1.1

Compare
Choose a tag to compare
@e-oz e-oz released this 13 Aug 00:16
· 11 commits to main since this release

createEffect() now returns not just a function, but a function with methods! :)
API is experimental and might change, so it's documented only here for now.

In your store:

import { createEffect } from './create-effect';

class Store extends Collection<Item> {
  readonly changeZipCode = createEffect<string>(_ => _.pipe(
    // code to change zipcode
  ));
}

In your component:

class Component {
  store = inject(Store);
  dialog = inject(Dialog);
  
  changeZipCode(zipCode: string) {
    this.store.changeZipCode.nextValue(() => this.dialog.close());
    this.store.changeZipCode(zipCode);
  }
}

In this example, the dialog window will be closed only after the service response, and only if it was successful.

Alongside nextValue, there are other methods:

export type EffectFnMethods = {
  nextValue: (fn: ((v: unknown) => void)) => void,
  nextError: (fn: ((v: unknown) => void)) => void,
  onNextValue(): Observable<unknown>,
  onNextError(): Observable<unknown>,
};

Internally, values and errors will not be saved in memory if you don't use these methods.