fix(#285): add composeWithStateSync to resolve issues with enhancer order

package.json

@@ -34,6 +34,7 @@
         "node": ">= 12"
     },
     "dependencies": {
+        "electron-process-type": "^4.2.0",
         "lodash.isplainobject": "^4.0.6",
         "lodash.isstring": "^4.0.1"
     },

src/composeWithStateSync.ts

@@ -0,0 +1,47 @@
+/* eslint-disable @typescript-eslint/ban-types */
+
+import { StoreEnhancer, StoreEnhancerStoreCreator } from 'redux'
+import { forwardAction } from './forwardAction'
+import { MainStateSyncEnhancerOptions } from './options/MainStateSyncEnhancerOptions'
+import { RendererStateSyncEnhancerOptions } from './options/RendererStateSyncEnhancerOptions'
+import { stateSyncEnhancer } from './stateSyncEnhancer'
+
+export type StateSyncOptions = MainStateSyncEnhancerOptions | RendererStateSyncEnhancerOptions
+
+const forwardActionEnhancer = (options?: StateSyncOptions): StoreEnhancer => (createStore) => (
+    reducer,
+    preloadedState
+) => {
+    const store = createStore(reducer, preloadedState)
+
+    return forwardAction(store, options)
+}
+
+const extensionCompose = (options: StateSyncOptions) => <D extends StoreEnhancerStoreCreator>(
+    ...funcs: Function[]
+) => {
+    return (createStore: D) => {
+        return [
+            stateSyncEnhancer({ ...options, preventActionReplay: true }),
+            ...funcs,
+            forwardActionEnhancer(options),
+        ].reduceRight((composed, f) => f(composed), createStore)
+    }
+}
+
+export function composeWithStateSync<R>(
+    options: StateSyncOptions
+): (...funcs: Function[]) => (...args: any[]) => R
+export function composeWithStateSync<R>(...funcs: Function[]): (...args: any[]) => R
+export function composeWithStateSync(
+    firstFuncOrOpts: Function | StateSyncOptions,
+    ...funcs: Function[]
+) {
+    if (arguments.length === 0) {
+        return stateSyncEnhancer()
+    }
+    if (arguments.length === 1 && typeof firstFuncOrOpts === 'object') {
+        return extensionCompose(firstFuncOrOpts)
+    }
+    return extensionCompose({})(firstFuncOrOpts as Function, ...funcs)
+}

src/forwardAction.ts

@@ -0,0 +1,51 @@
+import { ipcRenderer, webContents } from 'electron'
+import { Store } from 'redux'
+import { StateSyncOptions } from './composeWithStateSync'
+import { IPCEvents } from './constants'
+import { MainStateSyncEnhancerOptions } from './options/MainStateSyncEnhancerOptions'
+import { RendererStateSyncEnhancerOptions } from './options/RendererStateSyncEnhancerOptions'
+import { isMain, isRenderer, validateAction } from './utils'
+
+export const processActionMain = <A>(
+    action: A,
+    options: MainStateSyncEnhancerOptions = {}
+): void => {
+    if (validateAction(action, options.denyList)) {
+        webContents.getAllWebContents().forEach((contents) => {
+            // Ignore chromium devtools
+            if (contents.getURL().startsWith('devtools://')) return
+            contents.send(IPCEvents.ACTION, action)
+        })
+    }
+}
+
+export const processActionRenderer = <A>(
+    action: A,
+    options: RendererStateSyncEnhancerOptions = {}
+): void => {
+    if (validateAction(action, options.denyList)) {
+        ipcRenderer.send(IPCEvents.ACTION, action)
+    }
+}
+
+export const forwardAction = <S extends Store<any, any>>(
+    store: S,
+    options?: StateSyncOptions
+): S => {
+    return {
+        ...store,
+        dispatch: (action) => {
+            const value = store.dispatch(action)
+
+            if (!options?.preventActionReplay) {
+                if (isMain) {
+                    processActionMain(action, options)
+                } else if (isRenderer) {
+                    processActionRenderer(action, options)
+                }
+            }
+
+            return value
+        },
+    }
+}

src/index.ts

@@ -1,5 +1,13 @@
 import { mainStateSyncEnhancer } from './mainStateSyncEnhancer'
 import { stopForwarding } from './utils'
 import { rendererStateSyncEnhancer } from './rendererStateSyncEnhancer'
+import { stateSyncEnhancer } from './stateSyncEnhancer'
+import { composeWithStateSync } from './composeWithStateSync'
 
-export { mainStateSyncEnhancer, rendererStateSyncEnhancer, stopForwarding }
+export {
+    mainStateSyncEnhancer,
+    rendererStateSyncEnhancer,
+    stopForwarding,
+    stateSyncEnhancer,
+    composeWithStateSync,
+}

src/mainStateSyncEnhancer.ts

@@ -1,22 +1,21 @@
 import { ipcMain, webContents } from 'electron'
-import {
-    Action,
-    compose,
-    Dispatch,
-    Middleware,
-    MiddlewareAPI,
-    StoreCreator,
-    StoreEnhancer,
-} from 'redux'
+import { Action, StoreEnhancer } from 'redux'
 import { IPCEvents } from './constants'
-import {
-    defaultMainOptions,
-    MainStateSyncEnhancerOptions,
-} from './options/MainStateSyncEnhancerOptions'
-import { preventDoubleInitialization, stopForwarding, validateAction } from './utils'
+import { forwardAction } from './forwardAction'
+import { MainStateSyncEnhancerOptions } from './options/MainStateSyncEnhancerOptions'
+import { stopForwarding } from './utils'
+
+/**
+ * Creates new instance of main process redux enhancer.
+ * @param {MainStateSyncEnhancerOptions} options Additional enhancer options
+ * @returns StoreEnhancer
+ */
+export const mainStateSyncEnhancer = (
+    options: MainStateSyncEnhancerOptions = {}
+): StoreEnhancer => (createStore) => {
+    return (reducer, preloadedState) => {
+        const store = createStore(reducer, preloadedState)
 
-function createMiddleware(options: MainStateSyncEnhancerOptions) {
-    const middleware: Middleware = (store) => {
         ipcMain.handle(IPCEvents.INIT_STATE_ASYNC, async () => {
             return JSON.stringify(store.getState(), options.serializer)
         })
@@ -28,6 +27,7 @@ function createMiddleware(options: MainStateSyncEnhancerOptions) {
         // When receiving an action from a renderer
         ipcMain.on(IPCEvents.ACTION, (event, action: Action) => {
             const localAction = stopForwarding(action)
+
             store.dispatch(localAction)
 
             // Forward it to all of the other renderers
@@ -42,46 +42,6 @@ function createMiddleware(options: MainStateSyncEnhancerOptions) {
             })
         })
 
-        return (next) => (action) => {
-            if (validateAction(action, options.denyList)) {
-                webContents.getAllWebContents().forEach((contents) => {
-                    // Ignore chromium devtools
-                    if (contents.getURL().startsWith('devtools://')) return
-                    contents.send(IPCEvents.ACTION, action)
-                })
-            }
-
-            return next(action)
-        }
-    }
-    return middleware
-}
-
-/**
- * Creates new instance of main process redux enhancer.
- * @param {MainStateSyncEnhancerOptions} options Additional enhancer options
- * @returns StoreEnhancer
- */
-export const mainStateSyncEnhancer = (options = defaultMainOptions): StoreEnhancer => (
-    createStore: StoreCreator
-) => {
-    preventDoubleInitialization()
-    const middleware = createMiddleware(options)
-    return (reducer, preloadedState) => {
-        const store = createStore(reducer, preloadedState)
-
-        let dispatch = store.dispatch
-
-        const middlewareAPI: MiddlewareAPI<Dispatch<any>> = {
-            getState: store.getState,
-            dispatch,
-        }
-
-        dispatch = compose<Dispatch>(middleware(middlewareAPI))(dispatch)
-
-        return {
-            ...store,
-            dispatch,
-        }
+        return forwardAction(store, options)
     }
 }

src/options/MainStateSyncEnhancerOptions.ts

@@ -1,15 +1,10 @@
-export type MainStateSyncEnhancerOptions = {
+import { StateSyncOptions } from './StateSyncOptions'
+
+export interface MainStateSyncEnhancerOptions extends StateSyncOptions {
     /**
      * Custom store serialization function.
      * This function is called for each member of the object. If a member contains nested objects,
      * the nested objects are transformed before the parent object is.
      */
     serializer?: (this: unknown, key: string, value: unknown) => unknown
-
-    /**
-     * Custom list for actions that should never replay across stores
-     */
-    denyList?: RegExp[]
 }
-
-export const defaultMainOptions: MainStateSyncEnhancerOptions = {}

src/options/RendererStateSyncEnhancerOptions.ts

@@ -1,16 +1,13 @@
-export type RendererStateSyncEnhancerOptions = {
+import { StateSyncOptions } from './StateSyncOptions'
+
+export interface RendererStateSyncEnhancerOptions extends StateSyncOptions {
     /**
      * Custom function used during de-serialization of the redux store to transform the object.
      * This function is called for each member of the object. If a member contains nested objects,
      * the nested objects are transformed before the parent object is.
      */
     deserializer?: (this: unknown, key: string, value: unknown) => unknown
 
-    /**
-     * Custom list for actions that should never replay across stores
-     */
-    denyList?: RegExp[]
-
     /**
      * By default, the renderer store is initialized from the main store synchronously.
      * Since the synchronous fetching of the state is blocking the renderer process until it gets the state
@@ -19,5 +16,3 @@ export type RendererStateSyncEnhancerOptions = {
      */
     lazyInit?: boolean
 }
-
-export const defaultRendererOptions: RendererStateSyncEnhancerOptions = {}

src/options/StateSyncOptions.ts

@@ -0,0 +1,11 @@
+export interface StateSyncOptions {
+    /**
+     * Custom list for actions that should never replay across stores
+     */
+    denyList?: RegExp[]
+
+    /**
+     * Prevent replaying actions in the current process
+     */
+    preventActionReplay?: boolean
+}

src/rendererStateSyncEnhancer.ts

@@ -1,36 +1,11 @@
 import { ipcRenderer } from 'electron'
-import {
-    Action,
-    compose,
-    Dispatch,
-    Middleware,
-    MiddlewareAPI,
-    StoreCreator,
-    StoreEnhancer,
-} from 'redux'
+import { Action, StoreEnhancer } from 'redux'
 import { IPCEvents } from './constants'
+import { forwardAction } from './forwardAction'
 import { fetchInitialState, fetchInitialStateAsync } from './fetchState'
 import { replaceState, withStoreReplacer } from './fetchState/replaceState'
-import {
-    defaultRendererOptions,
-    RendererStateSyncEnhancerOptions,
-} from './options/RendererStateSyncEnhancerOptions'
-import { preventDoubleInitialization, stopForwarding, validateAction } from './utils'
-
-const createMiddleware = (options: RendererStateSyncEnhancerOptions): Middleware => (store) => {
-    // When receiving an action from main
-    ipcRenderer.on(IPCEvents.ACTION, (_, action: Action) => {
-        store.dispatch(stopForwarding(action))
-    })
-
-    return (next) => (action) => {
-        if (validateAction(action, options.denyList)) {
-            ipcRenderer.send(IPCEvents.ACTION, action)
-        }
-
-        return next(action)
-    }
-}
+import { RendererStateSyncEnhancerOptions } from './options/RendererStateSyncEnhancerOptions'
+import { stopForwarding } from './utils'
 
 /**
  * Creates new instance of renderer process redux enhancer.
@@ -39,15 +14,12 @@ const createMiddleware = (options: RendererStateSyncEnhancerOptions): Middleware
  * @param {RendererStateSyncEnhancerOptions} options Additional settings for enhancer
  * @returns StoreEnhancer
  */
-export const rendererStateSyncEnhancer = (options = defaultRendererOptions): StoreEnhancer => (
-    createStore: StoreCreator
-) => {
-    preventDoubleInitialization()
-
+export const rendererStateSyncEnhancer = (
+    options: RendererStateSyncEnhancerOptions = {}
+): StoreEnhancer => (createStore) => {
     return (reducer, state) => {
-        const middleware = createMiddleware(options)
-
         const initialState = options.lazyInit ? state : fetchInitialState<typeof state>(options)
+
         const store = createStore(
             options.lazyInit ? withStoreReplacer(reducer) : reducer,
             initialState
@@ -59,18 +31,11 @@ export const rendererStateSyncEnhancer = (options = defaultRendererOptions): Sto
             })
         }
 
-        let dispatch = store.dispatch
-
-        const middlewareAPI: MiddlewareAPI<Dispatch<any>> = {
-            getState: store.getState,
-            dispatch,
-        }
-
-        dispatch = compose<Dispatch>(middleware(middlewareAPI))(dispatch)
+        // When receiving an action from main
+        ipcRenderer.on(IPCEvents.ACTION, (_, action: Action) => {
+            store.dispatch(stopForwarding(action))
+        })
 
-        return {
-            ...store,
-            dispatch,
-        }
+        return forwardAction(store, options)
     }
 }

src/stateSyncEnhancer.ts

@@ -0,0 +1,17 @@
+import { StoreEnhancer } from 'redux'
+import { StateSyncOptions } from './composeWithStateSync'
+import { mainStateSyncEnhancer } from './mainStateSyncEnhancer'
+import { rendererStateSyncEnhancer } from './rendererStateSyncEnhancer'
+import { isMain, isRenderer, preventDoubleInitialization } from './utils'
+
+export const stateSyncEnhancer = (config: StateSyncOptions = {}): StoreEnhancer => {
+    preventDoubleInitialization()
+
+    if (isRenderer) {
+        return rendererStateSyncEnhancer(config)
+    } else if (isMain) {
+        return mainStateSyncEnhancer(config)
+    }
+
+    throw new Error(`Unsupported process: ${process?.type}`)
+}

src/utils/actions.ts

@@ -1,4 +1,4 @@
-import { isFSA, FluxStandardAction } from './isFSA'
+import { FluxStandardAction, isFSA } from './isFSA'
 
 // Gives us just enough action type info to work for the functions below
 export type ActionMeta = {
@@ -9,7 +9,7 @@ export type ActionMeta = {
  * stopForwarding allows you to give it an action, and it will return an
  * equivalent action that will only play in the current process
  */
-export const stopForwarding = (action: FluxStandardAction<ActionMeta>) => ({
+export const stopForwarding = (action: FluxStandardAction<ActionMeta>): any => ({
     ...action,
     meta: {
         ...action.meta,