Creating actions

We are going to extend the React shop we have been building in previous chapters and add Redux to manage the state on the Products page. In this section, we'll create actions to start the process of getting the products into the page. There will be one action to get the products. There will be another action to change some new loading state, which we'll eventually tie to the withLoading HOC that we already have in our project.

Before we make a start on the Redux actions, let's create a fake API in ProductsData.ts for fetching products:

export const getProducts = async (): Promise<IProduct[]> => {
  await wait(1000);
  return products;
};

So, the function asynchronously waits a second before returning the products.

We need to start our action's implementation by creating some types. We'll do this next.