質問編集履歴

1 わからない部分に対しての追記と、参考コードを追加しました。

u310ai

u310ai score 8

2018/07/07 14:42  投稿

ReduxのapplyMiddleware内のdispatchについて
applyMiddlewareのコードを見たのですが、わからないところがあります。
new Errorが入ったdispatchをmiddlewareAPIに入れて個々のミドルウェアに渡しているのですが、
例えばthunkなどはアクションにstore.dispatchを渡して、アクション内で実行させたりしていますが、
どうしてエラーにならないのでしょうか?
どうしてstore.dispatchが働くのかがわかりません。
どこでアクション関数内で働くdispatchにstore.dispatchに入れているのでしょうか?
基本的な認識が間違っているかもしれませんが、
よろしくお願いします。
applyMiddleware.js
```javascript
export default function applyMiddleware(...middlewares) {
 return createStore => (...args) => {
   const store = createStore(...args)
   let dispatch = () => {
     throw new Error(
       `Dispatching while constructing your middleware is not allowed. ` +
         `Other middleware would not be applied to this dispatch.`
     )
   }
   const middlewareAPI = {
     getState: store.getState,
     dispatch: (...args) => dispatch(...args)
   }
   const chain = middlewares.map(middleware => middleware(middlewareAPI))
   dispatch = compose(...chain)(store.dispatch)
   return {
     ...store,
     dispatch
   }
 }
}
```  
 
redux-thunk  
```javascript  
function createThunkMiddleware(extraArgument) {  
// ここのdispatchはmiddlewareAPIから渡ってきたdispatchだと思いますが、  
// エラーが入ってたと思うのですがちゃんと働きます。  
 return ({ dispatch, getState }) => next => action => {  
   if (typeof action === 'function') {  
     return action(dispatch, getState, extraArgument);  
   }  
 
   return next(action);  
 };  
}  
 
const thunk = createThunkMiddleware();  
thunk.withExtraArgument = createThunkMiddleware;  
 
export default thunk;  
```
  • Redux

    207 questions

    Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る