At this point we take our existing reducer.ts file and add what we need to support adding a product:

// products.reducer.ts

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

import { Product } from "./product.model";

const initialState = {
  loading: false,
  list: [],
  error: void 0
}

export interface ProductsState {
  loading: boolean;
  list: Array<Product>,
  error: string;
}

function addProduct(list, product) {
  return [ ...list, product];
}

export function productsReducer(state = initialState, action) {
  switch(action.type) {
    case FETCHING_PRODUCTS_SUCCESSFULLY:
      return { ...state, list: action.payload, loading: false };
    case FETCHING_PRODUCTS_ERROR:
    case ADD_PRODUCT_ERROR:
      return { ...state, error: action.payload, loading: false };
    case FETCHING_PRODUCTS:
    case ADD_PRODUCT:
      return { ...state, loading: true };
    case ADD_PRODUCT_SUCCESSFULLY:
      return { ...state, list: addProduct(state.list, action.payload) };
    default:
      return state;
  }
}

It's worth noting how we create the help function, addProduct(), which allows us to create a new list containing the old content and our new product. It's also worth noting that we can group FETCHING_PRODUCTS_ERROR and ADD_PRODUCT_ERROR actions, and also ADD_PRODUCT and ADD_PRODUCT_SUCCESSFULLY.