roadmanfong / zustand-persist

Persist and rehydrate state
MIT License
119 stars 13 forks source link

Example code broken with Typescript #22

Open WontSeeMeComin opened 2 years ago

WontSeeMeComin commented 2 years ago

Hi, I am trying to get this working with a Typescript React project I am working on, but I'm getting an incomprehensible type error and it's keeping me from successfully configuring this.

I pulled your example code from the README into my local VS Code after installing 0.4.0. Here is the error I'm seeing in the IDE:

Argument of type 'StateCreator<{ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }, (partial: ({ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }) | Partial<{ isAuthenticated: any; user: any; } & { ...; } & { ...; }> | ((state: { ...; } & ... 1 more ... & { ...; }) => ({ .....' is not assignable to parameter of type 'StateCreator<{ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }, [], [never, unknown][], { isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }>'.
  Type 'StateCreator<{ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }, (partial: ({ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }) | Partial<{ isAuthenticated: any; user: any; } & { ...; } & { ...; }> | ((state: { ...; } & ... 1 more ... & { ...; }) => ({ .....' is not assignable to type '(setState: (partial: ({ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }) | Partial<{ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }> | ((state: { ...; } & ... 1 more ... & { ...; }) => ({ ...; } & ... 1 more ... & { ...; }) | Partial<...>), replace?: b...'.
    Types of parameters '$$storeMutations' and '$$storeMutations' are incompatible.
      Type '[]' is not assignable to type '(partial: ({ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }) | Partial<{ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }> | ((state: { ...; } & ... 1 more ... & { ...; }) => ({ ...; } & ... 1 more ... & { ...; }) | Partial<...>), replace?: boolean) => ...'.
        Type '[]' provides no match for the signature '(partial: ({ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }) | Partial<{ isAuthenticated: any; user: any; } & { isAuthenticated: any; } & { user: any; }> | ((state: { ...; } & ... 1 more ... & { ...; }) => ({ ...; } & ... 1 more ... & { ...; }) | Partial<...>), replace?: boolean): void'.ts(2345)

So the two important parts seem to be Types of parameters '$$storeMutations' and '$$storeMutations' are incompatible. and the last Type '[]' provides no match for the signature .... section. I just lack the skill to be able to discern what is wrong and what must be changed.

I tried looking for a @types/zustand-persist thinking my type definitions were old but no such package exists.

Here are my deps in case it's helpful:

"devDependencies": {
        "@electron-forge/cli": "^6.0.0-beta.63",
        "@electron-forge/maker-deb": "^6.0.0-beta.63",
        "@electron-forge/maker-rpm": "^6.0.0-beta.63",
        "@electron-forge/maker-squirrel": "^6.0.0-beta.63",
        "@electron-forge/maker-zip": "^6.0.0-beta.63",
        "@electron-forge/plugin-webpack": "6.0.0-beta.63",
        "@types/lodash": "^4.14.182",
        "@types/mkdirp": "^1.0.2",
        "@types/react": "^18.0.9",
        "@types/react-beautiful-dnd": "^13.1.2",
        "@types/react-dom": "^18.0.4",
        "@types/uuid": "^8.3.4",
        "@typescript-eslint/eslint-plugin": "^5.25.0",
        "@typescript-eslint/parser": "^5.25.0",
        "@vercel/webpack-asset-relocator-loader": "1.7.0",
        "css-loader": "^6.0.0",
        "electron": "18.2.3",
        "electron-devtools-installer": "^3.2.0",
        "eslint": "^8.0.1",
        "eslint-plugin-import": "^2.25.0",
        "fork-ts-checker-webpack-plugin": "^6.0.1",
        "node-loader": "^2.0.0",
        "npm-watch": "^0.11.0",
        "sass-loader": "^12.6.0",
        "simple-zustand-devtools": "^1.1.0",
        "style-loader": "^3.0.0",
        "ts-loader": "^9.2.2",
        "tsconfig-paths-webpack-plugin": "^3.5.2",
        "typescript": "^4.6.4"
    },
    "dependencies": {
        "add": "^2.0.6",
        "antd": "^4.20.5",
        "electron-context-menu": "^3.1.2",
        "electron-squirrel-startup": "^1.0.0",
        "get-file-object-from-local-path": "^1.0.2",
        "imagekit-javascript": "^1.5.1",
        "immer": "^9.0.15",
        "lodash": "^4.17.21",
        "mkdirp": "^1.0.4",
        "node-machine-id": "^1.1.12",
        "react": "^18.1.0",
        "react-beautiful-dnd": "^13.1.0",
        "react-dom": "^18.1.0",
        "sass": "^1.51.0",
        "sharp": "^0.30.6",
        "spinners-react": "^1.0.7",
        "styled-components": "^5.3.5",
        "uuid": "^8.3.2",
        "uuid-by-string": "^3.0.7",
        "yarn": "^1.22.19",
        "zustand": "^4.0.0-rc.1",
        "zustand-persist": "^0.4.0"
    }

Could it be that this version not compatible with the latest Zustand? Thanks.

WontSeeMeComin commented 2 years ago

Forgot to mention, here is where persist is coming from:

//utils/persist.ts

import { configurePersist } from 'zustand-persist'

const { persist, purge } = configurePersist({
    storage: localStorage,
})
export default persist
export { purge }