Setup store to be readonly

[pinkynrg]

I'm loving this library. We're already using it, so it's going into production.

However, I noticed that due to an error, we used a sort function (which mutates arrays), causing the application to crash because Immer prohibits mutating the store.

We replaced the usage of .sort with .toSorted, resolving the issue since .toSorted is a non-mutating method. Nevertheless, we'd like TypeScript to assist us with this in the future.

How can we ensure that the store's type is readonly? I attempted to make all lenses ReadonlyDeep (using the type-fest utility), but that seems to result in a cascade of TypeScript issues.

Current stack: Zunstand + Immer + Zustand lens

[dai-shi]

As you use immer, is it correct that the place where you mutate the store value is outside the store, or in selector? Can you share a pseudo code to illustrate the misusage?

[pinkynrg]

Sure! It's not right to change the store outside the store.

But because we switched to Zustand with the immer middleware recently, and we kept our store properties names the same, there might be old code that's mistakenly mutating the store.

I want TypeScript to help us catch those mistakes, but right now, when we use the store in a React component, TypeScript doesn't give us much help because the store properties are writable.

Did I explain it better this time?

[dbritto-dev]

@pinkynrg you could achieve that with typescript

[dai-shi]

How about something like this?

const useMyStoreInternal = create(...);
export const useMyStore = (selector) => {
  const value = useMyStoreInternal(selector);
  return deepFreeze(value);
};