reactjstypescriptreact-hookszustand

How to persist Zustand with separated actions from state?


Based on this example: https://doichevkostia.dev/blog/authentication-store-with-zustand/

When I try to add persist middleware from Zustand, all the actions inside actions property on the store stops working and when I try to use them, throws an setAccessToken is not a function, in example.

Debugging I realized that the main issue is when I add persist middleware as I said. I think the problem comes with the following declared type:


/**
 * Required for zustand stores, as the lib doesn't expose this type
 */
export type ExtractState<S> = S extends {
    getState: () => infer T;
}
    ? T
    : never;

type Params<U> = Parameters<typeof useStore<typeof authStore, U>>;

but actually I do not know how to modify this type for working with persist middleware.

Am I wrong? I'm kind of lost at this point I don't know what I should do to get this example to work with persist. I've been looking the official docs but can't figure out what to do.


Solution

  • https://stackblitz.com/edit/vitejs-vite-fhnete?file=src%2Fauth-store.ts

    do not persist the actions

     partialize: (state) => {
              return omit(state, ['actions']);
            },