In this section, we are going to create two actions for getting the products and indicating that products are being loaded.

1. Let's start by creating a ProductsActions.ts file with the following import statement:

import { ActionCreator, AnyAction, Dispatch } from "redux";

These are a few types from Redux that we are going to use when implementing our actions.

2. One of our actions is going to be asynchronous. So, let's import a type from redux-thunk ready for when we implement this action:

import { ThunkAction } from "redux-thunk";

3. Let's add another import statement so that we can use our fake API:

import { getProducts as getProductsFromAPI } from "./ProductsData";

We've renamed the API function to getProductsFromAPI to avoid a name clash because we are going to create an action called getProducts a little later.

4. Let's also import the types we created in the last section:

import { IProductsGetAllAction, IProductsLoadingAction, IProductsState, ProductsActionTypes } from "./ProductsTypes";

5. We are going to create what is called an action creator now. An action creator does what it says on the tin: it's a function that creates and returns an action! Let's create an action creator for creating the product loading action:

const loading: ActionCreator<IProductsLoadingAction> = () => {
  return {
    type: ProductsActionTypes.LOADING
  }
};

• We use the generic ActionCreator type containing the appropriate action interface for the function signature
• The function simply returns the required action object

We can write this function more succinctly using an implicit return statement as follows:

const loading: ActionCreator<IProductsLoadingAction> = () => ({
  type: ProductsActionTypes.LOADING
});

We'll use this shorter syntax from now on when implementing action creators.

6. Let's move on to implementing the action creator for getting products. This is more complex, so let's start with the function signature:

export const getProducts: ActionCreator<ThunkAction<Promise<AnyAction>, IProductsState, null, IProductsGetAllAction>> = () => {};

We again use the generic ActionCreator type, but this time it contains more than just the action interface that will eventually be returned. This is because this particular action is asynchronous.

We use ThunkAction inside ActionCreator for asynchronous actions, which is, in turn, a generic type with four parameters:

• The first parameter is the return type, which should ideally be Promise<IProductsGetAllAction>. However, the TypeScript compiler struggles to resolve this, so, we have opted for the slightly looser Promise<AnyAction> type.
• The second parameter is the state interface that the action is concerned with.
• The third parameter is the type of parameter passed into the action creator, which is null in our case because there is no parameter.
• The last parameter is the type of the action.

We export this action creator because this is going to be eventually called from the ProductsPage component.

7. Asynchronous actions need to return an asynchronous function that will eventually dispatch our action:

export const getProducts: ActionCreator<ThunkAction<Promise<AnyAction>, IProductsState, null, IProductsGetAllAction>> = () => {
  return async (dispatch: Dispatch) => {
    
  };
};

So, the first thing that function does is return another function, flagging that it is asynchronous, using the async keyword. The inner function takes the dispatcher from the store as a parameter.

8. Let's implement the inner function then:

return async (dispatch: Dispatch) => {
  dispatch(loading());
  const products = await getProductsFromAPI();
  return dispatch({
    products,
    type: ProductsActionTypes.GETALL
  });
};

• The first thing we do is dispatch our other action so that the loading state is eventually changed accordingly by the reducer
• The next step is to get the products asynchronously from the fake API
• The final step is to dispatch the required action

Now that we have created a couple of actions, we'll create a reducer in the next section.