中间件的洋葱模型

原文（保持更新）：https://github.com/kenberkeley/redux-simple-tutorial/blob/master/middleware-onion-model.md

本文是 Redux 进阶教程 的拓展阅读

§ Express 的中间件

  1. /** app.js **/
  2. var express = require('express')
  3. var app = express()
  5. app.use(function middleware1(req, res, next) {
  6.   console.log('A middleware1 开始')
  7.   next()
  8.   console.log('B middleware1 结束')
  9. })
  11. app.use(function middleware2(req, res, next) {
  12.   console.log('C middleware2 开始')
  13.   next()
  14.   console.log('D middleware2 结束')
  15. })
  17. app.use(function middleware3(req, res, next) {
  18.   console.log('E middleware3 开始')
  19.   next()
  20.   console.log('F middleware3 结束')
  21. })
  23. app.get('/', function handler(req, res) {
  24.   res.send('ok')
  25.   console.log('======= G =======')
  26. })
  28. if (module.parent) {
  29.   module.exports = app
  30. } else {
  31.   app.listen(8080)
  32. }

敲下 node app.js 后，访问 localhost:8080，控制台会输出：

  1. A middleware1 开始
  2. C middleware2 开始
  3. E middleware3 开始
  4. ======= G =======
  5. F middleware3 结束
  6. D middleware2 结束
  7. B middleware1 结束

下面是该请求的示意图：

  1.             --------------------------------------
  2.             |            middleware1              |
  3.             |    ----------------------------     |
  4.             |    |       middleware2         |    |
  5.             |    |    -------------------    |    |
  6.             |    |    |  middleware3    |    |    |
  7.             |    |    |                 |    |    |
  8.           next next next  ———————————   |    |    |
  9. 请求 ——————————————————> |  handler  | — 收尾工作->|
  10. 响应 <—————————————————  |     G     |  |    |    |
  11.             | A  | C  | E ——————————— F |  D |  B |
  12.             |    |    |                 |    |    |
  13.             |    |    -------------------    |    |
  14.             |    ----------------------------     |
  15.             --------------------------------------
  18. 顺序 A -> C -> E -> G -> F -> D -> B
  19.     \---------------/   \----------/
  20.             ↓                ↓
  21.         请求响应完毕        收尾工作

§ Redux 的中间件（在线演示）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <script src="//cdn.bootcss.com/redux/3.5.2/redux.min.js"></script>
  5. </head>
  6. <body>
  7. <script>
  8. function middleware1(store) {
  9.   return function(next) {
  10.     return function(action) {
  11.       console.log('A middleware1 开始');
  12.       next(action)
  13.       console.log('B middleware1 结束');
  14.     };
  15.   };
  16. }
  18. function middleware2(store) {
  19.   return function(next) {
  20.     return function(action) {
  21.       console.log('C middleware2 开始');
  22.       next(action)
  23.       console.log('D middleware2 结束');
  24.     };
  25.   };
  26. }
  28. function middleware3(store) {
  29.   return function(next) {
  30.     return function(action) {
  31.       console.log('E middleware3 开始');
  32.       next(action)
  33.       console.log('F middleware3 结束');
  34.     };
  35.   };
  36. }
  38. function reducer(state, action) {
  39.   if (action.type === 'MIDDLEWARE_TEST') {
  40.     console.log('======= G =======');  
  41.   }
  42.   return {};
  43. }
  45. var store = Redux.createStore(
  46.   reducer,
  47.   Redux.applyMiddleware(
  48.     middleware1,
  49.     middleware2,
  50.     middleware3
  51.   )
  52. );
  54. store.dispatch({ type: 'MIDDLEWARE_TEST' });
  55. </script>
  56. </body>
  57. </html>

控制台输出：

  1. A middleware1 开始
  2. C middleware2 开始
  3. E middleware3 开始
  4. ======= G =======
  5. F middleware3 结束
  6. D middleware2 结束
  7. B middleware1 结束

下面是该请求的示意图：

  1.             --------------------------------------
  2.             |            middleware1              |
  3.             |    ----------------------------     |
  4.             |    |       middleware2         |    |
  5.             |    |    -------------------    |    |
  6.             |    |    |  middleware3    |    |    |
  7.             |    |    |                 |    |    |
  8.           next next next  ———————————   |    |    |
  9. dispatch  —————————————> |  reducer  | — 收尾工作->|
  10. nextState <————————————— |     G     |  |    |    |
  11.             | A  | C  | E ——————————— F |  D |  B |
  12.             |    |    |                 |    |    |
  13.             |    |    -------------------    |    |
  14.             |    ----------------------------     |
  15.             --------------------------------------
  18. 顺序 A -> C -> E -> G -> F -> D -> B
  19.     \---------------/   \----------/
  20.             ↓                ↓
  21.       更新 state 完毕      收尾工作

§ 总结

Redux 与 Express 的中间件执行流程一致：层层进入，层层冒出，就像从中间穿过洋葱般的体验

tip