@@ -21,7 +21,7 @@ Reduxには[Three Principles](http://redux.js.org/docs/introduction/ThreePrincip
21
21
- [ Read Me | Redux] ( http://redux.js.org/ )
22
22
- [ Getting Started with Redux - Course by @dan_abramov@eggheadio ] ( https://egghead.io/series/getting-started-with-redux )
23
23
24
- Reduxの使い方についてはここでは解説しませんが、Reduxの拡張である _ Middleware_ も、この三原則に基づいた仕組みとなっています。
24
+ Reduxの使い方についてはここでは解説しませんが、Reduxの拡張機能となる _ Middleware_ も、この三原則に基づいた仕組みとなっています。
25
25
26
26
_ Middleware_ という名前からも分かるように、[ connect] ( ../connect/README.md ) の仕組みと類似点があります。
27
27
[ connect] ( ../connect/README.md ) の違いを意識しながら、Reduxの_ Middleware_ の仕組みを見ていきましょう。
@@ -50,7 +50,82 @@ Reduxの例として次のようなコードを見てみます。
50
50
51
51
` dispatch(action) ` -> (_ Middleware_ の処理) -> reducerにより新しいStateの作成 -> (Stateが変わったら) ->` subscribe ` で登録したコールバックを呼ぶ
52
52
53
- 次は` applyMiddleware ` がどのように_ Middleware_ を登録しているのかを見ていきましょう。
53
+ 次は_ Middleware_ はどういう拡張を行えるのかを見ていきます。
54
+
55
+ ##Middleware
56
+
57
+ Reduxでは第三者が拡張できる仕組みを_ Middleware_ と呼んでいます。
58
+
59
+ - [ Middleware | Redux] ( http://redux.js.org/docs/advanced/Middleware.html " Middleware | Redux ")
60
+
61
+ どのような拡張を_ Middleware_ で書けるのか、実際の例を見てみます。
62
+ 次の_ Middleware_ はStoreがdispatchしたActionと、その前後でStateにどういう変更があったのかを出力するロガーです。
63
+
64
+ [ import, logger.js] ( ../../src/Redux/logger.js )
65
+
66
+ この_ Middleware_ は次のようにReduxに対して適用できます。
67
+
68
+ ``` js
69
+ import {createStore ,applyMiddleware }from " redux" ;
70
+ const createStoreWithMiddleware = applyMiddleware (createLogger ())(createStore);
71
+ ```
72
+
73
+ この時、見た目上は` store ` に対して_ Middleware_ が適用されているように見えますが、
74
+ 実際には` store.dispatch ` に対して適用され、拡張された` dispatch ` メソッドが作成されています。
75
+
76
+ これにより、以下のように` dispatch ` を実行する際に_ Middleware_ の処理が実行されてから、
77
+ 実際に` dispatch ` されるというのがReduxの_ Middleware_ による拡張のポイントになっています。
78
+
79
+ ``` js
80
+ store .dispatch ({
81
+ type: " AddTodo" ,
82
+ title: " Todo title"
83
+ });
84
+ ```
85
+
86
+ さきほどの` logger.js ` を見てみます。
87
+
88
+ ``` js
89
+ export default function createLogger (options = defaultOptions ) {
90
+ const logger = options .logger || defaultOptions .logger ;
91
+ return store => next => action => {
92
+ logger .log (action);
93
+ const value = next (action);
94
+ logger .log (store .getState ());
95
+ return value;
96
+ };
97
+ }
98
+ ```
99
+
100
+ ` createLogger ` は、loggerにオプションを渡すためのものなので置いておき、
101
+ ` return ` している高階関数の連なりが_ Middleware_ の本体となります。
102
+
103
+ ``` js
104
+ const middleware = store => next => action => {}
105
+ ```
106
+
107
+ 上記のArrowFunctionの連なりが一見すると何をしているのかが分かりにくいですが、
108
+ これは下記のように展開することができます。
109
+
110
+ ``` js
111
+ const middleware = (store )=> {
112
+ return (next )=> {
113
+ return (action )=> {
114
+ // Middlewareの処理
115
+ }
116
+ }
117
+ }
118
+ ```
119
+
120
+ ただ単に関数を返す関数(高階関数)を作っているだけだと分かります。
121
+
122
+ これを踏まえて logger.js をもう一度見てみると、` next(action) ` の前後にログ表示を挟んでいることが分かります。
123
+
124
+ [ import, logger.js] ( ../../src/Redux/logger.js )
125
+
126
+ この場合の` next ` は` dispatch ` と言い換えても問題ありませんが、複数の_ Middleware_ を適応した場合は、
127
+ ** 次の** _ Middleware_ を呼び出すという事を表現しています。
128
+
54
129
55
130
##どういう仕組み?
56
131