Learn React with TypeScript 3

Adding asynchronous data fetching

At the moment, the data fetching in our shop is instantaneous because all the data is local. So, before working on the withLoader component, let's refactor the data fetching functions to include a delay and be asynchronous as well. This will better simulate a real data fetching function that gets the data using a web API:

1. In ProductData.ts, let's add the following arrow function that can be used to get a product:

export const getProduct = async (id: number): Promise<IProduct | null> => {  await wait(1000);  const foundProducts = products.filter(customer => customer.id === id);  return foundProducts.length === 0 ? null : foundProducts[0];};

The function takes in the product ID and uses the filter function in ...