Calling hook in zustand store

64 views Asked by At

use-language-store.tsx

import { useCustomHook } from '@hooks'
import { create } from 'zustand'

type UserDataStoreProps = {
  language: string
  setLanguage: (value: string) => void
  //...
}

export const useUserDataStore = create<UserDataStore>((set) => {
  const { data } = useCustomHook()

  return {
    language: data.language,
    setLanguage: (value) => set({ language: value }),
  }
})

component.tsx

export const Component = () => {
  const { language } = useUserDataStore()

  return <>{language}</>
}

I would like to set an initial value that comes form a custom hook inside the useUserDataStore, however from what I understood, you can't call hooks inside zustand reducer...

How exactly should I use the store, so it can contain the initial value as imported from the useCustomHook so I can use it later on a different components?

0

There are 0 answers