Debugging State - Githubissues

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! :beers:

derrickbeining / react-atom

Debugging State #47