Implement new listener middleware pattern

Author: JoshuaCWebDeveloper

packages/flow-client/src/app/redux/middleware/flow.middleware.ts

@@ -0,0 +1,62 @@
+import { createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
+import type { AppLogic } from '../../logic';
+import type { AppDispatch, RootState } from '../../store';
+import { flowApi } from '../api/flow.api';
+import { flowActions } from './flow.slice';
+
+// Create the Node-RED sync middleware instance
+export const createRedListener = (logic: AppLogic) => {
+    const nodeRedListener = createListenerMiddleware({
+        extra: logic,
+    });
+
+    return nodeRedListener;
+};
+
+export const startRedListener = (
+    listener: ReturnType<typeof createRedListener>
+) => {
+    // Add a listener that responds to any flow state changes to sync with Node-RED
+    listener.startListening.withTypes<RootState, AppDispatch, AppLogic>()({
+        matcher: isAnyOf(
+            // Flow entity actions
+            flowActions.addFlowEntity,
+            flowActions.updateFlowEntity,
+            flowActions.removeFlowEntity,
+            flowActions.addFlowEntities,
+            flowActions.updateFlowEntities,
+            flowActions.removeFlowEntities,
+            // Flow node actions
+            flowActions.addFlowNode,
+            flowActions.updateFlowNode,
+            flowActions.removeFlowNode,
+            flowActions.addFlowNodes,
+            flowActions.updateFlowNodes,
+            flowActions.removeFlowNodes
+        ),
+        effect: async (action, listenerApi) => {
+            // debounce pattern
+            listenerApi.cancelActiveListeners();
+            await listenerApi.delay(1000);
+
+            try {
+                const state = listenerApi.getState();
+                const logic = listenerApi.extra;
+
+                // Convert our state to Node-RED format
+                const nodeRedFlows = logic.flow.red.toNodeRed(state);
+
+                // Update flows in Node-RED
+                await listenerApi.dispatch(
+                    flowApi.endpoints.updateFlows.initiate(nodeRedFlows)
+                );
+            } catch (error) {
+                // Log any errors but don't crash the app
+                console.error('Error updating Node-RED flows:', error);
+
+                // Could also dispatch an error action if needed:
+                // listenerApi.dispatch(flowActions.setError('Failed to update Node-RED flows'));
+            }
+        },
+    });
+};

packages/flow-client/src/app/redux/modules/flow/red.listener.ts

@@ -1,7 +1,6 @@
 import { Action, configureStore, ThunkAction } from '@reduxjs/toolkit';
 import { setupListeners } from '@reduxjs/toolkit/query';
 import {
-    flowApi } from './modules/api/flow.api';
     FLUSH,
     PAUSE,
     PERSIST,
@@ -11,9 +10,8 @@ import {
     REHYDRATE,
 } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
-
 import type { AppLogic } from './logic';
-import { flowMiddleware } from './middleware/flow.middleware';
+import { flowApi } from './modules/api/flow.api';
 import { iconApi } from './modules/api/icon.api';
 import { nodeApi } from './modules/api/node.api'; // Import the nodeApi
 import {
@@ -26,12 +24,18 @@ import {
     flowReducer,
     FlowState,
 } from './modules/flow/flow.slice';
+import {
+    createRedListener,
+    startRedListener,
+} from './modules/flow/red.listener';
 import {
     PALETTE_NODE_FEATURE_KEY,
     paletteNodeReducer,
 } from './modules/palette/node.slice';
 
 export const createStore = (logic: AppLogic) => {
+    const redListener = createRedListener(logic);
+
     const store = configureStore({
         reducer: {
             [flowApi.reducerPath]: flowApi.reducer,
@@ -73,11 +77,13 @@ export const createStore = (logic: AppLogic) => {
                 nodeApi.middleware,
                 iconApi.middleware,
                 flowApi.middleware,
-                flowMiddleware),
+                redListener.middleware
+            ),
         devTools: process.env.NODE_ENV !== 'production',
     });
 
     setupListeners(store.dispatch);
+    startRedListener(redListener);
 
     return store;
 };