devtools with option `serialize.immutable` does not deserialize state from devtools correctly (broken redux devtools "Jump" / "Revert" etc.)

[Jannik Vogel]

Summary

redux-devtools provides a serialize option: https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md#serialize.
You can provide the immutable-js library to the serialize.immutable field to: "automatically serialize/deserialize immutablejs via remotedev-serialize."

This works fine for serializing: redux-devtools will show ImmutableSet if zustand store was created with this option.
However, it breaks with deserializing during JUMP_TO_ACTION, REVERT and other devtools options, when used with zustand.

With zustand, the state doesn't get deserialized correctly, so the next time the store is used, the code will receive the wrong data type.
This problem does not occur with redux.

I believe this should work:

• Support for jumping to states was added in #590 by @Aslemammad
• Support for devtools serialize option was added in #540 by @marcoSven

Link to reproduction

https://github.com/JayFoxRox/zustand/tree/immutable-bug/examples/demo
All changes are in this commit: JayFoxRox@80f0765

specifically, this is using:

import { devtools } from 'zustand/middleware'

outStore = devtools(inStore, {
  serialize: {
    immutable: Immutable
  }
})

My reproduction is based on the zustand demo.
To show the problem, the number counter has been replaced by a growing Immutable.Set.
To display it, I JSON.stringify the Immutable.Set (Immutable handles JSON stringification, so it shows as array).

The demo creates 2 stores; one for redux and one for zustand; each with devtools.

The counter button has been duplicated:

• on the left there is a button for the redux store.
• on the right there is a button for the zustand store.

The stores both work until the devtools are used to jump.
When jumping, the redux store continues to work, but the zustand store breaks.
Once the state is broken, JSON stringification shows a JS object which represents the serialized JSON encoding in the redux-devtools.

Here's a video:

zustand-devtools-bug.mp4

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.
  • (No. But reproduction provided and no questions)

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.
  • (No. GitHub repo provided instead to avoid account creation)

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>(...).
  • (Exists with JS and TS; reproduction only created for JS, but real application where bug occured is TS)