Using a persisted store with createContext and TypeScript

[linuxlewis]

Hi all,

We're using the store persistence in conjunction with a context to provide the store to all parts of the application. Since the persist callback modifies the returned useStore hook we are having trouble getting TypeScript to recognize the persist property of the hook.

We tried modifying the create type itself to match the middleware tests as indicated in the code comment(https://github.com/pmndrs/zustand/blob/main/src/middleware/persist.ts#L91):

const useStore = create<
        IStore,
        SetState<IStore>,
        GetState<IStore>,
        Mutate<StoreApi<IStore>, [['zustand/persist', Partial<IStore>]]>
    >(

However this didn't solve our root issue because we are accessing useStore from a context. Looking at the createContext function I'm not sure how to pass in the correct types so useStore has the persist property. How do you intend to use both persist and createContext with TypeScript? https://github.com/pmndrs/zustand/blob/main/src/context.ts#L15
https://github.com/pmndrs/zustand/blob/main/src/context.ts#L60

I can provide a PR with proposed changes if that is preferred.

[dai-shi]

Types will be improved in v4, specifically #725.
Not sure if your issue will be resolved.

How do you intend to use both persist and createContext with TypeScript?

It feels like using both persist and createContext can be troublesome. But anyway, it would be nice to solve the typescript issue.

[devanshj]

With v4 it should look something like

import create from "zustand"
import { persist } from "zustand/middleware"
import createContext from "zustand/context"

interface BearState {
  bearsCount: number,
  addBear: () => void
}

const useBearStore = create<BearState>()(persist(set => ({
  bearsCount: 0,
  addBear: () => set(s => ({ bearsCount: s.bearsCount + 1 }))
})))

const BearContext = createContext<typeof useBearStore>()

const App = () =>
  <BearContext.Provider createStore={() => useBearStore}>
    {/* ... */}
  </BearContext.Provider>

Or if you can't or don't want to create the store outside the component then something like this would work...

import create, { StoreApi, Mutate } from "zustand"
import { persist, UseBoundStore } from "zustand/middleware"
import createContext from "zustand/context"

interface BearState {
  bearsCount: number,
  addBear: () => void
}

type UseBearStore =
  UseBoundStore<Mutate<StoreApi<BearState>, [["zustand/persist", BearState]]>>

const BearContext = createContext<UseBearStore>()

const App = () =>
  <BearContext.Provider createStore={() => 
    create<BearState>()(persist(set => ({
      bearsCount: 0,
      addBear: () => set(s => ({ bearsCount: s.bearsCount + 1 }))
    })))
  }>
    {/* ... */}
  </BearContext.Provider>

[terrorbollen]

There is a part in the official documentation addressing hydration problems and how to solve them.
https://docs.pmnd.rs/zustand/integrations/persisting-store-data#usage-in-next.js