u310ai score 10
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; |
| ``` |
