azu commented 9 years ago

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に似ている

チェックリスト

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

azu commented 9 years ago

Understanding Redux Middleware — Medium

azu commented 8 years ago

React - Redux 基礎：Middleware 編 - Qiita

azu commented 8 years ago

やっぱりログがいいかな

azu commented 8 years ago

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

azu commented 8 years ago

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

azu commented 8 years ago

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

azu commented 8 years ago

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

azu commented 8 years ago

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 commented 8 years ago

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

azu commented 8 years ago

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;
    };
}