How is redux thunk with extra argument working?

Question

this is the source code of redux-thunk library:

function createThunkMiddleware(extraArgument) {
  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;

I can not understand how "thunk" and "thunk.withExtraArguent" are different from each other.

const thunk=createThunkMiddleware() // this is the middleware that we use for our async requests

However thunk.withExtraArgument is the SAME createThunkMiddleware function but this time it is just being passed as a reference. We are able to pass an argument here but we cannot pass the argument to the thunk.

Can someone explain the difference please? To me thunk and thunk.withExtraArgument are same

Answer 1

you can add an Extra redux-thunk param as a function reference and call it in your async actions. you can read more about how to use Axios as an ExtraParameter in this story on Medium