Declarative Imperative Stream Fundamental

[pandika-csgi]

My Problem

I want to learn more about difference declarative and imperative code with RxJS.

Context

Is this purely declarative? or still imperative as we do some mapping into ResourceState in resource$ observable?

export class SalesOrderDetail {
  route = inject(ActivatedRoute);
  http = inject(HttpClient);
  searchInput = new FormControl('');
  readonly limit = 10;

  private pageNavigation$ = new Subject<number>();

  salesOrderId$ = this.route.paramMap.pipe(
    map(params => params.get('id')),
  );

  private resetSearch$ = this.salesOrderId$.pipe(
    tap(() => this.searchInput.setValue('', { emitEvent: true })),
  );

  searchTerm$ = merge(
    this.resetSearch$.pipe(map(() => '')),
    this.searchInput.valueChanges
  ).pipe(
    // distinctUntilChanged(),
    startWith(''),
  );

  currentPage$ = this.salesOrderId$.pipe(
    switchMap(() => this.pageNavigation$.pipe(startWith(1))),
    // shareReplay(1),
  );

  resource$ = combineLatest([
    this.salesOrderId$,
    this.searchTerm$,
    this.currentPage$,
  ]).pipe(
    debounceTime(0),
    switchMap(([salesOrderId, searchTerm, currentPage]) => {
      const loading$ = of({ data: null, loading: true, error: null });

      const data$ = this.http.get<SalesOrderResponse>(`/api/salesorders/${salesOrderId}/items`, {
        params: {
          q: searchTerm ?? '',
          exact: false,
          count: this.limit,
          start: (currentPage - 1) * this.limit,
        },
      }).pipe(
        map((response) => ({ data: response, loading: false, error: null } as ResourceState<SalesOrderResponse>)),
      );

      return merge(loading$, data$);
    }),
    shareReplay(1),
  );

  salesOrderItems$ = this.resource$.pipe(
    map((state: ResourceState<SalesOrderResponse>) => state.data?.items ?? []),
  );

  pages$ = this.resource$.pipe(
    map((state: ResourceState<SalesOrderResponse>) => {
      if (!state.data) return [];
      const total = state.data.total_count;
      const pages = Math.ceil(total / this.limit);
      return Array.from({length: pages}, (_, index) => index + 1);
    }),
  );

  loading$ = this.resource$.pipe(
    map((state: ResourceState<SalesOrderResponse>) => state.loading),
  );

  navigatePage(page: number): void {
    this.pageNavigation$.next(page);
  }
}

Please give me advice,

Thanks

[dariomannu]

Overall, it's mixed paradigm, as you're using classes, functions and streams.

Within the class, most properties are fairly well derived declarative streams.
The end is imperative, where you call this.pageNavigation$.next(page);

With Angular you can't create purely declarative applications (that's something you can do with Rimmel.js, though, if you're interested in declarative, perhaps functional, or stream oriented programming in general).

Back to your question about declarative vs imperative, to put it in simple terms, whenever you call .next() on a stream, it's imperative. Also, when you call .subscribe, it's imperative, too.
Only when you assign streams with or without pipe, it's declarative.

Hope that makes sense

[pandika-csgi]

Thanks @dariomannu , how about this part

resource$ = combineLatest([
    this.salesOrderId$,
    this.searchTerm$,
    this.currentPage$,
  ]).pipe(
    debounceTime(0),
    switchMap(([salesOrderId, searchTerm, currentPage]) => {
      const loading$ = of({ data: null, loading: true, error: null });

      const data$ = this.http.get<SalesOrderResponse>(`/api/salesorders/${salesOrderId}/items`, {
        params: {
          q: searchTerm ?? '',
          exact: false,
          count: this.limit,
          start: (currentPage - 1) * this.limit,
        },
      }).pipe(
        map((response) => ({ data: response, loading: false, error: null } as ResourceState<SalesOrderResponse>)),
      );

      return merge(loading$, data$);
    }),
    shareReplay(1),
  );

when we tell the code how to do the loading, is it still declrative? we have intermediate variable in there before return the result in merge
also how about when we map the result into wrapper interface ResourceState?

[dariomannu]

Making a call to an effectful (impure) function like http.get is also imperative (but then mapping it to a ResourceState is functional).

If you want to stay fully declarative and/or pure, you need to split your application or component in two parts:

• pure functions/streams on one side, and
• effect declarations on the other.

There are various ways to do that. Functional languages introduced things like Continuation, Free Monads, Freer Monads, Extensible Effects.

Then, there is a novel, experimental, arguably simpler way we're just working on, which we call Effect Maps, for reactive streams and that use the same HTML templates we already use.

You can find a basic example on Stackblitz to have an idea.

In your case it could roughly look something like this (both use Rimmel.js semantics, so it might be tricky to implement in Angular):

const Component = () => {
  const placeOrder = new Subject().pipe(
    withLatestFrom(id, term, page)
  );

  const orders = new Subject().pipe(
    map(order => `<li>${order.detail}</li>`)
  );

  return rml`
    <button onclick="${placeOrder}">place order</button>
    <ul>
      ${orders}
    </ul>

    <orders-api input="${placeOrder}" output="${orders}" />
  `;

Then you'd implement the <orders-api> handler separately, as a stream, just like in the Stackblitz link.

The key aspect of this approach is that the effect is triggered by events you emit into the stream (in this case, button clicks), as opposed to a function call like in your case.
Finally, the output of the API is re-emitted through the other end of the stream.

I know it's a ton of info, hope it makes sense without being overwhelming, but happy to expand and dig deeper if you're interested.