ngrx/signals call an rxMethod from an rxMethod

[kopy011]

Hello,

I have an rxMethod in my signalStore that loads entities from my backend and patches it to my state. Upon a successful create request which is in another rxMethod, I would like to call that previous rxMethod i mentioned earlier. If I would use the original ngrx store i would make an effect for this (from @ngrx/effects pacakge), but in signals package I didn't find any way for this. The only way it worked for me is if I created another withMethods with the create rxMethod above the withMethods with the load rxMethod.
Is there a better way for achieving this?
Sorry if the question is duplicated I didn't find any answer for it.

Here is my signal store with the mentioned rxMethods

import { patchState, signalStore, withMethods, withState } from "@ngrx/signals";
import { OrderConfirmation } from "../model/order-confirmation.model";
import { inject } from "@angular/core";
import { OrderConfirmationService } from "../services/order-confirmation.service";
import { NgxSpinnerService } from "ngx-spinner";
import { rxMethod } from "@ngrx/signals/rxjs-interop";
import { distinctUntilChanged, pipe, switchMap, tap } from "rxjs";
import { tapResponse } from "@ngrx/operators";
import { NzMessageService } from "ng-zorro-antd/message";
import { KuszaMessages } from "../../../constants/kusza-messages";
import { sortBy } from "lodash";
import { getQueryFilter } from "../../../helpers/filter.helper";
import { orderConfirmationFilterDefinition } from "../constants/order-confirmation.filter-definition";
import { withDevtools } from "@angular-architects/ngrx-toolkit";

type OrderConfirmationState = {
  orderConfirmations: Array<OrderConfirmation>;
  totalCount: number;
  editedOrderConfirmation: OrderConfirmation | null;
};

const initialState: OrderConfirmationState = {
  orderConfirmations: [],
  totalCount: 0,
  editedOrderConfirmation: null,
};

export const OrderConfirmationStore = signalStore(
  withDevtools("orderConfirmations"),
  withState(initialState),
  withMethods(
    (
      store,
      orderConfirmationService = inject(OrderConfirmationService),
      spinner = inject(NgxSpinnerService),
    ) => ({
      setEditedOrderConfirmation: (
        editedOrderConfirmation?: OrderConfirmation,
      ) => patchState(store, { editedOrderConfirmation }),
      clearEditedOrderConfirmation: () =>
        patchState(store, { editedOrderConfirmation: null }),
      getOrderConfirmations: () =>
        sortBy(store.orderConfirmations(), ["orderConfirmationNumber"]),
      loadOrderConfirmations: rxMethod<{ filter: Record<string, unknown> }>(
        pipe(
          distinctUntilChanged(),
          tap(() => spinner.show()),
          switchMap(({ filter }) => {
            const { page, pageSize } = filter;

            delete filter["page"];
            delete filter["pageSize"];
            const queryFilter = getQueryFilter(
              filter,
              orderConfirmationFilterDefinition,
            );

            return orderConfirmationService
              .getOrderConfirmations(
                { currentPage: page as number, pageSize: pageSize as number },
                queryFilter,
              )
              .pipe(
                tapResponse({
                  next: ({ records, totalCount }) => {
                    patchState(store, {
                      orderConfirmations: records,
                      totalCount,
                    });
                    spinner.hide();
                  },
                  error: () => {
                    spinner.hide();
                  },
                }),
              );
          }),
        ),
      ),
    }),
  ),
  withMethods(
    (
      store,
      orderConfirmationService = inject(OrderConfirmationService),
      spinner = inject(NgxSpinnerService),
      message = inject(NzMessageService),
    ) => ({
      saveOrderConfirmation: rxMethod<{
        orderConfirmation: OrderConfirmation;
        filter: Record<string, unknown>;
      }>(
        pipe(
          tap(() => spinner.show()),
          switchMap(({ orderConfirmation, filter }) =>
            orderConfirmationService
              .createOrderConfirmation(orderConfirmation)
              .pipe(
                tapResponse({
                  next: () => {
                    store.loadOrderConfirmations({ filter });
                    spinner.hide();
                    message.success(KuszaMessages.CREATED_SUCCESSFULLY);
                  },
                  error: () => {
                    spinner.hide();
                  },
                }),
              ),
          ),
        ),
      ),
      updateOrderConfirmation: rxMethod<{
        orderConfirmation: OrderConfirmation;
        filter: Record<string, unknown>;
      }>(
        pipe(
          tap(() => spinner.show()),
          switchMap(({ orderConfirmation, filter }) =>
            orderConfirmationService
              .updateOrderConfirmation(orderConfirmation)
              .pipe(
                tapResponse({
                  next: () => {
                    store.loadOrderConfirmations({ filter });
                    spinner.hide();
                    message.success(KuszaMessages.UPDATED_SUCCESSFULLY);
                  },
                  error: () => {
                    spinner.hide();
                  },
                }),
              ),
          ),
        ),
      ),
    }),
  ),
);

[rainerhahnekamp]

Hey, do you maybe have a slimmed down version which shows only the actual problem. You could also post the ngrx/store solution with the effect

[kopy011]

Hey, sure!

I have a withMethods feature in my store that contains loadOrderConfirmations rxMethod:

withMethods(
    (
      store,
      orderConfirmationService = inject(OrderConfirmationService),
      spinner = inject(NgxSpinnerService),
    ) => ({
      loadOrderConfirmations: rxMethod<{ filter: Record<string, unknown> }>(
        pipe(
          distinctUntilChanged(),
          tap(() => spinner.show()),
          switchMap(({ filter }) => {
            const { page, pageSize } = filter;

            delete filter["page"];
            delete filter["pageSize"];
            const queryFilter = getQueryFilter(
              filter,
              orderConfirmationFilterDefinition,
            );

            return orderConfirmationService
              .getOrderConfirmations(
                { currentPage: page as number, pageSize: pageSize as number },
                queryFilter,
              )
              .pipe(
                tapResponse({
                  next: ({ records, totalCount }) => {
                    patchState(store, {
                      orderConfirmations: records,
                      totalCount,
                    });
                    spinner.hide();
                  },
                  error: () => {
                    spinner.hide();
                  },
                }),
              );
          }),
        ),
      ),
    }),
  ),

I have another rxMethod called saveOrderConfirmation that looks like this :

      saveOrderConfirmation: rxMethod<{
        orderConfirmation: OrderConfirmation;
        filter: Record<string, unknown>;
      }>(
        pipe(
          tap(() => spinner.show()),
          switchMap(({ orderConfirmation, filter }) =>
            orderConfirmationService
              .createOrderConfirmation(orderConfirmation)
              .pipe(
                tapResponse({
                  next: () => {
                    store.loadOrderConfirmations({ filter });
                    spinner.hide();
                    message.success(KuszaMessages.CREATED_SUCCESSFULLY);
                  },
                  error: () => {
                    spinner.hide();
                  },
                }),
              ),
          ),
        ),
      ),

As you can see upon a successful order confirmation creation I call store.loadOrderConfirmations rxMethod

The problem is this only works if i put it in 2 separate withMethods feature because in the first withMethods feature, my store object does not have the rxMethod loadOrderConfirmations i need to call. But if I make a new withMethods feature under the first one, strore.loadOrderConfirmations is now callable.

All I want to achieve is to call loadOrderConfirmations when a successful order confirmation creation happens. In ngrx/store and ngrx/effects i would do something like this:

  orderConfirmationCreated$ = createEffect(() =>
    this.actions$.pipe(
      ofType(OrderConfirmationActionType.orderConfirmationCreated),
      mergeMap(() => loadOrderConfirmationsAction()),
    ),
  );

and of course i would make another effect for loadOrderConfirmationsAction type too that actually sends the request to backend etc.

[rainerhahnekamp]

Why don't you just put the load method into the scope of withMethods? Like:

withMethods(
    (
      store,
      orderConfirmationService = inject(OrderConfirmationService),
      spinner = inject(NgxSpinnerService),
    ) => {
      const loadOrderConfirmations = rxMethod<{ filter: Record<string, unknown> }>(
        pipe(
          // ...
        ),
      ),

      return {
        saveOrderConfirmation: rxMethod<>(pipe(
          // call loadOrderConfirmations here
        ))
      }
    },
  ),

---

Other than that, I'd highly recommend you to extract both functions into separate files. You don't want to have these pipes in the signalStore file.

[kopy011]

Thanks I'll give it a go and refactor it. This is my first project with signal stores and I only relied the official example.
What is the best practice then? Separate each method into different files and import them in the store?

[rainerhahnekamp]

Well, I mean I see that as a best practice in general. If you have a class and there is a method which makes the class as a whole unreadable because it is so big, just extract it.

[kopy011]

Yeah true, thank you very much!