Redux Toolkit configuration - adding a custom Type

[mlynde]

If I createReduxMiddleware with defaultOptions, all of my Date fields are properly serified/deserified. When I try to create a custom Class and pass in customOptions as the documentation shows, Dates are not properly serified/deserified.

const customOptions: SerifyOptions = {
...defaultOptions,
serifyKey: "SatUnit",
types: {
...defaultOptions.types,
SatUnit: {
serifier: (value) => structuredClone(value),
deserifier: (value) => new SatUnit(value.ID, value.Trigraph)
}
}
};

Any pointers on how I can fix this? Thanks!

[karmaniverous]

My guess is that it has to do with your SatUnit serifier function.

structuredClone creates a clone of the input value. If the input value were serializable, its clone would also be serializable and you wouldn't NEED serify.

Your serify function should decompose SatUnit into a collection of serifiable types... meaning types that are ALREADY serializable, or other types represented in your serify options.

Look at your deserifier function. What's value.Trigraph? The assumption is that serifier put it there. If Trigraph isn't of a serifiable type, then you'll have to create another options entry to serify its type.

As far as dates are concerned, my guess is the process simply failed before it got to them. Should have been an error, though. Was there not one?

Note that with the Redux middleware involved, there are really two potential points of failure:

• Are things getting properly serified on the way in?
• Can you deserify them on the way out?

Depending on you Redux settings, a serialization failure may happen silently. So take a look at the values in your store and make sure they look as they should.

[mlynde]

It turns out that I was using deserify with defaultOptions when I should have been using customOptions. That is why Date fields would not deserify (serifyKey was SatUnit and default options serifyKey was null). It works now. Curiously, the serify on SatUnit works with structuredClone but I get a Maximum call stack size exceeded if I set 'serifier: (value) => value'

Thanks!

[karmaniverous]

Aha yes! Didn't catch that, my bad.

serifier: (value) => value is sort of pointless, yes. With structuredClone you aren't really serifying the value, since the clone will still have all the unserifiable qualities of the original. If it's working in Redux, that's only because the Redux engine is failing to choke on it. More luck than anything.

Take a look at the serifier function for a Map in defaultOptions:

Map: {
  serifier: (value) => [...value.entries()],
  deserifier: (value) => new Map(value),
}

The Map.entries method converts a Map into an array of tuples, which is totally JSON-serializable ASSUMING that the tuple contents are ALSO JSON-serializable. Serification is recursive, so as long as those contents are restricted to JSON-serializable types or types defined in your serify options, the serifier output will be JSON-serializable.

The deserifier function is the exact inverse of the serifier function. If I ran...

deserifier(serifier(value as Map));

... I would get value back out.

That's how the library is supposed to work. I'd encourage you to double-check the JSON-serializability of your serifier function and its reversibility with deserifier. Otherwise you might experience some weirdness.