actions.js

// 1. you pass the base name of actions, and an async function
export default function makeThunkAsyncActionCreator(baseName, asyncFn) {
  
  // 2. an async action creator is created to indicate the asyncFn progress
  const actionCreator = makeAsyncActionCreator(baseName)
  
  // 3. thunk action creator is what returns from "makeThunkAsyncActionCreator" and it is ready to be called
  const thunkActionCreator = (...args) => (dispatch, getState) => {
    
      // 4. when the action creator is called with certain arguments (...args), we dispatch a pending action
      dispatch(actionCreator())
    
      // 5. and then we launch the action with the required args
      return Promise.resolve()
        .then(() => asyncFn(...args))
        .then(data => {
          // 6. when the promise ends, we dispatch a success action with the data returned
          return dispatch(actionCreator.success(data))
        })
        .catch(err => {
          // 7. if the rejects, we dispatch a failure action with the error returned
          return dispatch(actionCreator.failure(err))
        })
    }
  }

  return thunkActionCreator
}