chore: stop redux action console flood in dev (#7412)

Author: diegolmello

app/lib/store/actionBuffer.test.ts

@@ -0,0 +1,52 @@
+import { applyMiddleware, createStore } from 'redux';
+
+import { actionBuffer } from './actionBuffer';
+
+const trivialReducer = (state = {}, _action: any) => state;
+
+const makeStore = () => createStore(trivialReducer, applyMiddleware(actionBuffer()));
+
+beforeEach(() => {
+	(global as any).__reduxActions = undefined;
+});
+
+describe('actionBuffer middleware', () => {
+	it('records the dispatched action type in global.__reduxActions', () => {
+		const store = makeStore();
+		store.dispatch({ type: 'TEST_ACTION' });
+		const buf: any[] = (global as any).__reduxActions;
+		expect(buf).toBeDefined();
+		expect(buf[buf.length - 1].type).toBe('TEST_ACTION');
+	});
+
+	it('caps the buffer at 100 and drops the oldest entry (FIFO)', () => {
+		const store = makeStore();
+		for (let i = 0; i < 110; i++) {
+			store.dispatch({ type: `ACTION_${i}` });
+		}
+		const buf: any[] = (global as any).__reduxActions;
+		expect(buf.length).toBe(100);
+		expect(buf[0].type).toBe('ACTION_10');
+		expect(buf[99].type).toBe('ACTION_109');
+	});
+
+	it('writes nothing to the console', () => {
+		const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+		const infoSpy = jest.spyOn(console, 'info').mockImplementation(() => {});
+		const groupSpy = jest.spyOn(console, 'group').mockImplementation(() => {});
+		const groupEndSpy = jest.spyOn(console, 'groupEnd').mockImplementation(() => {});
+
+		const store = makeStore();
+		store.dispatch({ type: 'SILENT_ACTION' });
+
+		expect(logSpy).not.toHaveBeenCalled();
+		expect(infoSpy).not.toHaveBeenCalled();
+		expect(groupSpy).not.toHaveBeenCalled();
+		expect(groupEndSpy).not.toHaveBeenCalled();
+
+		logSpy.mockRestore();
+		infoSpy.mockRestore();
+		groupSpy.mockRestore();
+		groupEndSpy.mockRestore();
+	});
+});

app/lib/store/actionBuffer.ts

@@ -0,0 +1,9 @@
+const CAP = 100;
+
+export const actionBuffer = () => (_store: any) => (next: any) => (action: any) => {
+	(global as any).__reduxActions ??= [];
+	const buf = (global as any).__reduxActions;
+	buf.push({ type: action.type, t: Date.now() });
+	if (buf.length > CAP) buf.shift();
+	return next(action);
+};

app/lib/store/index.ts

@@ -5,21 +5,25 @@ import reducers from '../../reducers';
 import sagas from '../../sagas';
 import applyAppStateMiddleware from './appStateMiddleware';
 import applyInternetStateMiddleware from './internetStateMiddleware';
-import { logger } from './reduxLogger';
 
 let sagaMiddleware;
 let enhancers;
 
 if (__DEV__) {
 	const reduxImmutableStateInvariant = require('redux-immutable-state-invariant').default();
+	const { actionBuffer } = require('./actionBuffer');
+	// Uncomment the next line (and the applyMiddleware(logger) line below) to print every action + next state to Metro.
+	// const { logger } = require('./reduxLogger');
+
 	sagaMiddleware = createSagaMiddleware();
 
 	enhancers = compose(
 		applyAppStateMiddleware(),
 		applyInternetStateMiddleware(),
 		applyMiddleware(reduxImmutableStateInvariant),
 		applyMiddleware(sagaMiddleware),
-		applyMiddleware(logger)
+		applyMiddleware(actionBuffer())
+		// applyMiddleware(logger)
 	);
 } else {
 	sagaMiddleware = createSagaMiddleware();
@@ -29,4 +33,8 @@ if (__DEV__) {
 const store = createStore(reducers, enhancers);
 sagaMiddleware.run(sagas);
 
+if (__DEV__) {
+	(global as any).reduxStore = store;
+}
+
 export default store;