diablow / zustand-store-addons Goto Github PK

first, great library. very interesting stuff - been looking for computed since vuex :)
regarding something i saw in the docs:

const [count, increment, doubleCount, total] = useStore(
    'count, increment, doubleCount, total'
  )

you've made variables as a one long string... than said "This is looking good!" but that method is prone to user errors. most new projects are typescript these days and that is considered breaking the rules.

import { persist } from 'zustand/middleware' is not supported

main issue: we can't use any storage (localStorage, sessionStorage...) with the create function from "zustand-store-addons"

I will try to fix this if I can understand the code, @Diablow if you can look at this issue or give me direction on how to fix it myself would be real cool

The following code (not a special case) does not work with import create from "zustand-store-addons"; but works with import create from "zustand"; :

import create from "zustand-store-addons";

export type AppStore = {
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
};

export const useLabellingStore = create<AppStore>(
  (set) => ({
    isOpen: false,
    setIsOpen: (isOpen: boolean) => set({ isOpen }),
  })
);

I get this error, because zustand-store-addons wants the set function to be called with something of type PartialState<AppStore, keyof AppStore> which reduces to Pick<AppStore, keyof AppStore>.

While zustand wants the set function to be called with something of type PartialState<AppStore, "isOpen">

[DEPRECATED] Default export is deprecated. Instead use import { create } from 'zustand'.

What are the strict differences / when should I use which?
Can watchers be made to watch two specific states?
Is computed just re-run when ANY of the states change?

Thanks!

First of all, thanks for creating this repo! I'm trying it out now.

I was wondering, how do you define "set" in typescript when creating the store? My original Zustand code used to look like this:

const useRoomState = create((set: SetState, get: GetState) => ({
...

But 'SetState' is not assignable with Zustand-addon's new create function. Any suggestions for what type to define set as?

Example code:

import create from "zustand-store-addons";

interface Store {
    value: number;
    increase: () => void;
}

export const useStore = create<Store>(
    (set, get) => ({
        value: 0,

        increase: () => {
            set(state => { // Report error at this line
                ^^^^^^^^^^
                state.value++;
            });
        },
    }),
    { middleware: [immer] },
);

Error info:

Argument of type '(state: Store) => void' is not assignable to parameter of type 'PartialState<Store>'.
  Type '(state: Store) => void' is not assignable to type '(state: Store) => Partial<Store>'.
    Type 'void' is not assignable to type 'Partial<Store>'.ts(2345)

It looks like the original action type is not compatible with the action type after using Immer middleware.