Async Actions with redux-thunk

Our app right now only has one async function. It’s getExchangeRates and it's found in api.js. That’s currently being called in a useEffect hooks inside of ExchangeRate.js. The hook is nice because it runs on first load and then any time our base currencyCode gets changed. In general, I think this is the right way to model API updates such a this one.

However, there are cases we will want our action creators to support asynchronous calls. This is a very common pattern found in legacy redux application, so I think it's worth exploring in depth.

Using redux thunk:

import thunk from "redux-thunk";
// ...
createStore(combineReducers(/* ... */),
  applyMiddleware(thunk)
);

• Redux Thunk Documentation