The next order of business is to update our products.actions.ts file with the new methods that we need to support the preceding code:

// products.actions.ts

import {
  FETCHING_PRODUCTS_SUCCESSFULLY,
  FETCHING_PRODUCTS_ERROR,
  FETCHING_PRODUCTS,
  ADD_PRODUCT,
  ADD_PRODUCT_SUCCESSFULLY,
  ADD_PRODUCT_ERROR
} from "./product.constants";

export const fetchProductsSuccessfully = (products) => ({ 
  type: FETCHING_PRODUCTS_SUCCESSFULLY,
  payload: products
});

export const fetchError = (error) => ({ 
  type: FETCHING_PRODUCTS_ERROR, 
  payload: error 
});
export const fetchProductsLoading = () => ({ type: FETCHING_PRODUCTS });
export const fetchProducts = () => ({ type: FETCHING_PRODUCTS });
export const addProductSuccessfully (product) => ({ 
  type: ADD_PRODUCT_SUCCESSFULLY },
  payload: product
);
export const addProduct = (product) => ({ 
  type: ADD_PRODUCT,
  payload: product
});
export const addProductError = (error) => ({ 
  type: ADD_PRODUCT_ERROR, 
  payload: error 
});

What is worth noting with the created actions is that the addProduct() method takes a product as a parameter. The reason for that is that we want the side effect to use that as body data for the forthcoming HTTP POST.