Does it work with RTK-Query?

[kasparkallas]

Just chuck the middleware between RTK-Query'd middleware and the store and poof, we can store natively unserializable data? Have you tried it?

I guess there would be some issues with the serialization for the cache key but that's fixable.

[karmaniverous]

Lol yup. You just need to be clear about what it is actually DOING.

Take a look at the default supported types. We aren't sending unserializable types to the store. Instead, we're converting those types into objects that ARE serializable, and then storing THOSE. Then we reverse the process on the way out.

So the get the EFFECT of storing unserializable types without actually having to do so or think about it too hard.

One caveat: the middleware performs the serify transform on the way IN to the store. You still need to call deserify declaratively on the way OUT, which is not a particularly heavy burden and really ONLY needs to be done for serified values. Although you can deserify all you want and unserified values will just pass right through.

[karmaniverous]

Hm one more caveat: by default the module only supports BigInt, Date, Map & Set. Again, see the default options, it's almost trivial to add support for another type. More info here on passing that support into the serify & deserify functions.

Also click here for a fully worked-out example including RTK and a custom class type.

[karmaniverous]

Also just to finish the swing: YES of course I've tried it. I wrote this thing because I needed it for a crypto app that featured a ton of BigInt & Date values, which don't play nicely with Redux. Works like a charm.

[karmaniverous]

Final installment and then I'll shut up: the one example you won't see here is RTK QUERY (as opposed to vanilla RTK and the entity stuff). That's a fair question: never needed it, so didn't try it.

But I doubt it will work any different... just be sure to deserify as appropriate when values come back out of the store.

LMK how it goes!

[kasparkallas]

Thanks for the detailed answer!

A crypto/Web3 app is my use case as well. :) A lot of developers will find Redux because of how front-end heavy the dApps are and the problems associated with it.

I think I understand the caveat now though which is to deserify when the data is coming out. Something like RTK-Query hides away a lot of the getState calls from you so I think it will either run into errors or not gonna be elegant, unfortunately. I was hoping for a magical silver bullet drop-in solution. 😄

I wish we'd have a little middleware pipeline for when the data is coming out of the store... An idea would be to wrap getState but there's so many callbacks that wouldn't be using the wrapped version...

I wish we could specify a custom serializer... But I don't think there's any way to do it apart from overriding the JSON-related prototypes.

Appreciate the library and clever thinking though! ❤️

[karmaniverous]

The trouble with Redux middleware (ahem @markerikson) is that it only runs on the way in. That's why it only works on serify.

Honestly I don't think you will have an issue here. Just run deserify on the whole record coming out of RTQ, right before you use it. It won't break on anything that isn't already serified.

Admittedly it isn't a perfect solution but I had a pretty data-heavy application and it did the trick just fine for me. And if you feel like rolling up your sleeves, I'm totally open to input. :)

One thing worth mentioning: the process is recursive in both directions. So you really only need to run it at the top level.

[karmaniverous]

Just a taste... here's a usage example with useSelector:

// Get selected game index (a BigInt).
const selectedGameIndex = deserify(
  useSelector((state) => state.page.selectedGameIndex, blockRefresh)
);

How did that BigInt value get into the store in the first place? Just shoved it straight in, and the serify middleware serified it on the way in.

It really is that simple. Also, if you're storing structured data in Redux and you haven't looked at blockRefresh, you should. Keeping in mind that a serified value (assuming it required serification) is structured data by definition. 😎👊