Can't use devtools with Typed store

[saif399]

hey guys and thanks for all the effort you are putting on this amazing project,

my issue is simple, i want to use typescript & devtools on stores

currently i'm using the commented line, but i'd like to have the first line working. any help please?

[dai-shi]

Please see some typing examples in tests/middlewareTypes.test.tsx. Typing with middleware is tricky currently. We are working to fix them in v4.

[saif399]

@dai-shi Thanks for helping, i did this and now it showing more errors :(

[dai-shi]

Assuming you already have userStore typed, does create(devtools(userStore)) work?

[saif399]

@dai-shi without a type yeah it did work

[hirbod]

I was also unable to type with zustandFlipper, a wrapper around Flipper

export const useStore = create<IStore>(
  zustandFlipper(
    //@ts-ignore
    persist(
      (set, get, api) => ({
        ...createLoginSlice(
          set as unknown as SetState<ILoginSlice>,
          get as unknown as GetState<ILoginSlice>,
          api as unknown as StoreApi<ILoginSlice>,
        ),
        ...createThemeSlice(
          set as unknown as SetState<IThemeSlice>,
          get as unknown as GetState<IThemeSlice>,
          api as unknown as StoreApi<IThemeSlice>,
        ),
        ...createSettingsSlice(
          set as unknown as SetState<ISettingsSlice>,
          get as unknown as GetState<ISettingsSlice>,
          api as unknown as StoreApi<ISettingsSlice>,
        ),
      }),
      {
        name: 'app-storage',
        getStorage: () => mmkvStorage,
      },
    )
  )
);

[dai-shi]

v3.7.0 changed some typing. Please see tests/middlewareTypes.test.tsx and if someone has a question, open a new discussion. Closing this.

[hirbod]

Even though the message was removed (I do have the email though :D). Here is how I did implement it with mmkv:

// storageInstance.ts
import { MMKV } from 'react-native-mmkv'
export const storage = new MMKV();

// mmkvStorage.ts
import { storage } from './storageInstance';

export interface ZustandStorage {
    getItem: (name: string) => string | null | Promise<string | null>
    setItem: (name: string, value: string) => void | Promise<void>
    removeItem: (name: string) => void | Promise<void>
}

export const mmkvStorage: ZustandStorage = {
    setItem: (key, value) => storage.set(key, value),
    getItem: (key) => storage.getString(key) || null,
    removeItem: (key) => storage.delete(key)
}

[anastely]

Hey @hirbod, I'm trying to use your mmkvStorage in the last version of zustand

but I got this error

Error: Value is undefined, expected an Object
    at MMKV.set (native)

if you use the last v of zustand can you tell me how you solve this issue?

import {create} from 'zustand';
import {createJSONStorage, persist} from 'zustand/middleware';
import {zustandStorage} from '../util/Storage';

export const useEmployeeInfoStore = create(
  persist(
    set => ({
      employeeInfo: null,
      setEmployeeInfo: employeeInfo => set({employeeInfo}),
    }),
    {
      name: 'employeeInfo-local',
      storage: createJSONStorage(() => zustandStorage),
    },
  ),
);