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

[JayFoxRox]

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 fix(middleware): jump state support in devtools #590 by @Aslemammad
• Support for devtools serialize option was added in Allow optional REDUX DEVTOOLS "options" object #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)

[dai-shi]

@JayFoxRox Thanks for reporting!
Do you (or anyone else) know how to fix it?

[mia-trilo]

I'm running into similar issues. While I'm also using the immutable.js library, the issue doesn't seem to be related to immutable. I have custom serialize/deserialize code set up for persist but but there is no way to invoke it for redux devtools. One solution I see (I'm not familiar with the code on Redux, so it might not be possible on their end) is to allow custom serialize/deserialize hooks while interacting with the devtool so the states can be correctly reverted

[mia-trilo]

I looked into it a little bit, I think this issue could be solved by adding custom serializer/deserializer in DevtoolsOptions that is used here instead of the default parseJsonThen function.

[dai-shi]

That sounds reasonable. I wonder if you can write failing test cases first.

[mia-trilo]

Sure. Is there a particular format for the failing test cases you expect?

[dai-shi]

Please follow existing ./tests/ files.