Redux

[azu]

Reduxのアーキテクチャ

URL: https://github.com/rackt/redux

どう書ける?

import { createStore, combineReducers, applyMiddleware } from 'redux';

// applyMiddleware takes createStore() and returns
// a function with a compatible API.
let createStoreWithMiddleware = applyMiddleware(logger, crashReporter)(createStore);

// Use it like you would use createStore()
let todoApp = combineReducers(reducers);
let store = createStoreWithMiddleware(todoApp);

どういう仕組み?

• 高階関数をapplyしている
• http://rackt.github.io/redux/docs/advanced/Middleware.html
• その機構のコードへのリンク
• 同様の仕組みをDispatcherベース(Flux向け)で書く
• その仕組みやプラグインについてドキュメントへのリンク

どういう事に向いてる?

• アスペクト的に前後に処理を挟めるためログ
• 値自体は直接操作するわけではないが、受取るデータは変換できる

どういう事に向いていない?

• 変換の仕組み上書き換え等を行うプラグインを扱いにくい 等

この仕組みを使ってるもの

• Connectに似ている

---

チェックリスト

• どう書ける?
• どういう仕組み?
• どういう用途に向いている?
• どういう用途に向いていない?
• この仕組みを使っているもの
• 実装してみよう
• エコシステム
• 目次を追加

[azu]

Understanding Redux Middleware — Medium

[azu]

React - Redux 基礎：Middleware 編 - Qiita

[azu]

やっぱりログがいいかな

[azu]

ReduxのMiddlewareについて理解したいマン | moxt

[azu]

logとtransformを作るのが正解っぽい

[azu]

これ分かりやすい　http://briantroncone.com/?p=529

[azu]

Reduxのmiddlwareってstoreの値自体は改変できないけど、dispatchするactionは変更できる。
ここでaction自体を変更するケース何が存在するんだろ? timestampを付けるとか書いた

[azu]

export default (/*store*/) => next => action => {
    const timestampedAction = Object.assign({}, {
        timeStamp: Date.now()
    }, action);
    return next(timestampedAction);
};

こういう感じの以外にnextに対して変更したactionを与えるのって何があるんだろ?
return はBrian Troncone – Redux Middleware: Behind the Scenesを見ると分かりやすいけど、loggerをどっちにおくかで意味ができる感じ。
middlwaresの最初にloggerを置くなら、middlware適応後になって、最後に置くならmiddlware適応前になる。
やっぱり順序問題はconnectと似たような形で存在するけど、アプリケーションに対する値を改変する方法は少ないから少し安全な気がする。

[azu]

でも、middlwareを前提としたactionを作る傾向が強くて、
acdlite/flux-standard-action: A human-friendly standard for Flux action objects. とかまさにそれの塊で、metaにほげほげがあるなら、あるmiddlwareがそれを処理してみたいな事を書いてる傾向が強い気がする。
DSLプログラミングみたいな感じに見えてくる

[azu]

Redux middleware solves different problems than Express or Koa middleware, but in a conceptually similar way. It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.

http://redux.js.org/docs/advanced/Middleware.html

とあって、connectとコンセプト自体は同じなのだけど、

It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.

と言ってる。
これは

export default function createLogger(options = defaultOptions) {
    const logger = options.logger || defaultOptions.logger;
    return store => next => action => {
        // => next middleware or dispatch action
        const value = next(action);
        // pass??
        return value;
    };
}

[azu]

10. Middleware · happypoulp/redux-tutorial Wiki

[azu]

Redux Middleware in Depth - Qiita