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.

[dhmk083]

Yes, unfortunately there is a problem with readonly types and immer.

Basic setter function has (state: T) => Partial<T> as one of its overloads. It works fine when T is readonly, because you're supposed to return a new object without mutating the old one. However with immer you need to mutate state argument, so you need to use (state: Draft<T>) => void overload, where Draft<T> is similar to WritableDeep<T> type from type-fest.

But, for some reason, when these two overloads are present together in the final setter type, typescript messes up state type and infers it as any.

So, you need to set state type explicitly. You can use either Draft or WritableDeep since they are the same. Or you can use produce function from immer explicitly. Or I can add a special immerLens function as a workaround.

See examples below:

import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import { withLenses, lens } from "@dhmk/zustand-lens";
import { ReadonlyDeep, WritableDeep } from "type-fest";
import { Draft, produce } from "immer";

// 1. Type lenses

type Test = ReadonlyDeep<{
  id: number;
  name: string;
}>;

const slice = lens<Test>((set) => {
  return {
    id: 1,
    name: "a",

    test() {
      set((d) => {
        // Errors, because `d` has type `Test` (ReadonlyDeep)
        d.id = 1;
        d.name = "a";
      });

      set((d: Draft<Test>) => {
        d.id = 1;
        d.name = "a";
      });

      set((d: WritableDeep<Test>) => {
        d.id = 1;
        d.name = "a";
      });

      set(
        produce((d) => {
          d.id = 1;
          d.name = "a";
        })
      );
    },
  };
});

const store = create(immer(withLenses({ slice })));
store.getState().slice.id = 1; // Expected error

// 2. Type store

type StoreType = ReadonlyDeep<{
  slice: {
    id: number;
    name: string;
  };
}>;

const store2 = create<StoreType>()(
  immer(
    withLenses({
      slice: lens((set) => ({
        id: 1,
        name: "a",

        test() {
          set((d) => {
            // Errors, because `d` is readonly
            d.id = 1;
            d.name = "a";
          });

          set((d: Draft<Test>) => {
            d.id = 1;
            d.name = "a";
          });

          set((d: WritableDeep<Test>) => {
            d.id = 1;
            d.name = "a";
          });

          set(
            produce((d) => {
              d.id = 1;
              d.name = "a";
            })
          );
        },
      })),
    })
  )
);

store2.getState().slice.id = 1; // Expected error