Best way to integrate custom hook into store

[merriman-xyz]

I am integrating a sub-app that uses Zustand into a larger app. To integrate the sub-app I need to use custom hooks from the parent app (mainly custom fetch hooks that handle auth) within the actions of the store of the sub-app. What is the best way to do this?

Expanding on the basic async example from the docs:

Custom fetch hook from parent app:

const useCustomFetch = (path) => { ... }

Store using custom hook in the store:

const useFishStore = create((set) => ({
  fishies: {},
  fetch: async (pond) => {
    const response = await customFetch(pond) // originally was just await fetch(pond)
    set({ fishies: await response.json() })
  },
}))

So where/how can I use the custom hook const customFetch = useCustomFetch('/pond') and integrate it into the store?

[dai-shi]

Store definition is pure JS. You want to create a new hook from the store hook.

const useCustomFetch = (path) => { ... }

const useFishStore = create((set) => ({
  fishies: {},
  setFishes: (fishes) => set({ fishes }),
}))

const useFishFetch = () => {
  const customFetch = useCustomFetch()
  const setFishes = useFishStore((state) => state.setFishes)
  return async (pond) => {
    const response = await customFetch(pond)
    set({ fishies: await response.json() })
  }
}

You can feed customFetch into the store action.

const useCustomFetch = (path) => { ... }

const useFishStore = create((set) => ({
  fishies: {},
  fetch: async (pond, customFetch) => {
    const response = await customFetch(pond)
    set({ fishies: await response.json() })
  },
}))

const useFishFetch = () => {
  const customFetch = useCustomFetch()
  return (pond) => useFishStore.getState().fetch(pond, customFetch)
}

The thing is, store is global, while customFetch is contextual.

[merriman-xyz]

Thanks. This clarifies things.

[TomlDev]

I tried to build your second example:

useConferenceQuery.tsx

const useConferenceQuery = () => {
  const createConference = async (conference: CreateConferenceDto): Promise<Conference> => {
    const response = await axios.post<Conference>('localhost/api/conf/', conference);
    return response.data;
  };
}

useCreateConferenceDialogStore.tsx

const useCreateConferenceDialogStore = create((set) => ({
  createConference: async (conference, customFetch) => {
    const createdConference = await customFetch(conference);
    set({createdConference});
  },

  createdConference: null,
}));

CreateConferenceDialog.tsx

const CreateConferenceDialog = () => {
  const conference = {
    name: 'Name',
    password: 'Password',
  };

  const useCreateConferenceQuery = async () => {
    const customFetch = await useConferenceQuery().createConference(conference);
    return (conference: CreateConferenceDto) =>
      useCreateConferenceDialogStore.getState().createConference(conference, customFetch);
  };

  const onSubmit = async () => {
    await useCreateConferenceQuery();
  };

  return (...);
}

When I submit the dialog I get the error

Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

[dev0T]

Just had the same question, so glad it has been answered!

[developedbyumair]

To use TypeScript, you can utilize three separate files.

_First Create FolderName inside you can create index.ts file
export { useStore } from './Folder/SliceName.slice'
Slice File

import type { YourTypeInterface } from 'types'
import { create, StateCreator } from 'zustand'

interface TempSlice {
  array: YourTypeInterface []
  setArray: (array: YourTypeInterface []) => void
}

const createTempSlice: StateCreator<TempSlice , [], [], TempSlice > = set => ({
  array: [],
  setArray: array=> set({ array}),
})

export const useStore = create<TempSlice >()((...record) => ({
  ...createTempSlice(...record),
}))

Here is the ACTION FILE

`

import { http } from 'apiClient/http'
import type { YourTypeInterface } from 'types'
import { useStore } from './SliceFILENAME.slice'
import { useCallback } from 'react'

const yourAction = async (URL:string): Promise<YourTypeInterface []> => {
  const { data } = await http.get<YourTypeInterface []>(URL)
  return data || []
}

export const useAction = () => {
  const setState = useStore (state => state.setArray)

  const setArrayData = useCallback(async () => {
    const data= await yourAction ()
    setState(allies)
  }, [])

  return { setArrayData }
}

`
And Then Called into Your Functional Component