How does action creator which is a thunk receive a store's dispatch method? - reactjs

Question

I am learning redux and there is one thing puzzling me regarding the internal logic - how does a thunk receive dispatch as argument if a thunk is an argument to dispatch and not vice versa? Here is a sample code:
I am creating an action creator which is a thunk (it does not return an action itself but another function which eventually returns the action). I am defining it to receive dispatch function as argument, like this (code is simplified to serve as example):
export const fetchPosts = () => {
return async (dispatch) => {
const response = await fetch('some url');
dispatch({type: 'FETCH_POSTS', payload: response});
}
}
Then I use this thunk in App.js file, when I am getting a dispatch function from 'react-redux':
import { useDispatch } from 'react-redux';
import { fetchPosts } from './store/posts-actions';
function App() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchPosts());
},[dispatch]);
...
}
I am not passing dispatch as an argument to fetchPosts(). I am passing fetchPosts() to dispatch. And this is the part that I don't understand.
How does fetchPosts receive dispatch as argument if fetchPosts is an argument to dispatch and not vice versa?

Answer 1

This is covered in the Redux docs pages on Writing Logic with Thunks and Redux Fundamentals, Part 6: Async Logic and Data Fetching.
The Redux thunk middleware looks for any time that a function gets passed into dispatch, intercepts that function, and then calls it with (dispatch, getState) as arguments:
// standard middleware definition, with 3 nested functions:
// 1) Accepts `{dispatch, getState}`
// 2) Accepts `next`
// 3) Accepts `action`
const thunkMiddleware =
({ dispatch, getState }) =>
next =>
action => {
// If the "action" is actually a function instead...
if (typeof action === 'function') {
// then call the function and pass `dispatch` and `getState` as arguments
return action(dispatch, getState)
}
// Otherwise, it's a normal action - send it onwards
return next(action)
}