fix(reactant-module): add destroy api for state subscriptions

Author: unadlib

.vscode/settings.json

@@ -7,6 +7,7 @@
     "cSpell.words": [
       "inversify",
       "middlewares",
-      "persistor"
+      "persistor",
+      "unsubscriptions"
     ]
 }

packages/reactant-module/src/constants/reduxKeys.ts

@@ -1,6 +1,7 @@
 export const storeKey: unique symbol = Symbol('store');
 export const loaderKey: unique symbol = Symbol('loader');
 export const subscriptionsKey: unique symbol = Symbol('subscriptions');
+export const unsubscriptionsKey: unique symbol = Symbol('unsubscriptions');
 export const stateKey: unique symbol = Symbol('state');
 export const defaultStateKey: unique symbol = Symbol('defaultState');
 export const enablePatchesKey: unique symbol = Symbol('enablePatches');

packages/reactant-module/src/core/subscribe.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
 import { Unsubscribe } from 'redux';
 import { Subscribe } from '../interfaces';
-import { storeKey, subscriptionsKey } from '../constants';
+import { storeKey, subscriptionsKey, unsubscriptionsKey } from '../constants';
 
 /**
  * ## Description
@@ -57,17 +57,30 @@ const subscribe: Subscribe = (service, listener, options) => {
     unsubscribe = service[storeKey]?.subscribe(callback)!;
   } else {
     // When constructing
-    const subscriptions = service[subscriptionsKey] || [];
+    const subscriptions = service[subscriptionsKey] ?? [];
     let _unsubscribe: Unsubscribe;
     subscriptions.push(() => {
       _unsubscribe = service[storeKey]?.subscribe(callback)!;
     });
-    unsubscribe = () => _unsubscribe();
+    unsubscribe = () => {
+      return _unsubscribe();
+    };
     Object.assign(service, {
       [subscriptionsKey]: subscriptions,
     });
   }
-  return unsubscribe!;
+  const unsubscriptions = service[unsubscriptionsKey] ?? new Set();
+  const fn = () => {
+    unsubscribe();
+    unsubscriptions.delete(fn);
+  };
+  unsubscriptions.add(fn);
+  if (!service[unsubscriptionsKey]) {
+    Object.assign(service, {
+      [unsubscriptionsKey]: unsubscriptions,
+    });
+  }
+  return fn;
 };
 
 export { subscribe };

packages/reactant-module/src/interfaces.ts

@@ -29,6 +29,7 @@ import {
   nameKey,
   modulesKey,
   initStateKey,
+  unsubscriptionsKey,
 } from './constants';
 import { PluginModule } from './core';
 
@@ -71,6 +72,7 @@ export interface Service<T extends Record<string, any> = Record<string, any>> {
   readonly [loaderKey]?: Loader;
   readonly [enablePatchesKey]?: boolean;
   readonly [subscriptionsKey]?: Subscriptions;
+  readonly [unsubscriptionsKey]?: Set<Unsubscribe>;
   readonly [containerKey]?: Container;
   readonly [modulesKey]?: Record<string, any>;
   readonly [initStateKey]?: Record<string, any>;

packages/reactant-ssr/src/createServerApp.tsx

@@ -12,7 +12,7 @@ import type { ServerConfig, ServerApp } from './interfaces';
 export const createServerApp = <T, S extends any[], R extends Renderer<S>>(
   options: ServerConfig<T, S, R>
 ): ServerApp<T, S, R> => {
-  const { bootstrap, store, instance, container, modules } = createBaseApp({
+  const { bootstrap, ...rest } = createBaseApp({
     ...options,
     main: options.main ?? (AppView as Config<T, S, R>['main']),
     render: (element) => element,
@@ -25,10 +25,7 @@ export const createServerApp = <T, S extends any[], R extends Renderer<S>>(
     )) as JSX.Element;
   };
   return {
-    store,
-    instance,
-    container,
-    modules,
     bootstrap: AppComponent,
+    ...rest,
   };
 };

packages/reactant/src/createApp.tsx

@@ -13,6 +13,7 @@ import {
   Container,
   modulesKey,
   Service,
+  unsubscriptionsKey,
 } from 'reactant-module';
 import { Config, App, Renderer } from './interfaces';
 
@@ -128,6 +129,7 @@ function createApp<T, S extends any[], R extends Renderer<S>>({
   const instance = container.get<T>(
     typeof main === 'object' ? main.provide : main
   );
+
   return {
     /**
      * App's main module instance.
@@ -145,6 +147,21 @@ function createApp<T, S extends any[], R extends Renderer<S>>({
      * all modules collection
      */
     modules: ((instance as any) as Service)[modulesKey]!,
+    /**
+     * destroy all subscriptions
+     */
+    destroy: () => {
+      const modulesMap = ((instance as any) as Service)[modulesKey]!;
+      Object.keys(modulesMap).forEach((key) => {
+        const module = modulesMap[key] as Service | null | undefined;
+        const unsubscriptions = module?.[unsubscriptionsKey];
+        if (unsubscriptions) {
+          for (const unsubscribe of unsubscriptions) {
+            unsubscribe();
+          }
+        }
+      });
+    },
     /**
      * Bootstrap app with a renderer.
      */

packages/reactant/src/interfaces.ts

@@ -44,6 +44,7 @@ export interface App<T, S extends any[], R extends Renderer<S>> {
   container: Container;
   store: ReactantStore | null;
   modules: Record<string, any>;
+  destroy: () => void;
   bootstrap(...args: S): ReturnType<R> | Promise<R>;
 }
 

packages/reactant/test/integration/index.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-shadow */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/ban-ts-ignore */
@@ -26,6 +27,8 @@ import {
   optional,
   inject,
   autobind,
+  subscribe,
+  watch,
 } from '../..';
 
 let container: Element;
@@ -168,6 +171,9 @@ describe('base API', () => {
     const sum1ComputedFn = jest.fn();
     const getPropsFn = jest.fn();
 
+    const subscribeFn = jest.fn();
+    const watchFn = jest.fn();
+
     interface HomeView1Props {
       version?: string;
       text?: string;
@@ -236,6 +242,12 @@ describe('base API', () => {
       name: 'homeView',
     })
     class HomeView extends HomeView1 {
+      constructor() {
+        super();
+        subscribe(this, subscribeFn);
+        watch(this, () => this.state.list[0].count, watchFn);
+      }
+
       @action
       increase(num: number) {
         super.increase(num);
@@ -393,6 +405,32 @@ describe('base API', () => {
     container = document.createElement('div');
     document.body.appendChild(container);
 
+    const subscribeFn1 = jest.fn();
+    const watchFn1 = jest.fn();
+
+    subscribe(app.instance.homeView, subscribeFn1);
+    watch(
+      app.instance.homeView,
+      () => app.instance.homeView.state.list[0].count,
+      watchFn1
+    );
+
+    expect(subscribeFn).toBeCalledTimes(4);
+    expect(watchFn).toBeCalledTimes(3);
+    expect(subscribeFn1).toBeCalledTimes(0);
+    expect(watchFn1).toBeCalledTimes(0);
+    app.instance.homeView.increase(1);
+    expect(subscribeFn).toBeCalledTimes(5);
+    expect(watchFn).toBeCalledTimes(4);
+    expect(subscribeFn1).toBeCalledTimes(1);
+    expect(watchFn1).toBeCalledTimes(1);
+    app.destroy();
+    app.instance.homeView.increase(1);
+    expect(subscribeFn).toBeCalledTimes(5);
+    expect(watchFn).toBeCalledTimes(4);
+    expect(subscribeFn1).toBeCalledTimes(1);
+    expect(watchFn1).toBeCalledTimes(1);
+
     const app1 = createApp({
       main: HomeView,
       render,