中间件的洋葱模型

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

    下面是该请求的示意图：

    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(action) {
    21.       next(action)
    22.       console.log('D middleware2 结束');
    23.     };
    24.   };
    25. }
    27. function middleware3(store) {
    28.   return function(next) {
    29.     return function(action) {
    30.       console.log('E middleware3 开始');
    31.       next(action)
    32.       console.log('F middleware3 结束');
    33.     };
    34.   };
    35. }
    37. function reducer(state, action) {
    38.   if (action.type === 'MIDDLEWARE_TEST') {
    39.     console.log('======= G =======');  
    40.   }
    41.   return {};
    42. }
    44. var store = Redux.createStore(
    45.   reducer,
    46.   Redux.applyMiddleware(
    47.     middleware2,
    49.   )
    50. );
    52. store.dispatch({ type: 'MIDDLEWARE_TEST' });
    53. </script>
    54. </body>
    55. </html>

    下面是该请求的示意图：

    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.       更新 state 完毕      收尾工作