🐛 修复 BatchUpdates 更新不及时的问题

Author: dupfei

dist/redux-miniprogram-bindings.js

@@ -325,10 +325,14 @@ class BatchUpdates {
 }
 var batchUpdates = new BatchUpdates();
 
+let subscriptionCount = 0;
+let emitSubscriptionCount = 0;
 function subscription(thisArg, mapState, updateDeps) {
+    subscriptionCount += 1;
     const { store } = getProvider();
     let prevState = store.getState();
     const listener = () => {
+        emitSubscriptionCount += 1;
         const currState = store.getState();
         let ownStateChanges = null;
         if (isArray(mapState)) {
@@ -355,8 +359,16 @@ function subscription(thisArg, mapState, updateDeps) {
             batchUpdates.push(thisArg, ownStateChanges);
         }
         prevState = currState;
+        if (emitSubscriptionCount === subscriptionCount) {
+            emitSubscriptionCount = 0;
+            batchUpdates.exec();
+        }
+    };
+    const unsubscribe = store.subscribe(listener);
+    return () => {
+        subscriptionCount -= 1;
+        unsubscribe();
     };
-    return store.subscribe(listener);
 }
 
 function connect({ type = 'page', mapState, mapDispatch, manual, } = {}) {

dist/redux-miniprogram-bindings.min.js

@@ -325,10 +325,14 @@ class BatchUpdates {
 }
 var batchUpdates = new BatchUpdates();
 
+let subscriptionCount = 0;
+let emitSubscriptionCount = 0;
 function subscription(thisArg, mapState, updateDeps) {
+    subscriptionCount += 1;
     const { store } = getProvider();
     let prevState = store.getState();
     const listener = () => {
+        emitSubscriptionCount += 1;
         const currState = store.getState();
         let ownStateChanges = null;
         if (isArray(mapState)) {
@@ -355,8 +359,16 @@ function subscription(thisArg, mapState, updateDeps) {
             batchUpdates.push(thisArg, ownStateChanges);
         }
         prevState = currState;
+        if (emitSubscriptionCount === subscriptionCount) {
+            emitSubscriptionCount = 0;
+            batchUpdates.exec();
+        }
+    };
+    const unsubscribe = store.subscribe(listener);
+    return () => {
+        subscriptionCount -= 1;
+        unsubscribe();
     };
-    return store.subscribe(listener);
 }
 
 function connect({ type = 'page', mapState, mapDispatch, manual, } = {}) {

example/lib/redux-miniprogram-bindings.js

@@ -1,6 +1,6 @@
 {
   "name": "redux-miniprogram-bindings",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Redux binding utils for miniprogram",
   "main": "./dist/redux-miniprogram-bindings.js",
   "types": "./types/index.d.ts",

package.json

@@ -3,15 +3,21 @@ import getProvider from '../provider'
 import batchUpdates from './batchUpdates'
 import { isArray } from '../utils'
 
+// 记录订阅和响应订阅的数量
+let subscriptionCount = 0
+let emitSubscriptionCount = 0
+
 export default function subscription(
   thisArg: PageComponentOption,
   mapState: MapState,
   updateDeps: string[]
 ) {
+  subscriptionCount += 1
   const { store } = getProvider()
 
   let prevState = store.getState()
   const listener = () => {
+    emitSubscriptionCount += 1
     const currState = store.getState()
     let ownStateChanges: IAnyObject | null = null
 
@@ -43,7 +49,18 @@ export default function subscription(
     }
 
     prevState = currState
+
+    if (emitSubscriptionCount === subscriptionCount) {
+      // 订阅已全部响应，此时可以执行更新
+      emitSubscriptionCount = 0
+      batchUpdates.exec()
+    }
   }
 
-  return store.subscribe(listener)
+  const unsubscribe = store.subscribe(listener)
+
+  return () => {
+    subscriptionCount -= 1
+    unsubscribe()
+  }
 }

src/extend/subscription.ts

@@ -3,4 +3,4 @@ export default function subscription(
   thisArg: PageComponentOption,
   mapState: MapState,
   updateDeps: string[]
-): import('redux').Unsubscribe
+): () => void