Debugging State

[FlorianRappl]

Hi @derrickbeining - great project you got here!

I've been using React Waterflow earlier on (as a replacement for Redux et al.) and I like what you did. Actually, I like it so much, that I converted / introduced only your package for global state management in all recent projects I'm involved in. The only thing that I like more about React Waterflow is the possibility of adding the (very mature / advanced) Redux dev tools.

For me the most important / crucial part about the Redux dev tools was the console logging during development / non-production runtime. So I thought "why not try to re-create that experience". All in all I did not write any compatibility layer, but rather just a lightweight console output.

The code is:

addChangeHandler(globalState, 'debugging', ({ current, previous }) => {
    const action = new Error().stack.split('\n')[6].replace(/^\s+at\s+Atom\./, '');
    console.group(
    `%c Portal State Change %c ${new Date().toLocaleTimeString()}`,
    'color: gray; font-weight: lighter;',
    'color: black; font-weight: bold;',
    );
    console.log('%c Previous', `color: #9E9E9E; font-weight: bold`, previous);
    console.log('%c Action', `color: #03A9F4; font-weight: bold`, action);
    console.log('%c Next', `color: #4CAF50; font-weight: bold`, current);
    console.groupEnd();
});

where globalState is the created globalState. You can see the whole source code / repository here. We placed this code in a conditional to avoid placing the code in the production build.

Maybe you / someone find(s) this snippet useful and we could provide it as a utility out of the box (properly exported such that tree shaking can remove it if not being used, e.g., in a PROD build of the consuming application).

Thanks again for your nice lib - great job! 🍻

[amitnovick]

This is really cool!

I made a Codesandbox to show the usefulness of this:
https://codesandbox.io/s/github/feelextra/react-atom-playgrounds

The messages are logged to the browser's web console on button click.

Side note: the Atom state seems to persist through code changes, which is an outstanding feature for interactive development (the team behind React-hot-loader has been trying to perfect its' component-state updates behaviour for years now, in comparison, and is largely incompatible with CRA and so is inaccessible to most React users I would say).

To try this out change the Button component's style to another color and see that the state persists.