redux-devtools
redux-devtools copied to clipboard
reduxjs
redux-devtools-extension: time travel sends wrong state
Hi, I'm trying to integrate my store (which uses immutable.js for its state) with redux-devtools using this api:
const options = {
serialize: {
immutable: Immutable,
refs: [
Exercise,
State,
etc...
]
}
};
const devtools = window.__REDUX_DEVTOOLS_EXTENSION__.connect(options);
const unsubscribe = devtools.subscribe((message) => {
if (message.type === 'DISPATCH') {
console.log(message.payload, message.state && message.state.substring(0,20));
}
});
connection.init(state);
If I send some actions to the devtools and then jump back and forward with the extension console, after 3 or 4 jumps the state sent to the subscribe listener is wrong, as you can see below here:
{type: "JUMP_TO_STATE", actionId: 4, index: 4} "{"data":{"spinner":f
{type: "JUMP_TO_STATE", actionId: 3, index: 3} "{"data":{"spinner":f
{type: "JUMP_TO_STATE", actionId: 2, index: 2} "{"data":{"spinner":f
{type: "JUMP_TO_STATE", actionId: 3, index: 3} "{"spinner":false,"er
^^^^^^
HERE
as you can see in the last line, the serialized json isn't complete, it lacks all the metadata needed by the parse function to reconstruct the immutable records, so my app breaks because the state is no longer an Immutable record.
I've tried to look for examples and documentation, but I can't understand if I'm doing something wrong or if it's a bug of the redux-devtool extension.
here is a small html/js script to see the issue in action. I used the extension built and installed from https://github.com/reduxjs/redux-devtools/releases using the latest version available (2.17.1 as reported by chrome)
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
</head>
<body>
<p>
Open the redux-devtools console (tested with the chrome extension), then run this script.
In the output panel you should see 3 lines of output, and in the console you should see the 3 state updates.
Now in the console go back in time twice and then forward once. the last line of output shows that the state sent to the subscribe() listener is lacking all the __serializedType__ metadata.
</p>
<pre id="out"></pre>
<script>
const out = document.getElementById('out');
const installed = !!window.__REDUX_DEVTOOLS_EXTENSION__;
const Foo = new Immutable.Record({
bar: null,
count: 0
});
const Bar = new Immutable.Record({
bar: 'b'
});
const options = {
serialize: {
immutable: Immutable,
refs: [
Foo,
Bar
]
}
};
let text = '';
function inc(state, devtools) {
const updated = state.set('count', state.count + 1);
text += 'sent to extension - count ' + updated.count + '\n';
devtools.send({ type: 'INC' }, updated);
out.innerText = text;
return updated;
}
(function() {
if (installed === false) {
out.innerText = 'redux-devtools extension not installed';
return;
}
let state = new Foo({
bar: new Bar()
});
const extension = window.__REDUX_DEVTOOLS_EXTENSION__;
const devtools = extension.connect(options);
const unsubscribe = devtools.subscribe((message) => {
if (message.type === 'DISPATCH') {
text += 'DISPATCH ' + message.payload.type + '\n';
text += message.state + '\n';
out.innerText = text;
}
});
devtools.init(state);
state = inc(state, devtools);
state = inc(state, devtools);
state = inc(state, devtools);
})();
</script>
</body>
</html>
