Redux Dev Tools: Inconsistencies in Redux Dev Tools vs Actions dispatched

[juanmaguitar]

Redux Dev Tools doesn't seem to properly reflect the actions dispatched for some of the stores.

I added a local middleware to log all actions dispatched per store, and the output doesn't match the output of Redux Dev Tools for some stores.

For example, core/editor perfectly matches, but core/block-editor and core/blocks don't.

Shouldn't they all match? Is there anything I'm missing here?

In the Site Editor

core/editor ✅

core/block-editor ❌

core/blocks ❌

In the Post Editor

core/editor ✅

core/block-editor ❌

I get this when I select "core/block-editor" store in the post editor

core/blocks ❌

How to reproduce this

Site Editor → http://localhost:8888/wp-admin/site-editor.php
Post Editor → http://localhost:8888/wp-admin/post.php?post=1&action=edit

Get redux developer tools output:

• Install Redux Developer Tools
• Go to the Site Editor and reload a page with the "Redux Dev Tools" tab opened
• Select the store

Get logger output:

• Clone https://github.com/WordPress/gutenberg in the plugins folder of a local dev environment
• Install dependencies (npm i) and run build/watch mode (npm run dev)
• Install and activate gutenberg plugin
• Add the following code to plugins/gutenberg/packages/data/src/redux-store/index.js

Logger implementation details

I added this code to plugins/gutenberg/packages/data/src/redux-store/index.js

const loggerMiddleware = ( optionsLogger ) => ( store ) => ( next ) => {
		return ( action ) => {
			const { whatToLog, storeName, storesToLog } = optionsLogger;
			if ( storesToLog.includes( storeName ) ) {
				if ( whatToLog.includes( 'action' ) ) {
					console.log( { storeName, ...action } );
				}
				if ( whatToLog.includes( 'prevState' ) ) {
					const prevState = store.getState();
					console.log( { storeName, prevState } );
				}
			}

			const result = next( action );

			if ( storesToLog.includes( storeName ) ) {
				if ( whatToLog.includes( 'nextState' ) ) {
					const nextState = store.getState();
					console.log( { storeName, nextState } );
				}
			}

			return result;
		};
	};

	const optionsLogger = {
		storesToLog: [ 'core/blocks' ],
		storeName: key,
		whatToLog: [ 'action' ],
	};
	const middlewares = [
		createResolversCacheMiddleware( registry, key ),
		promise,
		createReduxRoutineMiddleware( normalizedControls ),
		createThunkMiddleware( thunkArgs ),
		loggerMiddleware( optionsLogger ),
	];

• Change the value storesToLog: [ 'core/blocks' ] to log only actions of a specific store
• Go to the Site Editor and reload a page with the Developer Tools "console" opened