ReduxのMiddlewareの実装について (#100)

* feat(redux): Dispatcherの実装と実行例を追加

* feat(redux): apply-middlewareのサンプルを追加

* chore(redux): redux と connect の違いについて

* style(redux): fix lint error

* fix(gitbook): fix to use gitbook 2

Author: azu

book.json

@@ -1,5 +1,5 @@
 {
-  "gitbook": ">=2.5.2",
+  "gitbook": "^2.5.2",
   "title": "JavaScript Plugin Architecture",
   "description": "JavaScriptライブラリやツールのプラグインの仕組み",
   "githubId": "azu/JavaScript-Plugin-Architecture",
@@ -30,4 +30,4 @@
       "token": "UA-2184335-16"
     }
   }
-}
+}

ja/Redux/README.md

@@ -16,7 +16,7 @@ Reduxには[Three Principles](http://redux.js.org/docs/introduction/ThreePrincip
     - StateはActionを経由しないと書き換えることができない
 - Changes are made with pure functions
     - Actionを受け取りStateを書き換えるReducerと呼ばれるpure functionを作る
-    
+
 この三原則についての詳細はドキュメントなどを参照してください。
 
 - [Read Me | Redux](http://redux.js.org/)
@@ -55,8 +55,10 @@ Reduxの例として次のようなコードを見てみます。
 dispatch(action) -> (_Middleware_ の処理) -> reducerにより新しいStateの作成 -> (Stateが変わったら) -> subscribeで登録したコールバックを呼ぶ
 ```
 
+- [ ] 図にしたほうがいい
+
 次は _Middleware_ によりどのような拡張ができるのかを見ていきます。
- 
+
 ## Middleware
 
 Reduxでは第三者が拡張できる仕組みを _Middleware_ と呼んでいます。
@@ -128,22 +130,72 @@ const middleware = (store) => {
 
 [import, logger.js](../../src/Redux/logger.js)
 
+- [ ] ログを挟んでいる図
+
 この場合の `next` は `dispatch` と言い換えても問題ありませんが、複数の _Middleware_ を適応した場合は、
 **次の** _Middleware_ を呼び出すという事を表現しています。
 
-Reduxの _Middleware_ の仕組みは単純ですが、見慣れないデザインであるために複雑であるように見えます。
+Reduxの _Middleware_ の仕組みは単純ですが、見慣れないデザインなので複雑に見えます。
 実際に同じ仕組みを実装しながら、Reduxの _Middleware_ について学んでいきましょう。
 
 ## どういう仕組み?
 
-- 高階関数をapplyしている
-- http://rackt.github.io/redux/docs/advanced/Middleware.html
-- その機構のコードへのリンク
-- その仕組みやプラグインについてドキュメントへのリンク
+_Middleware_ は`dispatch`をラップする処理ですが、そもそも`dispatch`とはどういう事をしているのでしょうか?
+
+簡潔に書くと、Reduxの`store.dispatch(action)`は`store.subscribe(callback)`で登録した`callback`に`actionを渡し呼び出すだけです。
+
+これよくみるPub/Subのパターンですが、今回はこのPub/Subパターンの実装からみていきましょう。
+
+### Dispatcher
+
+[ESLint](../ESLint/README.md)と同様でEventEmitterを使い、`dispatch`と`subscribe`を持つ`Dispatcher`を実装すると以下のようになります。
+
+[import, Dispatcher.js](../../src/Redux/Dispatcher.js)
+
+`Dispatcher`はActionオブジェクトを`dispatch`すると、`subscribe`で登録されていたコールバック関数を呼び出すという単純なものです。
+
+また、この`Dispatcher`の実装はReduxのものとは異なるので、あくまで理解のための参考実装です。
+
+> Unlike Flux, Redux does not have the concept of a Dispatcher
+> This is because it relies on pure functions instead of event emitters
+> -- [Prior Art | Redux](http://redux.js.org/docs/introduction/PriorArt.html "Prior Art | Redux")
+
+### applyMiddleware
+
+次に、 _Middleware_ を適応する処理となる `applyMiddleware`を実装していきます。
+先ほども書いたように、 _Middleware_ は `dispatch` を拡張する仕組みです。
+
+`applyMiddleware`は`dispatch`と _Middleware_ を受け取り、 _Middleware_ で拡張した `dispatch` を返す関数です。
+
+[import, apply-middleware.js](../../src/Redux/apply-middleware.js)
+
+この`applyMiddleware`はReduxのものと同じなので、
+次のように _Middleware_ を適応した `dispatch` 関数を作成できます。
+
+[import, apply-middleware-example.js](../../src/Redux/apply-middleware-example.js)
+
+`applyMiddleware`で`timestamp`をActionに付加する _Middleware_ を適用しています。
+これにより`dispatchWithMiddleware(action)`した`action`には自動的に`timestamp`プロパティが追加されています。
+
+```js
+const dispatchWithMiddleware = applyMiddleware(createLogger(), timestamp)(middlewareAPI);
+dispatchWithMiddleware({type: "FOO"});
+```
+
+ここで _Middleware_ には`middlewareAPI`として定義した2つのメソッドを持つオブジェクトが渡されています。
+しかし、`getState`は読み込みのみで、_Middleware_にはStateを直接書き換える手段が用意されていません。
+また、もう1つの`dispatch`もActionオブジェクトを書き換えられますが、結局できることは`dispatch`するだけです。
+
+この事から _Middleware_ にも三原則が適用されている事が分かります。
+
+- State is read-only
+    - StateはActionを経由しないと書き換えることができない
 
-## 実装してみよう
+_Middleware_ という仕組み自体は[Connect](../connect/README.md)と似ています。
+しかし、 _Middleware_ が直接的に結果(State)を直接書き換える事はできません。
 
-- [ ] DispatcherベースのMiddleware
+Connectの _Middleware_ は最終的な結果(`response`)を書き換えできます。
+一方、Reduxの _Middleware_ は扱える範囲が`dispatch`からReducerまでと線引されている違いと言えます。
 
 ## どういう事に向いてる?
 
@@ -165,4 +217,4 @@ Reduxの _Middleware_ の仕組みは単純ですが、見慣れないデザイ
 
 
 
-[Redux]: https://github.com/reactjs/redux  "reactjs/redux: Predictable state container for JavaScript apps"
+[Redux]: https://github.com/reactjs/redux  "reactjs/redux: Predictable state container for JavaScript apps"

src/Redux/Dispatcher-example.js

@@ -0,0 +1,14 @@
+"use strict";
+import Dispatcher from "./Dispatcher";
+const dispatcher = new Dispatcher();
+dispatcher.subscribe(action => {
+    console.log(action);
+    /*
+    {
+        type: "ActionType"
+    }
+    */
+});
+dispatcher.dispatch({
+    type: "ActionType"
+});

src/Redux/Dispatcher.js

@@ -1,36 +1,28 @@
-// LICENSE : MIT
 "use strict";
-const assert = require("assert");
 const EventEmitter = require("events");
 export const ON_DISPATCH = "__ON_DISPATCH__";
 /**
- * payload The payload object that must have `type` property.
- * @typedef {Object} DispatcherPayload
+ * The action object that must have `type` property.
+ * @typedef {Object} Action
  * @property {String} type The event type to dispatch.
  * @public
  */
 export default class Dispatcher extends EventEmitter {
     /**
-     * add onAction handler and return unbind function
-     * @param {function(DispatcherPayload)} payloadHandler
+     * subscribe `dispatch` and call handler. it return release function
+     * @param {function(Action)} actionHandler
      * @returns {Function} call the function and release handler
-     * @public
      */
-    onDispatch(payloadHandler) {
-        this.on(ON_DISPATCH, payloadHandler);
-        return this.removeListener.bind(this, ON_DISPATCH, payloadHandler);
+    subscribe(actionHandler) {
+        this.on(ON_DISPATCH, actionHandler);
+        return this.removeListener.bind(this, ON_DISPATCH, actionHandler);
     }
 
     /**
      * dispatch action object.
-     * StoreGroups receive this action and reduce state.
-     * @param {DispatcherPayload} payload
-     * @public
+     * @param {Action} action
      */
-    dispatch(payload) {
-        assert(payload !== undefined && payload !== null, "payload should not null or undefined");
-        assert(typeof payload.type === "string", "payload's type should be string");
-        this.emit(ON_DISPATCH, payload);
+    dispatch(action) {
+        this.emit(ON_DISPATCH, action);
     }
-
 }

src/Redux/apply-middleware-example.js

@@ -0,0 +1,26 @@
+"use strict";
+import Dispatcher from "./Dispatcher";
+import applyMiddleware from "./apply-middleware";
+import timestamp from "./timestamp";
+import createLogger from "./logger";
+const dispatcher = new Dispatcher();
+dispatcher.subscribe(action => {
+    console.log(action);
+    /*
+    { timeStamp: 1463742440479, type: 'FOO' }
+     */
+});
+// Redux compatible middleware API
+const state = {};
+const middlewareAPI = {
+    getState(){
+        // shallow-copy state
+        return Object.assign({}, state);
+    },
+    dispatch(action){
+        dispatcher.dispatch(action);
+    }
+};
+// create `dispatch` function that wrapped with middleware
+const dispatchWithMiddleware = applyMiddleware(createLogger(), timestamp)(middlewareAPI);
+dispatchWithMiddleware({type: "FOO"});

src/Redux/apply-middleware.js

@@ -1,11 +1,16 @@
-// LICENSE : MIT
 "use strict";
-// core -
-// next - next function
-// action - action object
+/*
+   => api - middleware api
+       => next - next/dispatch function
+          => action - action object
+
+ */
 const applyMiddlewares = (...middlewares) => {
     return middlewareAPI => {
-        const originalDispatch = middlewareAPI.dispatch.bind(middlewareAPI);
+        const originalDispatch = (action) => {
+            middlewareAPI.dispatch(action);
+        };
+        // `api` is middlewareAPI
         const wrapMiddleware = middlewares.map(middleware => {
             return middleware(middlewareAPI);
         });

test/Redux/apply-middleware-test.js

@@ -30,7 +30,7 @@ describe("middleware", function () {
         const dispatchWithMiddleware = applyMiddleware(middleware)(middlewareAPI);
         const action = {type: "FOO"};
         // then
-        dispatcher.onDispatch(payload => {
+        dispatcher.subscribe(payload => {
             if(payload.type === "FOO"){
                 state.isUpdated = true;
             }
@@ -44,7 +44,7 @@ describe("middleware", function () {
         const dispatchWithMiddleware = applyMiddleware(timestamp)(dispatcher);
         const action = {type: "FOO"};
         // then
-        dispatcher.onDispatch(payload => {
+        dispatcher.subscribe(payload => {
             assert(typeof payload.timeStamp === "number");
             done();
         });