Is this expected that creating a store based on a class does not respect the class' type?

[cbst99]

Let me explain more clearly with an example. I have this:

export const useDashboards = create<Dashboards>(() => new Dashboards());

Dashboards is a class with its own methods, for instance this one:

insert(at: number, ...items: TChildren[]) {
    this.children.splice(at, 0, ...items);
}

The issue is that when I call useDashboards() within a component, Zustand returns an Object, not a Dashboards. This object has all the variables that my dashboards have, but of course none of the methods and this makes a lot of things unusable. This happens despite the fact that useDashboards.getInitialState() correctly returns a Dashboards.

PS: I should also add that my mutation are performed using Immer from outside the store. For example:

/**
 * Switch to another dashboard.
 * @param index The index to switch to.
 */
export const setCurrentDashboardIndex = (index: number) => {
    useDashboards.setState(produce((dashboards: Dashboards) => dashboards.index = index), true);
};

[dbritto-dev]

@cbst99 I'm not sure but does not make sense to me I'd expect Dashboard[] or Array<Dashboard> instead of Dashboards

[cbst99]

@cbst99 I'm not sure but does not make sense to me I'd expect Dashboard[] or Array<Dashboard> instead of Dashboards

Dashboards contains helpers related to manipulating a collection of dashboards. Regardless I'm not sure this would solve my issue because even a single Dashboard contains helper methods that I need as well, so if Zustand returns an array of Object instead of an array of Dashboard this is still a problem.

[dbritto-dev]

@cbst99 yeah, that's because we need to support shallow merge you can't do that with instances

[cbst99]

@cbst99 yeah, that's because we need to support shallow merge you can't do that with instances

I understand, but is there a workaround that it not this or something similar:

export const useDashboards = create<Dashboards>(() => {
    data: new Dashboards()
});

[dbritto-dev]

@cbst99 yeah, that's because we need to support shallow merge you can't do that with instances

I understand, but is there a workaround that it not this or something similar:

export const useDashboards = create<Dashboards>(() => {
    data: new Dashboards()
});

@cbst99 currently, there's not other way unless we change the core to support classes

[cbst99]

@dbritto-dev so it is either that or I have to refactor my solution in order to put the helper methods out of the classes. Not sure if that's doable. Well at least now I know, I guess. Thank you.