{"version":"1.0","type":"rich","title":"Gist 56b9c00fb86d733bf6f97d3a27ecb5fd","description":"This example shows a Redux middleware-style logger that visualizes state changes in a React or Redux application. The code exports a `logger` function that wraps a reducer and, for each dispatched action, logs a collapsible group with the action type, the previous state, the action object, and the next state, using `console.group`, `console.log`, and styled `%c` format specifiers with color codes for readability. It relies on the Redux reducer pattern, where `currentState` is implicitly captured, and returns the next state unchanged after logging. No external visualization library is used; the rendering approach is plain browser console output.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-56b9c00fb86d733bf6f97d3a27ecb5fd?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}