Defer notifications while performing action

src/API.ts

@@ -4,7 +4,10 @@ import { ThrottledStore } from './throttledStore'
 
 export { AppHostAPI } from './appHostServices'
 
-export type ScopedStore<S> = Pick<ThrottledStore<S>, 'dispatch' | 'getState' | 'subscribe' | 'flush' | 'hasPendingSubscribers'>
+export type ScopedStore<S> = Pick<
+    ThrottledStore<S>,
+    'dispatch' | 'getState' | 'subscribe' | 'flush' | 'hasPendingSubscribers' | 'deferSubscriberNotifications'
+>
 export type ReactComponentContributor<TProps = {}> = (props?: TProps) => React.ReactNode
 export type ReducersMapObjectContributor<TState = {}, TAction extends Redux.AnyAction = Redux.AnyAction> = () => Redux.ReducersMapObject<
     TState,

src/appHost.tsx

@@ -1057,7 +1057,8 @@ miss: ${memoizedWithMissHit.miss}
                         return entireStoreState[shell.name]
                     },
                     flush: host.getStore().flush,
-                    hasPendingSubscribers: host.getStore().hasPendingSubscribers
+                    hasPendingSubscribers: host.getStore().hasPendingSubscribers,
+                    deferSubscriberNotifications: host.getStore().deferSubscriberNotifications
                 }
             },
 

src/throttledStore.tsx

@@ -46,7 +46,8 @@ export interface StateContribution<TState = {}, TAction extends AnyAction = AnyA
 
 export interface ThrottledStore<T = any> extends Store<T> {
     hasPendingSubscribers(): boolean
-    flush(): void
+    flush(config?: { excecutionType: 'scheduled' | 'immediate' }): void
+    deferSubscriberNotifications<K>(action: () => K | Promise<K>): Promise<K>
 }
 
 export interface PrivateThrottledStore<T = any> extends ThrottledStore<T> {
@@ -160,6 +161,8 @@ export const createThrottledStore = (
 ): PrivateThrottledStore => {
     let pendingBroadcastNotification = false
     let pendingObservableNotifications: Set<AnyPrivateObservableState> | undefined
+    let deferNotifications = false
+    let pendingFlush = false
 
     const onBroadcastNotify = () => {
         pendingBroadcastNotification = true
@@ -221,15 +224,26 @@ export const createThrottledStore = (
         }
     }
 
-    const notifyAllOnAnimationFrame = animationFrameRenderer(requestAnimationFrame, cancelAnimationFrame, notifyAll)
+    const scheduledNotifyAll = () => {
+        if (deferNotifications) {
+            return
+        }
+        notifyAll()
+    }
+
+    const notifyAllOnAnimationFrame = animationFrameRenderer(requestAnimationFrame, cancelAnimationFrame, scheduledNotifyAll)
 
     let cancelRender = _.noop
 
     store.subscribe(() => {
         cancelRender = notifyAllOnAnimationFrame()
     })
 
-    const flush = () => {
+    const flush = (config?: { excecutionType: 'scheduled' | 'immediate' }) => {
+        if (deferNotifications && config?.excecutionType !== 'immediate') {
+            pendingFlush = true
+            return
+        }
         cancelRender()
         notifyAll()
     }
@@ -238,7 +252,10 @@ export const createThrottledStore = (
         return store.dispatch(action)
     }
 
-    const toShellAction = <T extends Action>(shell: Shell, action: T): T => ({ ...action, __shellName: shell.name })
+    const toShellAction = <T extends Action>(shell: Shell, action: T): T => ({
+        ...action,
+        __shellName: shell.name
+    })
 
     const result: PrivateThrottledStore = {
         ...store,
@@ -250,7 +267,25 @@ export const createThrottledStore = (
         broadcastNotify: onBroadcastNotify,
         observableNotify: onObservableNotify,
         resetPendingNotifications: resetAllPendingNotifications,
-        hasPendingSubscribers: () => pendingBroadcastNotification
+        hasPendingSubscribers: () => pendingBroadcastNotification,
+        deferSubscriberNotifications: async action => {
+            if (deferNotifications) {
+                return action()
+            }
+            try {
+                deferNotifications = true
+                const functionResult = await action()
+                return functionResult
+            } finally {
+                deferNotifications = false
+                if (pendingFlush) {
+                    pendingFlush = false
+                    flush()
+                } else {
+                    notifyAll()
+                }
+            }
+        }
     }
 
     resetAllPendingNotifications()

test/connectWithShell.spec.tsx

@@ -589,6 +589,7 @@ describe('connectWithShell-useCases', () => {
     beforeEach(() => {
         renderSpy.mockClear()
         mapStateToPropsSpy.mockClear()
+        mountSpy.mockClear()
     })
 
     it('should include observable state in store', () => {
@@ -636,6 +637,116 @@ describe('connectWithShell-useCases', () => {
         expect(hasPendingSubscribers()).toBe(false)
     })
 
+    it('should not notify subscribers when deferring notifications', async () => {
+        const { host, shell, renderInShellContext } = createMocks(entryPointWithState, [entryPointSecondStateWithAPI])
+        const ConnectedComp = connectWithShell(mapStateToProps, undefined, shell, { allowOutOfEntryPoint: true })(PureComp)
+
+        const { testKit } = renderInShellContext(<ConnectedComp />)
+        if (!testKit) {
+            throw new Error('Connected component failed to render')
+        }
+
+        expect(testKit.root.findByProps({ className: 'ONE' }).children[0]).toBe('init1')
+        expect(mapStateToPropsSpy).toHaveBeenCalledTimes(1)
+        expect(renderSpy).toHaveBeenCalledTimes(1)
+
+        let valueOneWhileDeferring
+
+        await act(async () => {
+            await host.getStore().deferSubscriberNotifications(() => {
+                dispatchAndFlush({ type: 'SET_FIRST_STATE', value: 'update1' }, host)
+                valueOneWhileDeferring = testKit.root.findByProps({ className: 'ONE' }).children[0]
+            })
+        })
+
+        expect(valueOneWhileDeferring).toBe('init1')
+        expect(testKit.root.findByProps({ className: 'ONE' }).children[0]).toBe('update1')
+        expect(mapStateToPropsSpy).toHaveBeenCalledTimes(2)
+        expect(renderSpy).toHaveBeenCalledTimes(2)
+    })
+
+    it('should notify after action failed while deferring notifications', async () => {
+        const { host, shell, renderInShellContext } = createMocks(entryPointWithState, [entryPointSecondStateWithAPI])
+        const ConnectedComp = connectWithShell(mapStateToProps, undefined, shell, { allowOutOfEntryPoint: true })(PureComp)
+
+        const { testKit } = renderInShellContext(<ConnectedComp />)
+        if (!testKit) {
+            throw new Error('Connected component failed to render')
+        }
+
+        expect(testKit.root.findByProps({ className: 'ONE' }).children[0]).toBe('init1')
+        expect(mapStateToPropsSpy).toHaveBeenCalledTimes(1)
+        expect(renderSpy).toHaveBeenCalledTimes(1)
+
+        try {
+            await act(async () => {
+                await host.getStore().deferSubscriberNotifications(() => {
+                    dispatchAndFlush({ type: 'SET_FIRST_STATE', value: 'update1' }, host)
+                    throw new Error('test error')
+                })
+            })
+        } catch (e) {}
+
+        expect(testKit.root.findByProps({ className: 'ONE' }).children[0]).toBe('update1')
+        expect(mapStateToPropsSpy).toHaveBeenCalledTimes(2)
+        expect(renderSpy).toHaveBeenCalledTimes(2)
+    })
+
+    it('should flush while deferring notifications if immediate flush was called during that action', async () => {
+        const { host, shell, renderInShellContext } = createMocks(entryPointWithState, [entryPointSecondStateWithAPI])
+        const ConnectedComp = connectWithShell(mapStateToProps, undefined, shell, { allowOutOfEntryPoint: true })(PureComp)
+
+        const { testKit } = renderInShellContext(<ConnectedComp />)
+        if (!testKit) {
+            throw new Error('Connected component failed to render')
+        }
+
+        let valueOneWhileDeferring
+
+        await host.getStore().deferSubscriberNotifications(() => {
+            act(() => {
+                host.getStore().dispatch({ type: 'SET_FIRST_STATE', value: 'update1' })
+                host.getStore().flush({ excecutionType: 'immediate' })
+            })
+            valueOneWhileDeferring = testKit.root.findByProps({ className: 'ONE' }).children[0]
+        })
+
+        expect(valueOneWhileDeferring).toEqual('update1')
+    })
+
+    it('should support nested defered notification actions', async () => {
+        const { host, shell, renderInShellContext } = createMocks(entryPointWithState, [entryPointSecondStateWithAPI])
+        const ConnectedComp = connectWithShell(mapStateToProps, undefined, shell, { allowOutOfEntryPoint: true })(PureComp)
+
+        const { testKit } = renderInShellContext(<ConnectedComp />)
+        if (!testKit) {
+            throw new Error('Connected component failed to render')
+        }
+
+        expect(testKit.root.findByProps({ className: 'ONE' }).children[0]).toBe('init1')
+        expect(mapStateToPropsSpy).toHaveBeenCalledTimes(1)
+        expect(renderSpy).toHaveBeenCalledTimes(1)
+        let valueOneInOuterDeferNotifications
+        let valueOneInInnerDeferNotifications
+
+        await act(async () => {
+            await host.getStore().deferSubscriberNotifications(async () => {
+                dispatchAndFlush({ type: 'SET_FIRST_STATE', value: 'update from outer' }, host)
+                await host.getStore().deferSubscriberNotifications(() => {
+                    dispatchAndFlush({ type: 'SET_FIRST_STATE', value: 'update from inner' }, host)
+                    valueOneInInnerDeferNotifications = testKit.root.findByProps({ className: 'ONE' }).children[0]
+                })
+                valueOneInOuterDeferNotifications = testKit.root.findByProps({ className: 'ONE' }).children[0]
+            })
+        })
+
+        expect(valueOneInInnerDeferNotifications).toBe('init1')
+        expect(valueOneInOuterDeferNotifications).toBe('init1')
+        expect(testKit.root.findByProps({ className: 'ONE' }).children[0]).toBe('update from inner')
+        expect(mapStateToPropsSpy).toHaveBeenCalledTimes(2)
+        expect(renderSpy).toHaveBeenCalledTimes(2)
+    })
+
     it('should not mount connected component on props update', () => {
         const { host, shell, renderInShellContext } = createMocks(entryPointWithState, [entryPointSecondStateWithAPI])
         const ConnectedComp = connectWithShell(mapStateToProps, undefined, shell, { allowOutOfEntryPoint: true })(PureComp)