Redux Thunkはどのように実装していますか

Question

私はRedux Thunkを反応アプリケーションに使用しています。たとえば：だけReduxのために1行ミドルウェアサンクを設定する理由は上記の方法を呼び出すときに、Reduxのは、自動的にディスパッチオブジェクトを作成することができますので

export const doubleAsync =() => { 
    // Thunk will automatically inject "dispatch" object here 
    return (dispatch, getState) => { 
    return new Promise((resolve) => { 
     setTimeout(() => { 
     dispatch({ 
      type : COUNTER_DOUBLE_ASYNC, 
      payload : getState().counter 
     }) 
     resolve() 
     }, 200) 
    }) 
    } 
}; 

私が印象的です。ミドルウェアは、あなたがこのドキュメントを読むことができますどのように機能するかReduxの理解のために

Answer 1

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

は、我々は（http://redux.js.org/docs/advanced/Middleware.htmlから）などReduxのストアの初期化を持っているとしましょう：

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

 
let todoApp = combineReducers(reducers) 
 
let store = createStore(
 
    todoApp, 
 
    applyMiddleware(thunkMiddleware) 
 
)

そして、そこapplyMiddlewareの純粋な実装です（http://redux.js.org/docs/advanced/Middleware.htmlから）：

// Warning: Naïve implementation! 
 
// That's *not* Redux API. 
 

 
function applyMiddleware(store, middlewares) { 
 
    middlewares = middlewares.slice() 
 
    middlewares.reverse() 
 

 
    let dispatch = store.dispatch 
 
    middlewares.forEach(middleware => 
 
    dispatch = middleware(store)(dispatch) 
 
) 
 

 
    return Object.assign({}, store, { dispatch }) 
 
}

それは、Reduxの中にバージョンはありませんが、一般的な理解のために。 また、storeというパラメータ自体は還元されていません。

ご覧のとおり、すべてのアクションでミドルウェアがdispatchとgetStateのプロパティを持つオブジェクトを受け取るという主要な考え方です。

thunkMiddleware自体は非常に簡単です。それはサンクで他のアクションをディスパッチするために後で使用することができdispatchとgetStateパラメータでこのactionを実行するためにtypeof action === 'function'

let thunkMiddleware = ({ dispatch, getState }) => next => action => { 
 
    if (typeof action === 'function') { 
 
    return action(dispatch, getState); 
 
    } 
 

 
    return next(action); 
 
}

：ソースよりも少し単純化されたバージョンがあります。そしてそれはサンクがいかに働くかです。