Setting up our actions

In the app.action.ts file
We create all our actions

Note that creating the action takes a props parameter which holds data that is called with the action (If it exists)

import { createAction, props } from '@ngrx/store';
import IProduct from '../product';

export const deleteProduct = createAction(
  '[Products] Delete Product',
  props<{ product: IProduct }>()
);

export const deleteProductSuccess = createAction(
  '[Products] Delete Product Successful',
  props<{ product: IProduct }>()
);

export const deleteProductFail = createAction(
  '[Products] Delete Product Failure',
  props<{ error: string }>()
);

//Get a single Product
export const getProduct = createAction(
  '[Product] Get Single Product',
  props<{ id: string }>()
);

export const getProductSuccess = createAction(
  '[Product] Get Single Product Successful',
  props<{ product: IProduct }>()
);

export const getProductFail = createAction(
  '[Product] Get Single Product Failure',
  props<{ error: string }>()
);

//Get All Products
export const getProducts = createAction('[Products] Get All Product');

export const getProductsSuccess = createAction(
  '[Products] Get All Product Successful',
  props<{ products: IProduct[] }>()
);

export const getProductsFail = createAction(
  '[Products] Get All Product Failure',
  props<{ error: string }>()
);

//Update product
export const updateProduct = createAction(
  '[Products] Update Product',
  props<{ product: IProduct }>()
);

export const updateProductSuccess = createAction(
  '[Products] Update Product Successful',
  props<{ product: IProduct }>()
);

export const updateProductFail = createAction(
  '[Products] Update Product Failure',
  props<{ error: string }>()
);

//Add new product
export const AddProduct = createAction(
  '[Products] Add Product',
  props<{ name: string; price: number }>()
);

export const AddProductSuccess = createAction(
  '[Products] Add Product Successful',
  props<{ product: IProduct }>()
);

export const AddProductFail = createAction(
  '[Products] Add Product Failure',
  props<{ error: string }>()
);

We created Success and Failure actions because all our actions are asynchronous and they can fail

After creating the actions we go back to the reducer file and tell the reducer what to do when the action is called

export const appReducer = createReducer(
  initialState,
  on(AppActions.getProductsSuccess, (state, action): AppState => {
    return {
      ...state,
      products: action.products,
    };
  }),

  on(AppActions.getProductsFail, (state, action): AppState => {
    return {
      ...state,
      error: action.error,
    };
  }),

  on(AppActions.getProductSuccess, (state, action): AppState => {
    return {
      ...state,
      product: action.product,
    };
  }),

  on(AppActions.getProductFail, (state, action): AppState => {
    return {
      ...state,
      error: action.error,
    };
  }),

  on(AppActions.deleteProductSuccess, (state, action): AppState => {
    const newProducts = [...state.products];
    newProducts.splice(newProducts.indexOf(action.product), 1);

    return {
      ...state,
      products: newProducts,
    };
  }),

  on(AppActions.deleteProductFail, (state, action): AppState => {
    return {
      ...state,
      error: action.error,
    };
  }),

  on(AppActions.updateProductSuccess, (state, action): AppState => {
    return {
      ...state,
      product: action.product,
    };
  }),

  on(AppActions.updateProductFail, (state, action): AppState => {
    return {
      ...state,
      error: action.error,
    };
  }),

  on(AppActions.AddProductSuccess, (state, action): AppState => {
    const newProducts = [...state.products];
    newProducts.push(action.product);
    return {
      ...state,
      products: newProducts,
    };
  }),

  on(AppActions.AddProductFail, (state, action): AppState => {
    return {
      ...state,
      error: action.error,
    };
  })
);

We imported all the actions as AppActions and also imported on function from @ngrx/store