feat: allow intercept mutiple actions

imtaotao · Nov 25, 2019 · 2abd321 · 2abd321
1 parent 153f248
commit 2abd321
Show file tree

Hide file tree

Showing 11 changed files with 117 additions and 23 deletions.
diff --git a/demo/store/mpstore.esm.js b/demo/store/mpstore.esm.js
@@ -666,7 +666,14 @@ function () {
 var COMMONACTION = function COMMONACTION() {};
 
 function match(layer, action) {
-  if (layer.action === COMMONACTION) return true;
+  if (layer.action === COMMONACTION) {
+    return true;
+  }
+
+  if (Array.isArray(layer.action)) {
+    return layer.action.indexOf(action) > -1;
+  }
+
   return action === layer.action;
 }
 
@@ -805,7 +812,7 @@ function () {
     this.depComponents = [];
     this.GLOBALWORD = 'global';
     this.isDispatching = false;
-    this.version = '0.1.5';
+    this.version = '0.1.6';
     this.state = Object.freeze(createModule({}));
     this.middleware = new Middleware(this);
   }
@@ -1069,7 +1076,7 @@ function () {
   return Store;
 }();
 
-var version = '0.1.5';
+var version = '0.1.6';
 var nativePage = Page;
 var nativeComponent = Component;
 

diff --git a/dist/mpstore.common.js b/dist/mpstore.common.js
@@ -670,7 +670,14 @@ function () {
 var COMMONACTION = function COMMONACTION() {};
 
 function match(layer, action) {
-  if (layer.action === COMMONACTION) return true;
+  if (layer.action === COMMONACTION) {
+    return true;
+  }
+
+  if (Array.isArray(layer.action)) {
+    return layer.action.indexOf(action) > -1;
+  }
+
   return action === layer.action;
 }
 
@@ -809,7 +816,7 @@ function () {
     this.depComponents = [];
     this.GLOBALWORD = 'global';
     this.isDispatching = false;
-    this.version = '0.1.5';
+    this.version = '0.1.6';
     this.state = Object.freeze(createModule({}));
     this.middleware = new Middleware(this);
   }
@@ -1073,7 +1080,7 @@ function () {
   return Store;
 }();
 
-var version = '0.1.5';
+var version = '0.1.6';
 var nativePage = Page;
 var nativeComponent = Component;
 

diff --git a/dist/mpstore.es6m.js b/dist/mpstore.es6m.js
@@ -502,7 +502,12 @@ class TimeTravel {
 
 const COMMONACTION = () => {};
 function match (layer, action) {
-  if (layer.action === COMMONACTION) return true
+  if (layer.action === COMMONACTION) {
+    return true
+  }
+  if (Array.isArray(layer.action)) {
+    return layer.action.indexOf(action) > -1
+  }
   return action === layer.action
 }
 function handleLayer (
@@ -640,7 +645,7 @@ class Store {
     this.depComponents = [];
     this.GLOBALWORD = 'global';
     this.isDispatching = false;
-    this.version = '0.1.5';
+    this.version = '0.1.6';
     this.state = Object.freeze(createModule({}));
     this.middleware = new Middleware(this);
   }
@@ -881,7 +886,7 @@ class Store {
   }
 }
 
-const version = '0.1.5';
+const version = '0.1.6';
 const nativePage = Page;
 const nativeComponent = Component;
 function expandConfig (config, expandMethods, isPage) {

diff --git a/dist/mpstore.esm.js b/dist/mpstore.esm.js
@@ -666,7 +666,14 @@ function () {
 var COMMONACTION = function COMMONACTION() {};
 
 function match(layer, action) {
-  if (layer.action === COMMONACTION) return true;
+  if (layer.action === COMMONACTION) {
+    return true;
+  }
+
+  if (Array.isArray(layer.action)) {
+    return layer.action.indexOf(action) > -1;
+  }
+
   return action === layer.action;
 }
 
@@ -805,7 +812,7 @@ function () {
     this.depComponents = [];
     this.GLOBALWORD = 'global';
     this.isDispatching = false;
-    this.version = '0.1.5';
+    this.version = '0.1.6';
     this.state = Object.freeze(createModule({}));
     this.middleware = new Middleware(this);
   }
@@ -1069,7 +1076,7 @@ function () {
   return Store;
 }();
 
-var version = '0.1.5';
+var version = '0.1.6';
 var nativePage = Page;
 var nativeComponent = Component;
 

diff --git a/dist/mpstore.min.js b/dist/mpstore.min.js
diff --git a/docs/store.md b/docs/store.md
@@ -102,8 +102,8 @@ store 默认会在组件的 data 中添加 `global` 来接受用到的全局状
   })
 ``` 
 
-#### use(action: string | symbol | Function, layer?: Function) : Function
-`use` 方法用来添加中间件，中间件的详细文档在[这里](./middleware.md)可以看到。如果只传了一个参数，则默认拦截所有的 `action`，use 方法会返回一个 remove 函数，用来注销掉当前添加的中间件
+#### use(action: string | symbol | array | Function, layer?: Function) : Function
+`use` 方法用来添加中间件，中间件的详细文档在[这里](./middleware.md)可以看到。如果只传了一个参数，则默认拦截所有的 `action`，也可以传一个数组，选择性的拦截你想要的 action。use 方法会返回一个 remove 函数，用来注销掉当前添加的中间件
 ```js
   // 将会拦截 `changed` 这个 action
   // 中间件的添加顺序为执行顺序，所以你必须调用 next，否则，后面添加的中间件将不会执行
@@ -112,6 +112,13 @@ store 默认会在组件的 data 中添加 `global` 来接受用到的全局状
     next(payload)
   })
 ```
+如果是一个数组，则会选择性的拦截
+```js
+const remove = store.use(['one', 'two'], (payload, next, action) => {
+  payload++
+  next(payload)
+})
+```
 
 下面这种语法将会拦截所有的 `action`
 ```js

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rustle/mp-store",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A lightweight wechat miniprogram state management library",
   "main": "dist/mpstore.common.js",
   "module": "dist/mpstore.esm.js",

diff --git a/src/middleware.js b/src/middleware.js
@@ -2,8 +2,18 @@ import { warning, assert } from './utils'
 
 export const COMMONACTION = () => {}
 
+/**
+ * use((payload, next) => {})
+ * use(action, (payload, next) => {})
+ * use([action, action], (payload, next) => {})
+ */
 function match (layer, action) {
-  if (layer.action === COMMONACTION) return true
+  if (layer.action === COMMONACTION) {
+    return true
+  }
+  if (Array.isArray(layer.action)) {
+    return layer.action.indexOf(action) > -1
+  }
   return action === layer.action
 }
 

diff --git a/src/module.js b/src/module.js
@@ -1,7 +1,4 @@
-import {
-  assert,
-  isPlainObject,
-} from './utils'
+import { assert, isPlainObject } from './utils'
 
 // a. modules allow nesting
 // b. can't delete module, if module is created
@@ -90,9 +87,9 @@ export function mergeModule (module, partialModule, moduleName, createMsg) {
 // a. if want to define a module, the parent and child modules must be modules.
 // demo:
 //   store.add('action', {
-//     __mpModule: true,
+//     Symbol(module): true,
 //      childModule: {
-//       __mpModule: true,
+//       Symbol(module): true,
 //     }
 //   })
 // 

diff --git a/test/README.md b/test/README.md
@@ -85,6 +85,7 @@
 + [x] 中间件函数接受三个个参数，第一个为上一个中间件传递的 `payload`，第二个为 `next（function）`，第三个为当前的 `action`
 + [x] 中间件如果没有调用 `next` 将不会更新
 + [x] 中间件调用的顺序与添加的顺序保持一致
++ [x] 拦截的 action 可以为一个数组，用来拦截多个 action
 
 ### time travel
 + [x] 检测 `go` 方法

diff --git a/test/script/middleware.spec.js b/test/script/middleware.spec.js
@@ -307,4 +307,57 @@ describe('Middleware', () => {
     threeTime = Date.now()
     store.dispatch('testActionThree', 30)
   })
+
+  it('if actions is an array', () => {
+    let i = 0
+    const actionOne = 'one'
+    const actionTwo = 'two'
+    const actionThree = Symbol()
+    const reset = () => {
+      i = 0
+      store = createStore()
+      store.add(actionOne, { partialState: {} })
+      store.add(actionTwo, { partialState: {} })
+      store.add(actionThree, { partialState: {} })
+      store.use(actionOne, (payload, next) => {
+        i++
+        expect(i).toBe(1)
+        next(i)
+      })
+      store.use(actionTwo, (payload, next) => {
+        i++
+        expect(i).toBe(1)
+        next(i)
+      })
+      store.use(actionThree, (payload, next) => {
+        i++
+        expect(i).toBe(1)
+        next(i)
+      })
+      store.use([actionOne, actionThree], (payload, next) => {
+        i++
+        expect(i).toBe(2)
+        next(i)
+      })
+      store.use((payload, next) => {
+        i++
+      })
+    }
+    reset()
+    store.dispatch(actionOne)
+    expect(i).toBe(3)
+    reset()
+    store.dispatch(actionTwo)
+    expect(i).toBe(2)
+    reset()
+    store.dispatch(actionThree)
+    expect(i).toBe(3)
+    store = createStore()
+    expect(store.middleware.stack.length).toBe(0)
+    store.use(actionOne, () => {})
+    const remove = store.use([actionOne, actionTwo], () => {})
+    expect(store.middleware.stack.length).toBe(2)
+    remove()
+    expect(store.middleware.stack.length).toBe(1)
+  })
 })