atomWithImmer not working with atomWithStorage

[Francesco-Lanciana]

When I combine atomWithStorage with atomWithImmer I am not able to write to the atom. Here is a minimal code example:

export const persistanceInfoAtom = atomWithStorage(
  'persisted_info',
  atomWithImmer({
    ex1: false,
    ex2: false
  })
);

// Define the following code in a component
const [, setPersistInfo] = useAtom(persistanceInfoAtom);

setPersistInfo((draft) => {
  draft.ex1 = true;
});

When I try to access the property ex1 from setPersistInfo I am given the following error:

Argument of type '(draft: WritableAtom<{ ex1: boolean; ex2: boolean; }, [{ ex1: boolean; ex2: boolean; } | ((draft: WritableDraft<{ ex1: boolean; ex2: boolean; }>) => void)], void>) => void' is not assignable to parameter of type 'SetStateActionWithReset<WritableAtom<{ ex1: boolean; ex2: boolean; }, [{ ex1: boolean; ex2: boolean; } | ((draft: WritableDraft<{ ex1: boolean; ex2: boolean; }>) => void)], void>>'.
  Type '(draft: WritableAtom<{ ex1: boolean; ex2: boolean; }, [{ ex1: boolean; ex2: boolean; } | ((draft: WritableDraft<{ ex1: boolean; ex2: boolean; }>) => void)], void>) => void' is not assignable to type '(prev: WritableAtom<{ ex1: boolean; ex2: boolean; }, [{ ex1: boolean; ex2: boolean; } | ((draft: WritableDraft<{ ex1: boolean; ex2: boolean; }>) => void)], void>) => WritableAtom<...> | unique symbol'.
    Type 'void' is not assignable to type 'WritableAtom<{ ex1: boolean; ex2: boolean; }, [{ ex1: boolean; ex2: boolean; } | ((draft: WritableDraft<{ ex1: boolean; ex2: boolean; }>) => void)], void> | unique symbol'.ts(2345)

If I remove atomWithStorage and use atomWithImmer directly, this example works. How do I combine atomWithStorage with atomWithImmer and write to properties as if I were just using atomWithImmer?

Thanks in advance for the help.

[Francesco-Lanciana]

I think I figured it out, you need to do the following:

export const persistanceInfoAtom = atomWithStorage(
  'persisted_info',
  {
    ex1: false,
    ex2: false
  }
);

// Define the following code in a component
const [, setPersistInfo] = useImmerAtom(persistanceInfoAtom);

setPersistInfo((draft) => {
  draft.ex1 = true;
});

I think this is because atomWithStorage expects the initial value, and if you use an atom as the initial value it expects you to update it with an atom. It would be nice if this could work out of the box but I'm not sure what other implications this might have.

[dai-shi]

Yeah, it's currently a limitation. Combining atomWithFoo and atomWithBar isn't possible. I think there are some other discussions discussing about it.