Shallow by default?

[eddyhdzg]

Is it possible to create a store what is shallow by default?

[eddyhdzg]

This is my current solution, still having a small problem with Object.fromEntries typing

const createTestStore = create<TestState>()(
  persist(
    immer((set) => ({
      ...initialTestStoreState,
      dispatch: (args: TestStoreActions) =>
        set((state: TestStoreState) => testStoreReducer(state, args)),
    })),
    {
      name: "test-store",
    }
  )
);

export function useTestStore<T extends TestStateKeys>(
  keys: T[]
): {
  [K in T]: TestState[K];
} {
  return createTestStore((state) => {
    const entries = keys.map((key) => [key, state[key]]);
    return Object.fromEntries(entries);
  }, shallow);
}

Usage

const { count, dispatch } = useTestStore(["count", "dispatch"]);

[dai-shi]

Looks good.

[dai-shi]

Related issue: #685

In short, it's open for 3rd party library. But, there are many ways without middleware, depending on requirements.

[johsunds]

Out of curiosity, what are the tradeoffs to consider here? Just want to make sure I understand the implications before I default to shallow everywhere.

To me, the convenience of being able to destructure multiple values like

const { a, b } = useMyStore((state) => pick(state, ["a", "b"]));

is great, and it seems to me like this convenience outweighs the slight performance gain of picking values one-by-one and using === equality.

Am I missing some pros/cons, or underestimating the performance difference here?

[dai-shi]

For a mental model, in React, everything is === comparison by default. So, it's in line with it.
For lib design and implementation, Zustand is trying to be as small as possible. We have many use cases that === works fine. So, shallow is optional.

[johsunds]

Makes sense, thank you for the response!