Skip to content

Commit

Permalink
redux: When logging, show Immutable parts of state as plain JS objects.
Browse files Browse the repository at this point in the history
Immutable.JS objects come with extra properties and hierarchies that
are an obstacle to debugging; we only care about the data the
objects contain. Redux themselves point out the obstacle [0], but I
noticed it in my own debugging before I saw that doc. Redux
recommends a browser extension, but I think it's better to build a
solution into our code.

So, do a simple transformation in our `redux-logger` middleware,
with an implementation informed by a `redux-logger` doc [1].

That example uses `Iterable.isIterable`, which seems like the thing
people did before `Iterable.isImmutable` arrived [2]. The
`isImmutable` doc [3] says, "True if `maybeImmutable` is an
Immutable Collection or Record".

I checked, and Collection [4] and Record [5] instances both have a
`.toJS` method. We don't use any Records yet, but we want to avoid
nasty surprises if we ever do.

[0] https://github.com/reduxjs/redux/blob/master/docs/recipes/UsingImmutableJS.md#difficult-to-debug

[1] https://github.com/LogRocket/redux-logger#transform-immutable-with-combinereducers

[2] https://stackoverflow.com/a/31919411/6792075; see also PR
    immutable-js/immutable-js#1113; issue
    immutable-js/immutable-js#566

[3] https://immutable-js.github.io/immutable-js/docs/#/isImmutable

[4] https://immutable-js.github.io/immutable-js/docs/#/Collection/toJS

[5] https://immutable-js.github.io/immutable-js/docs/#/Record/toJS
  • Loading branch information
chrisbobbe committed Sep 22, 2020
1 parent 917886d commit 033327c
Showing 1 changed file with 14 additions and 0 deletions.
14 changes: 14 additions & 0 deletions src/boot/store.js
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,20 @@ function listMiddleware() {
// and ours:
// https://github.com/zulip/zulip-mobile/blob/master/docs/howto/debugging.md#redux-logger
createLogger({
stateTransformer: state => {
// Beware: errors thrown in here will silently drop actions.
const newState = {};
Object.keys(state).forEach(key => {
if (Immutable.isImmutable(state[key])) {
// Make things like `state.narrows` appear as plain
// JS objects in the logs (much easier to read)
newState[key] = state[key].toJS();
} else {
newState[key] = state[key];
}
});
return newState;
},
duration: true,
// Example options to add for more focused information, depending on
// what you're investigating; see docs/howto/debugging.md (link above).
Expand Down

0 comments on commit 033327c

Please sign in to comment.