How to type store with generic data

[ampossardt]

Hi, I've been trying to get the typings correct for a store where the properties are based on a generic object passed as an argument but I'm having trouble getting typescript to understand what I am looking to do. Basically, I have a store whose value is based on a generic, such that the store has some basic functions provided to manipulate the store, but it also stores the data itself. The code looks like this currently:

type ValueSetter<TData> = <TKey extends keyof TData>(key: TKey, value: TData[TKey]) => void;
type DataSetter<TData> = {
  (value: Partial<TData>): void;
};

type DataStoreValues<TData extends Record<keyof TData, any>> = {
  setValue: ValueSetter<TData>;
  setValues: DataSetter<TData>;
// Other properties omitted
} & TData;

function createDataStore<TData extends Record<keyof TData, any>>(
  initialData: TData
) {
  return create<DataStoreValues<TData>>((set, get) => ({
    ...initialData,
    // The generic argument here is inferred as 'TData', which is what I want
    setValue: (key, value) => {
      // But, 'set' shows the syntax error:
     //  Type '{ [x: string]: TData[TKey]; }' is not assignable to type 'Partial<DataStoreValues<TData>>'
     // despite 'key' being typed corrected here as 'keyof TData'
      set({
        [key]: value,
      });
    },
    // Maybe similar problem here, but 'data' is typed as 'TData', where 'set' is expecting it 
   //  to be DataStoreValues<TData> instead
    setValues: (data) => {
      set(data);
    },
  }));
}

Given both the 'setValue' and 'setValues' functions, is there a way to type things correctly so that I can stop using ts-ignore? Everything works as expected when using either of these, but I'd like to try to understand what I'm doing wrong so I can extend some of the types further.

[dai-shi]

It seems like you are facing a tricky situation. Zustand types are somewhat optimized for some use cases which may conflict with generics use case.
The easiest way would be as any, because your types are stricter than what Zustand infers.

Anyway, I hope this helps.
https://tsplay.dev/NB6OgN

[ampossardt]

Understandable, I think its totally okay in this scenario to just know that the types need some massaging to get them to play right, but I realistically probably won't have to touch this code again and the types are correct enough to still get intellisense to work properly. Thanks for entertaining the idea and for the sample, and for this great library. It's quickly become a staple in all of my projects.

[FilipSavic95]

I know it's been almost a year since you asked this, but I needed this too, so I made a zustand store which stores a Map<string, MY_TYPE_THAT_I_WANTED_TO_MAKE_A_GENERIC_STORE_OF>.

I did it like this:

import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

type TFilterParams = {
    fromDate: string;
    toDate: string;
    scoreFilter?: TMemberCareScoreFilterLabelFE;
    searchText: string;
    searchBy: TMemberCareSearchByLabelFE;
}

type TPartialFilterParams = Partial<TFilterParams> | undefined | null;

type TFilterSortStoreState = {
  filter: TPartialFilterParams;
  setFilter: (filter: TPartialFilterParams) => void;
  resetFilter: () => void;
};

const initialState = {
  filterKeyStore: null,
};

type TFilterSortKeyStoreState = {
  filterKeyStore: Record<string, { filter?: TPartialFilterParams }> | undefined | null;
  setFilter: (key: string) => (filter: TPartialFilterParams) => void;
  resetFilter: (key: string) => () => void;
  reset: () => void; // resets the entire store (e.g. on user logout)
};

export const useTrueGenericFilterSortStore = create<TFilterSortKeyStoreState>()(
  subscribeWithSelector((set) => ({
    ...initialState,
    setFilter: (key) => (newFilter) => {
      set((state) => {
        return {
          ...state,
          filterKeyStore: {
            ...state.filterKeyStore,
            [key]: { ...state.filterKeyStore?.[key], filter: { ...state.filterKeyStore?.[key]?.filter, ...newFilter } },
          },
        };
      });
    },
    resetFilter: (key) => () => {
      set((state) => ({
        ...state,
        filterKeyStore: { ...state.filterKeyStore, [key]: { ...state.filterKeyStore?.[key], filter: null } },
      }));
    },
    reset: () => {
      set((state) => ({
        ...state,
        ...initialState,
      }));
    },
  })),
);

export const useGenericFilterStore = (storeKey: string): TFilterSortStoreState => {
  const trueGenericStore = useTrueGenericFilterSortStore();

  return {
    filter: trueGenericStore.filterKeyStore?.[storeKey]?.filter,
    setFilter: trueGenericStore.setFilter(storeKey),
    resetFilter: trueGenericStore.resetFilter(storeKey),
  };
};

And I use it in my components like this:

  const {
    filter: filterInStore,
    setFilter: setFilterInStore,
  } = useGenericFilterStore('some-unique-key');

[timvanoostrom]

It's less performant than utilizing the merge properties functionality of zustand itself. Keys at the root level of the store are assigned and the store object itself isn't updated, only the desired property. see: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L78C13-L78C48 and https://zustand.docs.pmnd.rs/guides/immutable-state-and-merging