At first glance, the following reducer is just like any reducer you have written before. It is a function that takes a parameters' state and action, and it contains a switch construct that switches between different actions. So far, everything is familiar. The initialState variable is different though. It contains the loading, list, and error properties. loading is simply a Boolean that indicates whether our AJAX request is still pending. list is our data property that will contain our list of products once they are are returned. The error property is simply a property that contains the error if any comes back from the AJAX request:

// product/product.reducer.ts

import {
  FETCHING_PRODUCTS_SUCCESSFULLY,
  FETCHING_PRODUCTS_ERROR,
  FETCHING_PRODUCTS
} from "./product.constants";
import { Product } from "./product.model";
import { ActionReducerMap } from "@ngrx/store/src/models";

const initialState = {
  loading: false,
  list: [{ name: "init" }],
  error: void 0
};

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

export interface FeatureProducts {
  products: ProductState;
}

export const ProductReducers: ActionReducerMap<FeatureProducts> = {
  products: productReducer
};

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