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.