Recently I was having a lot of trouble using Redux Devtools in a project, it was interesting that I could access the tools in most of the views but for one particular section the extension stop being responsive and after some minutes it crashed.
The problem
I started debugging and find out that we were saving a few problematic things into the store. The idea is to have things that are easy to serialize, it is not a rule but there are good reasons for that, the main one being that often you want to persist and restore state. I found that there were some functions and recursive structures (circular references) and those were obviously hard to serialize.
I was seriously considering a refactor, but fortunately I found the troubleshooting section in the redux-devtools-extension repository and it sent me to the actionSanitizer and stateSanitizer API description. Probably a refactor should still be considered, but this little thing saved me plenty of time and pain.
The solution
The idea here is that actions and states can be replaced by something else manually, so it does not fix the serialization problem at all, and won't solve an app performance problem if it exists, but it will stop that part of the state being analyzed by the Redux Devtools so it can run as smoothly as expected.
I don't know about the internals of the extension but when you think about it, it makes a lot of sense, time traveling needs to move from one state to the other and the only way to do it is to have a representation of that state and the extension was having a hard time trying to get that snapshot.
References
If you enjoy this post please consider following me and dropping a line here or in Twitter.
Top comments (0)