Use function instead of class in really the best solution?

[MasDevProject]

Which @ngrx/* package(s) are relevant/related to the feature request?

signals

Information

Hi,
me and my team are implementing the new signalStore.
With very basic components the dev experience is good, but when a component has 5+ methods the store object become hard to read.

This is an example:

type MyState = {
  settings: UserSettings | null;
};

const initialState: MyState = {
  settings: null,
};

export const myStore = signalStore(
  withState(initialState),
  withComputed((state) => ({
    comutedTest1: computed(() => state.settings()?.userId.length || 0),
    comutedTest2: computed(() => state.settings()?.userId.length || 0),
    comutedTest3: computed(() => state.settings()?.userId.length || 0),
    comutedTest4: computed(() => state.settings()?.userId.length || 0),
    comutedTest5: computed(() => state.settings()?.userId.length || 0),
  })),
  withMethods(
    (
      store,
      firestore = inject(Firestore),
      identitySvc = inject(...),
      usersSvc = inject(...),
      toastSvc = inject(...),
      electronSvc = inject(...),
      statsSvc = inject(...),
      logSvc = inject(...),
    ) => ({
      async init() {
        try {
          const userId = identitySvc.selectIdentity()!.uid;
          const dataCollection = collection(firestore, 'userSettings');
          const dataQuery = query(dataCollection, where('userId', '==', userId));
          let docs = await getDocs(dataQuery);

          if (!docs.size) {
            await createEmptyEntry(userId, firestore);
            docs = await getDocs(dataQuery);
          }

          const data = docs.docs[0].data() as UserSettings;
          patchState(store, (state) => ({ settings: data }));
        } catch (err) {
          console.log(err);
        }
      },
      async saveUserSettings0() {
        // TODO
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
      },
      async saveUserSettings1() {
        // TODO
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
      },
      async saveUserSettings2() {
        // TODO
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
      },
      async saveUserSettings3() {
        // TODO
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
        // long method here ....
      },
    })
  )
);

Is this code "safe" to read?
What if I need to use utility methods shared between the methods? Should I create a service/static-method every time?

Isn't a best option to use a class instead? Classes can better arrange the methods and can also use inheritance.

In the last year I can see to much hate for classes. Am I the only one?

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[timdeschryver]

Hello, we try to keep the issues section for problems.
Therefore, I'm migrating this issue into a discussion.

[rainerhahnekamp]

@MasDevProject, you should extract your long methods to multiple services to shorten the code.

About utility methods, is it about exposing them or not?

Classes vs. Functions. If there is a SignalStore class you have to extend from, that class with all its method ends up in the bundle file, even if you don't use all methods of that SignalStore class. With functions as it is now, only the functions which are really used end up in the bundle.

The main power comes from extensibility. If every extension were a class, you would probably have to add them via inheritance, but more likely, mixins. Mixins in TypeScript are rare in my understanding. Inheritance is - I think - out of question.

---

If the code is too long for a file, you can split up the creation of the SignalStore to multiple files as well.

---

I don't really see a hate for classes. For the SignalStore, I think it was not possible with the features we have now. For the Analog file format, which uses functions instead of classes for components, I think that's a matter of style, or moving more the template aspect into the focus.