Persist storage : values are converted to strings before replacer

[karbone4]

Summary

I am trying to use persist with dates.

Bug: values are converted to strings before replacer function so I cannot convert it back to date because I couldn't apply type: 'date' to convert it to date in reviver

Link to reproduction

Code sandbox

Check List

Please do not ask questions in issues.

• I've already opened a discussion before opening this issue, or already discussed in other media.

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.

Please check this if you're filing an issue regarding TypeScript.

• I've read the typescript guide, in particular that create is to be used as create<T>()(...) and not create<T>(...).

[dai-shi]

Do you have an idea how to fix it?

[karbone4]

I use it to convert back dates from my storage. I update code sandbox with examples. I want to do it with dates and nested dates :

{
      testDate: new Date(),
      testNestedDate: {
        date: new Date(),
      },
    }

I think reviver / replacer only uses the JSON.parse / JSON.stringfy of the entire object store in zustand

[charkour]

Hi @karbone4, could you clarify how to use the code sandbox to reproduce the bug? The replacer you set is passed to JSON.stringify so I don't think it should convert your value to a string before the replacer runs.

Here is the source code:

zustand/src/middleware/persist.ts

Line 59 in c092d76

JSON.stringify(newValue, options?.replacer),

[karbone4]

Thanks for additional informations, I modified the code sandbox with new reviver and replacer that works

{
        reviver: (key, value: any) => {
          if (value && key === "date") {
            return parseISO(value.value);
          }
          return value;
        },
        replacer: (key, value) => {
          if (value && key === "date") {
            return {
              type: "date",
              value: value instanceof Date ? value.toISOString() : value,
            };
          }
          return value;
        },
      }

It handles the fact that date values are converted to string by JSON.stringfy.

[dai-shi]

Nice. Feel free to submit a PR to improve the docs.

[coldiary]

This would not be a suitable solution for every case, as it depends on a specific key to determine that the value is a date.

I've come to found out that if using a function for the replacer to keep the context, the value of this[key] remains the original value while the value arg is the serialized one. For the reviver, this[key] is undefined, and value is the serialized one.

So we used something like this, for it to work :

  {
    replacer: function (key) {
      const v = this[key];
      
      if (v instanceof Date) {
        return { __type: 'Date', value: v.toISOString() };
      }

      return v;
    },
    reviver: function(_, value) {
      if (value?.__type === 'Date') {
        return parseISO(value.value);
      }

      return value;
    },
  }

[dai-shi]

Here's the test code:

zustand/tests/persistSync.test.tsx

Lines 698 to 708 in c092d76

	const createStore = () => {
	const onRehydrateStorageSpy = vi.fn()
	const useBoundStore = create(
	persist(() => ({ map }), {
	name: 'test-storage',
	storage: createJSONStorage(() => storage, { replacer, reviver }),
	onRehydrateStorage: () => onRehydrateStorageSpy,
	}),
	)
	return { useBoundStore, onRehydrateStorageSpy }
	}

Hmm, I'm not sure how it's not working with Date.

[quertc]

The same problem with Duration / Timestamp from @bufbuild/protobuf.

[60pfennig]

I have the same issue. Its also problematic that in the docs exactly this bug is written as an example
This has lead to an enourmous debug session.

[60pfennig]

And wouldn't it be better to keep the conversation in the issue instead of closing it? In a discussion its harder to find and for me this seems like a potential bug and not a request for help.