Partialize TypeScript error

[martinaedma]

I have the following simple code where I try to setup localstorage. Problem here is that TypeScript does not like "partialize" in this case

import create from "zustand";
import { persist } from "zustand/middleware";

interface AppState {
  view: string;
  setView: (view: string) => void;
}

export const useStore = create(  
    persist<AppState>(
      (set, get) => ({       
        view: "home",
        setView: (view: string) => set({ view: view })        
      }),
      {
        name: "r3f_app",
        getStorage: () => localStorage,
        partialize: (state) => ({
          view: state.view
        }),        
      }
    )  
);

TypeScript is saying

(property) PersistOptions<AppState, T>.partialize?: ((state: AppState) => T) | undefined
Filter the persisted value.

@params — state The state's value

Type '(state: AppState) => { view: string; }' is not assignable to type '(state: AppState) => AppState'.
  Property 'setView' is missing in type '{ view: string; }' but required in type 'AppState'.ts(2322)
store.tsx(6, 3): 'setView' is declared here.

Seems it would like me to return whole state ?

I did try to this as well

export const useStore = create(  
    persist<AppState>(
      (set, get) => ({       
        view: "home",
        setView: (view: string) => set({ view: view })        
      }),
      {
        name: "r3f_app",
        getStorage: () => localStorage,
        partialize: state => {
          return {...state, view: state.view}
        },        
      }
    )  
);

While this gives no errors, there is nothing in localstorage ?

[dai-shi]

Here's the fix: https://tsplay.dev/N5LZ2w
create<MyState>()(...) will do.

[codeofandrin]

Edit

I forgot to set a name for the storage. After that it worked.

{
    name: "update-last-check",
    partialize: (state) => ({ lastCheck: state.lastCheck })
}

---

Unfortunately, doesn't work for me:

interface UpdateStoreType {
    status: UpdateStatusType
    error: Error | null
    progress: number
    lastCheck: number | null
    setStatus: (status: UpdateStatusType) => void
    setError: (error: Error) => void
    setProgress: (percentage: number) => void
    setLastCheck: (timestamp: number) => void
}

export const useUpdate = create<UpdateStoreType>()(
    persist(
        (set) => ({
            status: UpdateStatusType.notAvailable,
            error: null,
            progress: 0,
            lastCheck: null,
            setStatus: (status) => {
                set({ status: status })
                console.log(`status changed: ${status}`)
            },
            setError: (error) => set({ error: error }),
            setProgress: (percentage) => set({ progress: percentage }),
            setLastCheck: (timestamp) => set({ lastCheck: timestamp })
        }),
        {
            partialize: (state) => ({ lastCheck: state.lastCheck })
        }
    )
)

Typescript Error:

Type '(state: UpdateStoreType) => { lastCheck: number | null; }' is not assignable to type '(state: UpdateStoreType) => UpdateStoreType'.
  Type '{ lastCheck: number | null; }' is missing the following properties from type 'UpdateStoreType': status, error, progress, setStatus, and 3 more.

[dbritto-dev]

@martinaedma would you mind creating a ts playground?