I was trying to understand how thunk works under the shell, but struggling to understand this code referenced from here
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
// This gets called for every action you dispatch.
// If it's a function, call it.
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
// Otherwise, just continue processing this action as usual
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
It says this is basically the code for thunk. What confuses me here is the multiple => syntax. I know => is part of the arrow functions.
My current understanding is that createThunkMiddleware
returns a function, let's call it A, that returns another function B, that returns another function C. And the signatures of A, B and C are like below:
function A ({dispatch, getState}) {
return B(next)
}
function B (next) {
return C(action)
}
function C (action) {
....
}
But this doesn't make sense to me. Because, how does A pass next
to B, same for B.
redux-thunk is just a normal middleware of redux. There exists some type of control flow in middleware system. please check here, and you'll know how this come out.